React生命周期

日期：2020-07-22 栏目：前端经验浏览：次

挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

卸载

当组件从 DOM 中移除时会调用如下方法：

componentWillUnmount()

错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

static getDerivedStateFromError()
componentDidCatch()

说明

render

如需与浏览器进行交互，请在 componentDidMount() 或其他生命周期方法中执行你的操作。保持 render() 为纯函数，可以使组件更容易思考。

constructor

在 constructor() 函数中不要调用 setState() 方法。如果你的组件需要使用内部 state，请直接在构造函数中为 this.state 赋值初始 state

constructor(props) {
  super(props);
  // 不要在这里调用 this.setState()
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

要避免在构造函数中引入任何副作用或订阅。如遇到此场景，请将对应的操作放置在 componentDidMount 中。

避免将 props 的值复制给 state！这是一个常见的错误：

constructor(props) {
 super(props);
 // 不要这样做
 this.state = { color: props.color };
}

如此做毫无必要（你可以直接使用 this.props.color），同时还产生了 bug（更新 prop 中的 color 时，并不会影响 state）。应为constructor只执行一次。

componentDidMount

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。

你可以在 componentDidMount() 里直接调用 setState()。它将触发额外渲染，但此渲染会发生在浏览器更新屏幕之前。如此保证了即使在 render() 两次调用的情况下，用户也不会看到中间状态。请谨慎使用该模式，因为它会导致性能问题。通常，你应该在 constructor() 中初始化 state。如果你的渲染依赖于 DOM 节点的大小或位置，比如实现 modals 和 tooltips 等情况下，你可以使用此方式处理

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。

当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。（例如，当 props 未发生变化时，则不会执行网络请求）。

componentDidUpdate(prevProps) {
  // 典型用法（不要忘记比较 props）：
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

你也可以在 componentDidUpdate() 中直接调用 setState()，但请注意它必须被包裹在一个条件语句里，正如上述的例子那样进行处理，否则会导致死循环。它还会导致额外的重新渲染，虽然用户不可见，但会影响组件性能。不要将 props “镜像”给 state，请考虑直接使用 props。

componentWillUnmount

componentWillUnmount() 中不应调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。

shouldComponentUpdate(nextProps, nextState)

根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。

此方法仅作为性能优化的方式而存在。不要企图依靠此方法来“阻止”渲染，因为这可能会产生 bug。你应该考虑使用内置的 PureComponent 组件，而不是手动编写 shouldComponentUpdate()。PureComponent 会对 props 和 state 进行浅层比较，并减少了跳过必要更新的可能性。

我们不建议在 shouldComponentUpdate() 中进行深层比较或使用 JSON.stringify()。这样非常影响效率，且会损害性能。

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

请注意，不管原因是什么，都会在每次渲染前触发此方法。

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。

static getDerivedStateFromError()

此生命周期会在后代组件抛出错误后被调用。它将抛出的错误作为参数，并返回一个值以更新 state

componentDidCatch()

componentDidCatch() 会在“提交”阶段被调用，因此允许执行副作用。它应该用于记录错误之类的情况：

总结

constructor （不能调用setState）

getDerivedStartFromProps（不能调用setState）

render（不能调用setState）

componentDidMount（能调用setState）

更新

getDerivedStartFromProps（不能调用setState）

componentShouldUpdate（不能调用setState）

getSnapshotBeforeUpdate（不能调用setState）

render（不能调用setState）

componentDidUpdate （能调用setState）

卸载

componentWillUnmount（不能调用setState）

了解更多内容

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: 0, hasError: false }
  }
  static getDerivedStateFromProps(props, state) {
    // 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
    console.log(props, state, 'static getDerivedStateFromProps')
    return null
  }
  componentDidMount() {
    // 在组件挂载后（插入 DOM 树中）立即调用。
    console.log('componentDidMount')
  }
  componentWillUnmount () {
    // 在组件卸载及销毁之前直接调用。
    console.log('componentWillUnmount')
  }
  static getDerivedStateFromError(error) {
    // 此生命周期会在后代组件抛出错误后被调用。
    return { hasError: true }
  }
  componentDidCatch(error, info) {
    // 此生命周期在后代组件抛出错误后被调用。
    console.log(error, info)
    // error —— 抛出的错误。
    // info —— 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。
  }
  shouldComponentUpdate(nextProps, nextState) {
    // 会在渲染执行之前被调用
    console.log(nextProps, nextState, 'shouldComponentUpdate')
    return true
  }
  getSnapshotBeforeUpdate (prevProps, prevState) {
    // 在最近一次渲染输出（提交到 DOM 节点）之前调用
    console.log(prevProps, prevState, 'getSnapshotBeforeUpdate')
    return null
  }
  componentDidUpdate (prevProps, prevState, snapshot) {
    // 会在更新后会被立即调用。首次渲染不会执行此方法。
    console.log(prevProps, prevState, snapshot, 'componentDidUpdate')
  }
  handleClick = () => {
    this.setState({ count: this.state.count + 1 })
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>+</button>
        {this.state.count}
      </div>
    );
  }
}

————————————————

原文链接：https://blog.csdn.net/wu_xianqiang/article/details/105469509

转载注明出处：http://www.duanlonglong.com/qdjy/815.html

React生命周期

相关推荐