react学习二生命周期

2018-08-22

生命周期

一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期   
组件的生命周期包含三个阶段：创建阶段（Mounting) 运行和交互阶段(Updating) 卸载阶段(Mounting)

创建阶段(Mounting) 该阶段的函数只执行一次。

一： constructor()

1:  获取props  初始化state
2:通过constructor()的参数props获取
            例：class Greeting extends React.Component {
      constructor(props) {
        // 获取 props
        super(props)
        // 初始化 state
        this.state = {
          count: props.initCount
        }
      }
    }
    // 初始化 props
    // 语法：通过静态属性 defaultProps 来初始化props
    Greeting.defaultProps = {
      initCount: 0
    };

二：componentWillMount()

1 组件被挂载到页面之前调用，在render之前被调用。在这设置状态不会触发渲染。
2 无法获取页面中的Dom对象
3 可以调用setState()方法来改变状态值
4：发送ajax请求获取数据
componentWillMount() {
    console.warn(document.getElementById('btn')) // null
    this.setState({
      count: this.state.count + 1
    })
    }

三：render()

1 渲染组件到页面中，无法获取页面中的Dom对象
2 不要在render()方法中调用setState()方法，否则会递归渲染。因为状态改变会调用render()
3 这个函数能执行多次。只要组件的属性或状态改变了，这个方法就会重新执行。
render() {            
  return (
    <div>
      <button id="btn" onClick={this.handleAdd}>打豆豆一次</button>
      {
        this.state.count === 4
        ? null
        : <CounterChild initCount={this.state.count}></CounterChild>
      }
    </div>
  )
 }

四：componentDidMount()

1:组件已经挂载到页面中
2 ：可以进行Dom操作，比如获取组件DOM对象
3：可以发送请求获取数据
4：可以通过setState()修改状态值（在这里修改状态会重新渲染）
componentDidMount() {
     // 此时，就可以获取到组件内部的DOM对象
     console.warn('componentDidMount', document.getElementById('btn'))
   }

运行阶段（Updating）

特点：1 该阶段的函数执行多行
      2 每当组件的props或者state改变的时候，都会触发运行阶段的函数

一：componentWillReceiveProps()

1:组件接受新的props前触发这个方法
2：当前组件的props值
3：可以通过this.props获取到上一次的值
4：需要响应属性的改变，通过对比this.props和nextProps并在该方法中使用this.setState()处理状态改变
5：修改state不会触发该方法
componentWillReceiveProps(nextProps) {
  console.warn('componentWillReceiveProps', nextProps)
}

二：shouldComponentUpdate()

作用：根据这个方法的返回值决定是否重新渲染组件，返回true重新渲染，否则不渲染
优势：通过某个条件渲染组件，降低组件渲染频率，提升组件性能
说明：如果返回值为false，那么，后续render()方法不会被调用
注意：这个方法必须返回布尔值！！！
场景：根据随机数决定是否渲染组件
// - 参数：
//   - 第一个参数：最新属性对象
//   - 第二个参数：最新状态对象
shouldComponentUpdate(nextProps, nextState) {
  console.warn('shouldComponentUpdate', nextProps, nextState)

  return nextState.count % 2 === 0
}

三：componentWillUpdate()

  作用：组件将要更新
  参数：最新的属性和状态对象
注意：不能修改章台，否则会循环渲染
componentWillUpdate(nextProps, nextState) {
   console.warn('componentWillUpdate', nextProps, nextState)
 }

四：componentDidUpdate()

作用：组件已经被更新
参数：：旧的属性和状态对象
componentDidUpdate(prevProps, prevState) {
  console.warn('componentDidUpdate', prevProps, prevState)
}

卸载阶段（Unmounting)

componentWillUnmount()
作用：在卸载组件的时候，执行清理工作
1 清除定时器
2 清除componentDidMount创建的Dom对象
只要组件不再被渲染到页面，这个方法就会被调用