如何在 React Native 运行时动态创建组件中使用状态答案

【问题标题】：How to use state in dynamically created components at runtime for React Native如何在 React Native 运行时动态创建组件中使用状态
【发布时间】：2020-06-05 11:15:21
【问题描述】：

我创建了一个在运行时创建和构建组件树的函数。根据来自 web 服务的一些参数，此树每次都不同。我能够成功渲染树，但是当状态改变时状态值没有得到更新。

例如：

export default class App extends React.Component {

  state={
    loading:true,
  }

  componentDidMount() {
    this.buildComponent();
  }

  buildComponent() {
    var comp = <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
      <Text>{this.state.name}</Text>
      <Button title="Change State" onPress={()=>this.setState({name:"Changed"})} />
    </View>
    this.comp = comp;
    this.setState({loading:false});
  }

  render() {
    if (this.state.loading) {
      return <Text style={{alignSelf:'center',marginTop:50}}>Loading ...</Text>
    }
    return (
     this.comp
    );
  }

}

在这个代码示例中，我知道这样做不是最佳实践，但我只是有一个用例，我需要以这种方式对其进行编码。

正如您在示例中看到的，当我单击按钮时，我希望将状态名称更改为“已更改”，但它不会更改。

听起来 React 不会将 state.name 映射到文本中，并在它更改后呈现它。

我不想将 buildComponent 放在 render 方法中，因为 buildComponent 会进行大量昂贵的计算，并且每次调用它都会对性能产生很大影响，因此我想要一种方法来一次构建组件并渲染它，但状态值根本不会更新。

提前感谢您的宝贵意见。

【问题讨论】：

为什么不在render 中定义comp？
我在帖子中提到，我不想在渲染中定义 comp，因为我有一个用例，它需要在渲染之外定义。
我认为您可能误解了 React 渲染的工作原理。读取更新值的唯一方法是在 render 中定义这些值。这并不意味着您需要再次执行昂贵的计算。由于虚拟 dom，react 中的渲染非常便宜。你能给我们看一个你的“昂贵的计算”的例子吗？你能记住它吗？
感谢您的意见。我真的知道反应渲染是如何工作的。它快速且超级便宜。但是，对于我的用例，我应该完全按照上面的示例进行渲染。再次感谢。

标签： reactjs dynamic runtime state render

【解决方案1】：

你正在使用componentDidMount，所以comp只在状态更新时渲染一次，不会调用componentDidMount，所以如果你想再次重新渲染comp，你可以使用def componentDidUpdate

 componentDidUpdate() {
    this.buildComponent();
  }

【讨论】：

我觉得和放在render()方法里面是一样的。我不把它放在那里的原因是我不希望它被第二次渲染。
您不想让它再次渲染？那么使用state 有什么意义呢。您也可以对值进行硬编码