Vue会了吗？来认识一下React吧(上)

前言

React作为Facebook 内部开发 Instagram 的项目中，是一个用来构建用户界面的优秀 JS 库，于 2013 年 5 月开源。作为前端的三大框架之一，React的应用可以说是非常的广泛，包括BAT在内的许多大公司很多项目都是基于其开发的。

Vue：除了VDom之外，Vue的响应性能和React相比还是有很大的区别，无论是本身的语法层面还是外围的第三方支持软件，总之，迁移起来不会是那么容易的事情。

但是作为一名热爱前端的技术人员,学习优秀的技术栈仿佛已经成了一种习惯,在这里结合阮一峰React以及对阮一峰老师15年的教程进行版本更新,简单介绍一下React的入门,本文中所有demo代码都以图片形式展示,目的是建议手打尝试，而不是直接复制，如需代码可以点击这里。

使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

• yarn add create-react-app -g
• create-react-app projectName
• cd projectName
• yarn start

然后打开浏览器输入http://localhost:3000/,就可以看到React的六芒星LOGO了。

以下是React重要的部分

• JSX – 允许我们编写类似HTML的语法 转换为lightweightJavascript对象。
• 虚拟DOM – 实际DOM的Javascript表示。
• React.Component – 您创建新组件的方式
• render（方法） – 描述特定组件的 UI 外观 。
• ReactDOM.render – 将React组件渲染到DOM节点。
• state – 组件的内部数据存储（对象）。
• constructor（this.state） – 建立组件初始 state(状态) 的方式。
• setState – 一种辅助方法，用于更新组件的 state(状态) 并重新渲染 UI。
• props – 从父组件传递给子组件的数据。
• propTypes – 允许您控制传递给子组件的某些 props(属性) 的存在或类型。
• defaultProps – 允许您为组件设置默认 props(属性) 。

• 组件的生命周期:

  1. componentDidMount – 装载组件后触发
  2. componentWillUnmount – 在组件卸载之前触发
  3. getDerivedStateFromProps – 当组件装载时以及每当props 更改时触发。 用于在其 props(属性) 更改时更新组件的状态

• 事件:

  1. onClick
  2. onSubmit
  3. onChange

React的JSX语法

HTML 语言直接写在 Javascript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 Javascript 的混写

因为React没有vue那样的v-for一键循环，所以要自己手动用map来实现

效果图:

React组件嵌套组件以及数据传递子组件

vue通过子组件中的props来传递数据,而React则是用this.props.attr来传递，注意，没有$符号!
组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。

JSX 允许直接在模板插入 Javascript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员.我们定义了一个arr,里面是2个标题标签,通过在ul模板中添加{arr}来实现效果
(注意不是vue的&＃8221;&＃8221;，两者不要搞混了)

this.props.children

this.props.attr是取到组件传递过来的数据或属性，而this.props.children则表示组件的所有子节点,可以通过this.props.children.map来遍历出来验证。

React之PropTypes

组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。

组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求

yarn add prop-types

import PropTypes from &＃8216;prop-types&＃8217;

MyTitle中有一个title属性，他的值为一个字符串，我们可以通过MyTitle.propTypes来定义该组件中属性的类型.如果将title: PropTypes.string改为其他类型，就会报以下的错误。

React之ref

1. 同vue的ref作用一样，组件并不是真实的DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM。
2. 只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
3. 但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。

图片放的太多了，在这里贴一下代码..请忽视开头说的话..

class App extends Component {
handleClick () {
this.refs.myTextInput.focus()
}
render() {
return (


在这里需要强调的是，React的事件中如果不用剪头函数，那就要用bind来绑定this。

React之this.state以及点击事件

React中的state就相当于vue里的data数据存储,而小程序的this.setData,大家懂的..

class LikeButton extends Component {
state = {
liked: false
}
handleClick () {
// console.log(this)
this.setState({
liked: !this.state.liked
})
}
render() {
const text = this.state.liked?'liked':'don\'t like'
return (


this.handleClick() }>
You { text } this.click to toggle


在这里定义一个text变量，通过state中的liked来判断text的值，然后再通过onClick点击事件来反复改变liked的值，效果可以自己通过代码实现看看，就是普通的MVVM模型。

React之实现双向数据绑定

vue里面v-model一键实现的事情React又没有-0-，不过我们可以通过onChange事件来简单实现它，直接上代码.

class App extends Component {
state= {
value: 'Hello!'
}
handleChange (event) {
this.setState({
value: event.target.value
}) }
render() {
const val = this.state.value
return (


React之组件生命周期

组件的生命周期分成三个状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

• componentWillMount(): 在插入真实DOM之前调用
• componentDidMount(): 在插入真实DOM之后调用
• componentWillUpdate(object nextProps,object nextState): 在被重新渲染之前调用
• componentDidUpdate(object prevProps, object prevState): 在被重新渲染之后调用
• componentWillUnmount(): 在移除真实DOM之前调用

此外，React 还提供两种特殊状态的处理函数。

• componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
• shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

另外，组件的style属性的设置方式也值得注意，不能写成而要写成style={{opacity: this.state.opacity}}

结语

**作为一个前端程序猿很不容易，前端的技术更新太快，也出现了“别更新了，老子学不动了”这类前端的梗。不过前端层出不穷的技术让我们看到了前端的未来，我们都是热于分享的人，希望正在学习的我也能够帮助到正在学习的你。 这些demo都在我的github，感兴趣的朋友可以clone下来看下，最近搭了一个个人blog，欢迎来踩，PC端主题一股科幻风有没有！！主题来自于hexo主题
最后说一句！很重要！如果我的这篇文章帮助到了你，那你可以点个star再走嘛~一起upupup!**