React.js基础知识 函数组件和类组件（二）

 1. 生命周期函数

   【调取组件】
      constructor  初始化属性状态
      componentWillMount 第一次渲染之前
      render 渲染
      componentDidMount 第一次渲染之后

   【组件重新渲染：内部状态改变、传递给组件的属性改变】
     状态改变：
       shouldComponentUpdate
          =>是否允许组件更新：返回TRUE是允许，返回FALSE则不再继续向下走
       componentWillUpdate
          =>更新之前：和SHOULD一样，方法中通过this.state.xxx获取的还是更新前的状态信息，方法有两个参数：nextProps/nextState存储的是最新的属性和状态信息
       render 更新
       componentDidUpdate 更新之后

     属性改变：
       componentWillReceiveProps(nextProps/nextState)
         =>接收最新属性之前，基于this.props.xxx获取的是原有的属性信息，nextProps存储的是最新传递的属性信息
       shouldComponentUpdate  是否允许组件更新
       componentWillUpdate  更新之前
       render 更新
       componentDidUpdate 更新之后

  【组件销毁】
     componentWillUnmount  组件销毁之前

  =====

  组件的属性是只读的：只能调取组件时候传递进来，不能自己在组件内部修改（但是可以设置默认值和规则）

  组件的状态是可读写的：状态改变会引发组件的重新更新（状态是基于setState改变）

  组件实例上可以放一些信息：这些信息只是为了方便在组件内任意方法中获取和使用的

  实例上挂载的REFS：就是用来操作DOM的

  实例上挂载的context：是用来实现组件之间信息传递的

    // 函数式组件 一般用来完成一些静态的组件，不需要从后端获取数据
    export defalut function Component (props){  
               // props 是传递过来的属性 是一个对象
              return <div></div>    //jsx语法
    }
   // 类组件 一般用来做比较复杂的页面从服务端获取数据，有生命周期函数，es6 类的一些继承，封装
   export defalut class Component extends React.Component{
            constructor(props){
              super(props)  //继承this
            }
           static defalutProps={} //设置默认属性  属性是可读不可写的，就是不能修改属性的值
           static propTypes={}   // 设置属性传递进来的类型 和vue 属性类似，但是它是一个插件想要用需要下载 
           // 生命周期
           componentWillMount(){}
	       componentDidMount(){}
	       shouldComponentUpdate(){}
	       componentWillUpdate(){}
	       componentDidUpdate(){}
	       componentWillReceiveProps(){}
	       componentWillUnmount(){}
           render(){
             return <div></div> //jsx
           }
	       
   }

  // 只有在组件中才有状态 
  this.state={}       //组件是通过状态是否改变来判定是否重新渲染页面
  this.setState({    // 修改状态
  }) 

   如在jsx 中  <div ref="box"></div>
   那么组件的实例上就会有 this.refs.box 这个属性值就是dom对象

componentWillMount → UNSAFE_componentWillMount
componentWillReceiveProps → UNSAFE_componentWillReceiveProps
componentWillUpdate → UNSAFE_componentWillUpdate