React组件生命周期

react组件生命周期无外乎存在两种情况:

1.  初次挂载组件
2.  已挂载待更新组件
  • 初次挂载组件:

    1. constructor(props, context)
      创建时调用一次

    2. componentWillMount()
      组件挂载前调用一次。如果此时setState,本次的render函数可以看到更新后的state,并且只渲染一次

    3. componentDidMount()
      在组件挂载(render)之后调用一次。此时可以使用refs获取dom

    4. componentWillUnmount()
      在组件被卸载的时候调用。一般componentDidMount里面注册的事件需要在这里删除。

  • 已挂载待更新组件:

    1. componentWillReceiveProps()
      props是父组件传递给子组件的。只要父组件render的时候组件会调用componentWillReceiveProps
    2. shouldComponentUpdate()
      组件挂载之后,每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染。
      默认返回true,需要重新render。此处可做重要的优化。减少不必要的更新比对。
    3. componentWillUpdate()
      在上一个钩子函数shouldComponentUpdate返回true或者调用forceUpdate之后,componentWillUpdate会被调用。
    4. componentDidUpdate()
      在组件重新render后调用。
    5. componentWillUnmount
      在组件被卸载的时候调用。一般componentDidMount里面注册的事件需要在这里删除。

在react中,触发render的途径

- 首次渲染
- 调用this.setState (re)
- forceUpdate
- 接受新的props
posted @ 2017-08-07 10:30  douglasvegas  阅读(152)  评论(0编辑  收藏  举报