正确使用componentWillUnmount生命周期函数

一、什么是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()}
  
);
  }
}

在Parent组件的componentWillUnmount函数中，我们使用this.refs.child来获取Child组件的引用，并且调用了Child组件的setState()方法。这将会触发Child组件的重新渲染，Child组件被重新渲染后，会调用它的render函数。在这个函数中，我们读取了this.props.isMounted值，这个值是从父组件传递过来的。现在，在Child组件的render函数中，this.props.isMounted的值是undefined，我们无法预期的错误就出现了。

四、总结

componentWillUnmount生命周期函数帮助我们在组件卸载销毁之前执行一些必要的清理工作，保证程序的健壮性和资源利用率。我们需要注意，不能在这个函数中使用setState()方法，同时要注意在父组件中不要去直接更新子组件的状态值，以免产生不可预期的错误。