• 认识React
• 组件
• Jsx的引用
• 插值符号
• 组件的数据状态
• 组件的样式
• 组件的事件
• 组件的生命周期
• React的ref属性
• React的不足

1、认识React

• React是一个View层的库，可用于组件化开发。该库提供一个JSX语法，允许用户在JS文件像写HTML一样，编写组件的结构，并根据一系列的语法，将数据嵌入所写的HTML中。
• React框架对用户提供了两个类库，react和react-dom，在使用前需要引入这两个包。其中react提供Component，组件支持jsx语法；react-dom则对外提供了render方法，调用ReactDOM.render将组件挂载到页面中。

2、组件

• 写组件的作用：如果一个虚拟dom复用多次的时候，通常我们将它封装在一个组件当中，通常用组件封装一组虚拟dom，这一组虚拟dom通常称他为虚拟dom树。
• 组件的创建：通过React框架自带的Component方法，再通过ES6的Class类创建组件，组件中通过render()方法渲染虚拟dom节点。

3、JSX的引用

• 引用JSX语法的好处：可以直接在js中写HTML，使得代码更加简单，解决了创建虚拟dom成本过大的问题 。
• 如何引用JSX语法：在render()方法通过return返回一个对象，这个对象就是HTML代码，不过最外层只允许存在一个dom节点。

4、插值符号

• 插值符号简单的说就是{}，在jsx语法中书写变量需要写在插值符号中，同时书写注释需要使用{/* 注释 */}。

5、组件的数据状态

• React包含两种数据状态：内部状态state和外部参数props。

  1、state: 组件内部状态，在constructor构造函数中通过设置this.state的值初始化，此后利用this.state进行获取，并利用this.setState函数更新值，每次都需要返回一个新的对象或者值。
  2、props: 父组件在调用子组件通过设置属性将数据参入子组件内部，在子组件中通过this.props获取，通过调用父组件传入的函数，执行父组件定义的方法修改this.props的值。

  这两种数据状态发生改变都会触发组件的重新渲染。

6、组件的样式

• 样式style属性的值只能是对象，不能为style添加字符串的值
• Font-size这类要用驼峰式fontSize
• Css3前缀的属性第一个字母要大写WebkitTransform
• 组件中定义一个虚拟dom我们都要用对象，并且可以使用变量，变量当中可以使用表达式。

7、组件的事件

• 通过在JSX中的标签上设置onClick，onChange等属性，将触发后的事件处理函数作为值 。

  class App extends React.Component {
    constructor(){
        this.state = {
            num: 1,
        }   
    }
    add = () => {
        this.setState({
            num:this.state.num+1,
        }) 
    }
    render() {
      const {num} = this.state;
      return (
        <div>
          {num}
          <button onClick={add}>增加</button>
        </div>
      )
    }
  }
  

• 通常情况下，事件处理函数执行后，都会改变现有的state，触发组件更新操作。

• 注意：事件处理函数异步调用时是在全局环境中执行，因此需要绑定this，方法如下

1. 箭头函数: () => {}
2. 在constructor中绑定: this.add = this.add.bind(this)

8、React组件生命周期

• 组建的生命周期可分成三个状态：

  ​ Mounting：已插入真实DOM

  ​ Updating：正在被重新渲染

  ​ Unmounting：已移除真实DOM

  • 生命周期的方法有：

    1、componentWillMount：在渲染前调用，在客户端也在服务端

    2、componentDidMount：在第一次渲染后调用，只在客户端

    3、ComponentWIllReceiveProps在组建接收到一个props时被调用。这个方法在初始化render时不会被调用

    4、shouldComponentUpdate返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用

    5、componentDidUpdate: 在组件完成更新后立即调用。在初始化时不会被调用

    6、componentWillUnmount:在组件从DOM中移出的时候激励被调用

9、React的ref属性

• React支持一种非常特殊的属性 ref ，你可以用来绑定到render()输出的任何组件上

  class Test extends React.Component {
      componentDidMount(){
          consoel.log(this.refs.myInput);
      }
      render(){
          return (
              <div>
                <input type='text' ref='myInput' />
              </div>
          )
      }
  }
  

10、React的不足

• 为了统一管理状态数据，通常会将数据放在最上层组件中，然后通过props层层传递，传递到底层组件中。如果嵌套太深，参数传递过程非常的复杂。虽然context可以帮我们解决这个问题，但是它也会带来新的问题，使得每个子组件都可以直接修改顶层数据，使得数据的管理变得不可控。也因此有了Redux的出现。