react生命周期

1、初始化
  • getDefaultProps()
    • 设置默认的props,也可以用dufaultProps设置组件的默认属性。 
  • getInitialState()
    • 在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state。
    • 此时可以访问this.props
  • componentWillMount()
    • 在组件初始化时调用(渲染前),以后更新都不调用,整个生命周期只调用一次
    • 此时可以修改state。
  • render()
  • componentDidMount()
    • 渲染后调用,只调用一次。
    • 此时可以使用this.getDOMNode()。 
2、更新
  • componentWillReceiveProps(nextProps)
    • 接收新的props时调用,初始化时不调用。
  • shouldComponentUpdate(nextProps, nextState)
    • 接收新的props或者state时被调用。初始化时或者使用forceUpdate时不调用
    • 需要返回一个布尔值
    • 可以在此对比前后两个props和state是否相同,如果相同则返回false阻止更新
  • componentWillUpdate(nextProps, nextState)
    • 新一轮更新前调用,在初始化时不会被调用
    • 此时可以修改state:nextState.name = '你想要更改的值’,不能在此执行 this.setState()
  • render()
  • componentDidUpdate()
    • 新一轮更新后调用。在初始化时不会被调用
    • 此时可以获取dom节点
3、卸载
  • componentWillUnmount()
    • 将要卸载前调用
    • 一些事件监听和定时器需要在此时清除
4、错误处理
  • componentDidCatch()
    • 任意地方的JavaScript错误
    • 只能使用错误边界来恢复异常,而不要尝试将它们用于控制流。
posted @ 2018-07-31 17:37  够懒才女人  阅读(74)  评论(0编辑  收藏  举报