reactreact

React.Component 钩子函数整理

2018-11-06  本文已影响0人  陈小生_1017

1.constructor(props, context)

2.componentWillMount()

Tip1: 不建议在此请求数据,由于请求数据接口一般都是异步,这时候render已经被执行,建议在componentDidMount 数据

Tip2: 如果在服务端渲染,该钩子函数将被调用两次,一次服务端,一次浏览器端,而componentDidMount函数只会在浏览器端请求一次

Tip3: 在taro构建的小程序里对应的生命周期是 onLoad。

3..componentDidMount()

Tip: 建议在此请求数据

4. componentWillReceiveProps(nextProps)

Tip1: 某些情况下,props没变也会触发该钩子函数,需要在方法里手动判断一下this.props和nextProps是否相同,不相同了才执行我的更新方法。

Tip2:该函数一般用来更新依赖props的状态

5. shouldComponentUpdate(nextProps, nextState)

6.componentWillUpdate(nextProps, nextState)

7. getSnapshotBeforeUpdate(prevProps, prevState)

8. componentDidUpdate(prevProps, prevState)

9.componentWillUnmount()

10.componentDidCatch(error, info)

Tip:错误边界只捕捉树中发生在它们之下组件里的错误。一个错误边界并不能捕捉它自己内部的错误。

11.render()

Tip:记住,不要在render里面修改state。

12.React组件更新路径

在线测试:http://wximg.gtimg.com/shake_tv/test/lifeCycle2113.html

组件更新路径图

参考文章:https://blog.csdn.net/Gytha_1/article/details/80062454?utm_source=blogxgwz8

上一篇 下一篇

猜你喜欢

热点阅读