React(v16.8.4)生命周期详解(2)

当前组件setState()会调用；
父组件props改变会调用；
父组件通过forceUpdate重新执行render，不会调用当前组件的shouldComponentUpdate；
这个方法主要是为了性能优化而设计的，考虑使用内置的PureComponent,而不是自己在这个函数里写比较，更不建议在这个组件里使用JSON.stringify去深度检查，效率非常低。
这里返回一个布尔值，如果返回false，那这个生命周期后面的都不会执行了

componentWillUpdate(nextProps, nextState):

当前组件setState()会调用；
父组件props改变会调用；
父组件通过forceUpdate重新执行render，也会调用当前组件的shouldComponentUpdate；
不应该在这里使用setState.这个方法也应该尽量避免使用，将要被遗弃。几乎用不上。应该都统一到componentDidUpdate中去处理

getSnapshotBeforeUpdate(prevProps, prevState)：

setState(),props发生改变，父组件重新render都会调用。发生在更新状态的render之后，这时候已经可以读取dom了。通常用于处理滚动位置的聊天线程等UI中。
和getDerivedStateFromProps一样它返回一个对象来更新状态，如果返回的是null就表示不更新任何内容

componentDidUpdate(prevProps, prevState):

setState(),props发生改变，父组件重新render都会调用。这个方法相对用得也比较多。同componentDidMount处理事件函数类似，如果组件被更新的时候，原有的内容被重新绘制后可能也需要再次处理事件函数

componentWillUnmount():

当react组件要从dom树上删除掉的时候，这个方法就会被调用。
如果在componentDidMount中使用非React的方法创造了一些DOM元素，如果撒手不管可能会造成内存泄漏，那就需要在componentWillUnmount中把这些创造的DOM元素清理掉

import React, { Component } from "react"; export default class LifeCycle extends Component { state = { } static getDerivedStateFromProps(props, state) { } componentDidMount = () => { } shouldComponentUpdate = (nextProps, nextState) => { } getSnapshotBeforeUpdate = (prevProps, prevState) => { } componentDidUpdate = (prevProps, prevState) => { } componentWillUnmount = () => { } render() { return ( <div> </div> ) } }

Linux公社的RSS地址：https://www.linuxidc.com/rssFeed.aspx