React组件生命周期

ぃ、小莉子 提交于 2020-01-20 10:21:12

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
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!