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(属性) 。
组件的生命周期:
- componentDidMount – 装载组件后触发
- componentWillUnmount – 在组件卸载之前触发
- getDerivedStateFromProps – 当组件装载时以及每当props 更改时触发。 用于在其 props(属性) 更改时更新组件的状态
事件:
- onClick
- onSubmit
- 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的""，两者不要搞混了)
this.props.children
this.props.attr是取到组件传递过来的数据或属性，而this.props.children则表示组件的所有子节点,可以通过this.props.children.map来遍历出来验证。
React之PropTypes
组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求
yarn add prop-types
import PropTypes from 'prop-types'
MyTitle中有一个title属性，他的值为一个字符串，我们可以通过MyTitle.propTypes来定义该组件中属性的类型.如果将title: PropTypes.string改为其他类型，就会报以下的错误。
React之ref
- 同vue的ref作用一样，组件并不是真实的DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM。
- 只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
- 但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。
图片放的太多了，在这里贴一下代码..请忽视开头说的话..
class App extends Component {
handleClick () {
this.refs.myTextInput.focus()
}
render() {
return (
<div className="App">
<LikeButton/>
<input type="text" ref="myTextInput"/>
<input type="button" value="Focus the text input" onClick={ this.handleClick.bind(this) }/>
</div>
);
}
}在这里需要强调的是，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 (
<p onClick={ () => this.handleClick() }>
You { text } this.click to toggle
</p>
)
}
}在这里定义一个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 (
<div className="App">
<div>
<input type="text" value={val} onChange={this.handleChange.bind(this)}/>
<p>{ val }</p>
</div>
</div>
);
}
}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};"而要写成style={{opacity: this.state.opacity}}
结语
**作为一个前端程序猿很不容易，前端的技术更新太快，也出现了“别更新了，老子学不动了”这类前端的梗。不过前端层出不穷的技术让我们看到了前端的未来，我们都是热于分享的人，希望正在学习的我也能够帮助到正在学习的你。 这些demo都在我的github，感兴趣的朋友可以clone下来看下，最近搭了一个个人blog，欢迎来踩，PC端主题一股科幻风有没有！！主题来自于hexo主题
最后说一句！很重要！如果我的这篇文章帮助到了你，那你可以点个star再走嘛~一起upupup!**