React Native中如何隐式重建子组件以触发componentWillMount？

嘿，这个问题其实踩中了React组件生命周期的核心规则，咱们一步步来理清楚～

首先得明确：componentWillMount这个生命周期方法只会在组件首次挂载到视图树的时候执行一次。之后父组件重新渲染，只要子组件还在视图树里，React只会触发它的更新类生命周期（比如componentWillReceiveProps、shouldComponentUpdate），不会重新初始化组件实例，自然也就不会再次调用componentWillMount。

那要实现“隐式重新渲染并让子组件重新初始化”，本质上就是要让React先卸载旧的子组件，再重新挂载新的实例，这样就能再次触发componentWillMount了。在React Native里，有两种常用的实现方式：

1. 给子组件添加动态key属性（最推荐） #

这是React官方推荐的让组件重新挂载的方式。当子组件的key值发生变化时，React会认为这是一个全新的组件，会自动卸载旧组件、创建新的组件实例，从而触发完整的挂载生命周期（包括componentWillMount）。

举个实际的例子：

class ParentComponent extends React.Component {
  // 维护一个用于触发重置的key状态
  state = {
    childResetKey: 0
  };

  // 调用这个方法即可触发子组件重新初始化
  resetChildComponents = () => {
    this.setState(prevState => ({
      childResetKey: prevState.childResetKey + 1
    }));
  };

  render() {
    return (
      <View>
        {/* 给每个子组件绑定动态key */}
        <Child1 key={this.state.childResetKey} />
        <Child2 key={this.state.childResetKey} />
        {/* 可以加个按钮测试效果 */}
        <Button 
          title="重置子组件" 
          onPress={this.resetChildComponents} 
        />
      </View>
    );
  }
}

每次点击按钮，childResetKey递增，React就会重新挂载Child1和Child2，它们的componentWillMount就会再次执行。

2. 通过条件渲染控制挂载/卸载 #

你也可以通过一个布尔状态来控制子组件的显示与隐藏：先把状态设为false让子组件卸载，再设为true重新挂载。不过要注意，React的setState是异步的，所以需要在第一个setState的回调里执行第二个更新：

class ParentComponent extends React.Component {
  state = {
    showChildren: true
  };

  resetChildComponents = () => {
    // 先卸载子组件
    this.setState({ showChildren: false }, () => {
      // 回调里再重新挂载
      this.setState({ showChildren: true });
    });
  };

  render() {
    return (
      <View>
        {this.state.showChildren && (
          <>
            <Child1 />
            <Child2 />
          </>
        )}
        <Button 
          title="重置子组件" 
          onPress={this.resetChildComponents} 
        />
      </View>
    );
  }
}

这种方式也能达到效果，但相比key属性，代码会更繁琐，而且如果有多个子组件需要统一控制，key的方式会更简洁。

额外提醒 #

• componentWillMount已经被React标记为过时（deprecated）了，从React 16.3开始，官方更推荐用constructor做组件初始化工作，或者用componentDidMount处理副作用（比如网络请求）。如果你的项目版本较新，建议迁移到更安全的生命周期方法。
• 强制重新挂载子组件会带来一定的性能开销（销毁旧实例、创建新实例），所以如果只是需要更新子组件的状态或数据，优先考虑通过props传递状态，让子组件在更新生命周期里处理，只有当确实需要完全重置组件内部状态时，再使用上面的方法。

内容的提问来源于stack exchange，提问作者uksz