react生命周期方法有哪些?

天涯浪子 提交于 2020-02-27 19:18:15

react生命周期方法有哪些?

React 16.3+

getDerivedStateFromProps:在调用render()之前调用,并在每次渲染时调用。需要使用派生状态的情况是很罕见的

componentDidMount:首次渲染后调用,所有的ajax请求、DOM或状态更新、设置事件监听器都应该在此处发生。

ShouldComponentUpdate:确定组件是否应该更新。默认情况下,它返回true。如果你确定在更新状态或属性后不需要渲染组件,则可以返回false值。它是一个提高性能的好地方,因为它允许你在组件接收新属性时阻止重新渲染。

getSnapshotBeforeUpdate:在最新的渲染输出提交给DOM前将会立即调用,这对于从DOM捕获信息(如:滚动位置)很有用。

componentDidUpdate:它主要用于更新DOM以响应propstate更改。如果shouldComponentUpdate()返回falsse,则不会触发。

componentWillUnmount:当一个组件被从DOM中移除时,该方法被调用,取消网络请求或者移除与该组件相关的事件监听程序等应该在这里进行。

React 16.3

componentWillMount:在组件render()前执行,用于根组件中的应用程序级别配置。应该避免在该方法中引入任何的副作用或订阅。该方法在整个组件生命周明只会被调用一次,所以可以利用该方法做些组件内部的初始化工作,这个是在render方法调用前可修改state的最后一次机会。

componentDidMount:首次渲染后调用,所有的ajax请求、DOM或状态更新、设置事件监听器都应该在此处发生。如果嵌套了子组件,子组件会比父组件优先渲染。

componentWillReceiveProps:在组件接收到新属性前调用,若需要更新状态响应属性改变,需要对比this.propsnextProps并在该方法中使用this.setState()处理状态。

shouldComponentUpdate:确定组件是否应该更新。默认情况下,它返回true。如果你确定在更新状态或属性后不需要渲染组件,则可以返回false值。它是一个提高性能的好地方,因为它允许你在组件接收新属性时阻止重新渲染。

componentWillUpdate:当shouldComponentUpdate返回true后重新渲染组件之前执行,注意这里不能调用this.setState()

componentDidUpdate:它主要用于更新DOM以响应propstate更改。如果shouldComponentUpdate()返回falsse,则不会触发。

componentWillUnmount:当一个组件被从DOM中移除时,该方法被调用,取消网络请求或者移除与该组件相关的事件监听程序等应该在这里进行。

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