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的""，二者不要搞混了)**

---

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

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 (
          <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!