正确使用componentWillUnmount生命周期函数

小蓝 • 2024-12-12 12:14 • 编程

一、什么是componentWillUnmount生命周期函数？

componentWillUnmount生命周期函数是React中的一个生命周期函数，它在组件即将被卸载和销毁之前被调用。在这个函数中，你可以执行一些必要的清理工作，例如取消订阅、清除计时器等。这可以帮助你防止内存泄露和不必要的资源消耗。

二、componentWillUnmount函数的使用场景

一般来说，当你的组件创建了一些对外界的依赖，例如订阅事件、创建计时器等，那么就需要在组件卸载前，将这些依赖清理掉。

以计时器为例，通过使用componentDidMount创建了计时器，那么在组件卸载前，需要使用componentWillUnmount来清除计时器。

componentDidMount(){
  this.timer = setInterval(() => {
    this.props.fetchData();
  }, 10000);
}

componentWillUnmount(){
  clearInterval(this.timer);
}

在上面的代码中，我们在componentDidMount中创建了计时器，并且使用了this.timer来保存计时器的引用。在componentWillUnmount中，我们清除了这个计时器。这样可以保证，在该组件被卸载销毁后，不会再执行超时请求，保证了程序的健壮性。

三、常见错误

使用setState()

在componentWillUnmount中，不能使用setState()方法。这是因为，在组件被卸载之前，React已经将组件状态设置为不可用，并且不能再调用setState()方法去更新状态。

componentWillUnmount(){
  this.setState({ isMounted: false }); //错误示例
}

会影响子组件的生命周期函数

如果在父组件的componentWillUnmount函数中，调用了某个子组件的setState()方法，这将会触发子组件的重新渲染。子组件被重新渲染后，React会重新调用子组件的生命周期函数。如果在子组件的生命周期函数中读取了父组件的状态值，那么就会出现一些不可预知的错误。

class Parent extends React.Component {

  componentWillUnmount(){

    this.setState({ isMounted: false }); // 错误示例

    this.refs.child.setState({ isMounted: false }); // 错误示例

  }

  render() {

    return ();

  }

}
class Child extends React.Component {
  render() {
    let isMounted = this.props.isMounted || false;
    return ({isMounted.toString()} 
                                                        原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/239040.html