React——生命周期

每个组件都有几个生命周期函数,以 will 为前缀的函数是在发生某些事之前调用,以 did 为前缀的是在发生某些事之后调用。


Mounting

如下这些方法在组件实例被创建和被插入到dom中时被调用。

constructor():constructor在组件被mounted之前调用,我们的组件继承自React.Component,constructor函数中我们在其他操作前应该先调用 super(props),否则this.props将会是undefined。
constructor 是初始化state的好地方。如果我们不需要初始化state,也不需要bind任何方法,那么在我们的组件中不需要实现constructor函数。

componentWillMount():此方法在mounting之前被立即调用,它在render()之前调用,因此在此方法中setState不会触发重新渲染。此方法是服务器渲染中调用的唯一的生命周期钩子,通常我们建议使用constructor()。

render():render()方法是react组件必须的,它检查 this.props 和 this.state 并且返回一个React元素,我们也可以返回null或false,代表我们不想有任何的渲染。
render()方法应该是一个纯方法,即它不会修改组件的state,在每一次调用时返回同样的结果。它不直接和浏览器交互,如果我们想要交互,应该在componentDidMount()或者其他的生命周期函数里面。

componentDidMount():此方法在组件被 mounted 之后立即被调用,初始化DOM节点应该在此方法中,如果需要从远端健在数据,这里是实例化网络请求的好地方,此方法中 setState 会触发组件重新渲染。

Updating

props 和 state 的改变产生更新。在重新渲染组件时,如下的方法被调用

componentWillReceiveProps():一个已经mounted 的组件接收一个新的props之前 componentWillReceiveProps() 被调用,如果我们需要更新state来响应prop的更改,我们可以在此方法中比较 this.props 和 nextProps 并使用 this.setState 来更改state。
注意,即使props 没有改变,React也可以调用这个方法,因此如果你只想处理改变,请确保比较当前值和下一个值。当父组件导致你的组件重新渲染时,可能会发生这种情况:React在组件mounting 期间不会调用此方法,只有在一些组件的 props 可能被更新的时候才会调用。调用this.setState 通常不会触发componentWillReceiveProps。

shouldComponentUpdate():使用此方法让React 知道组件的输出是否不受当前state 或 props 更改的影响。默认行为是在每次state更改时重新渲染组件,在大多数情况下,我们应该默认改行为。
当接收到新的 props 或 state 时,shouldComponentUpdate() 在渲染之前被调用。默认返回true,对于初始渲染或使用 forceUpdate() 时,不调用此方法。返回false不会阻止子组件的state更改时,该子组件重新渲染。
如果 shouldComponentUpdate() 返回false,那么 componentWillUpdate(),render() 和 componentDidUpdate() 将不会被调用。

componentWillUpdate():当接收新的 props 或 state 时,componentWillUpdate() 在组件渲染之前被立即调用。使用此函数作为在更新发生之前执行准备的机会。初始渲染不会调用此方法。
注意:这里不能调用this.setState()
如果调用会怎么样?试了一下,会产生死循环,一直更新。。。。如果我们需要更新state 以响应 props 的更改,我们应该使用componentWillReceiveProps()

render():render()方法是react组件必须的,它检查this.props 和 this.state 并且返回一个React元素,我们也可以返回null或false,代表我们不想有任何的渲染。
render()方法应该是一个纯方法,即它不会修改组件的state,在每一次调用时返回同样的结果。它不直接和浏览器交互,如果我们想要交互,应该在componentDidMount() 或者其他的生命周期函数里面。

componentDidUpdate():此函数在更新后立即被调用。初始渲染不调用此方法。当组件已经更新时,使用此操作作为DOM操作的机会。这也是一个好的地方做网络请求,只要你比较当前的props 和以前的props (例如:如果props没有改变,可能不需要网络请求)。

Unmounting

当从dom中移除组件时,这个方法会被调用

componentWillUnmount():此函数在组件被卸载和销毁之前被立即调用。在此方法中执行一些必要的清理。例如清除计时器,取消网络请求或者清理在componentDidMount 中创建的任何DOM元素。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 组件的生命周期方法分以下三个阶段。 Mounting当创建组件的实例并将其插入到DOM中时,将调用这些方法:con...
    _八神光_阅读 4,793评论 0 0
  • 译自 React Component Lifecycle 每个组件都有若干生命周期函数。如函数名称所示,带有wil...
    KrisLeeSH阅读 3,602评论 0 0
  • 1,constructor()函数 *执行的时间:组件被加载前最先调用,并且仅调用一次 *作用:定义状态机变量 *...
    折梅踏雪阅读 2,953评论 0 0
  • 好比我们人除了短暂的生与死那一瞬之外,生命中剩下的时间都用在了每天活着的状态,对于React中的组件来讲,占其总生...
    YeLqgd阅读 13,571评论 0 7
  • 又是一个老生常谈的内容,从ES6起已经开始使用class的方式去创建组件,这种创建方式上的变化也带来了写法和方法上...
    殷灬商阅读 3,222评论 0 1