如何在不重新渲染 React Native 中的父级的情况下动态有效地添加子级答案

【问题标题】：How to add a child dynamically and efficiently whithout rerendering parents in React Native如何在不重新渲染 React Native 中的父级的情况下动态有效地添加子级
【发布时间】：2018-05-13 20:22:30
【问题描述】：

我知道我们可以像这样动态添加一个孩子：

...
{show && <View/>}
...

但是性能太差了。我的意思是也许我会在一秒钟内添加一个孩子 30 次或更多（取决于业务逻辑）。

例如：我想在每次 ScrollView 滚动 30 像素时添加一个子项。我正在编写一个比 FlatList 好得多的高性能 List 组件。我需要知道如何在不重新渲染父母的情况下动态有效地添加孩子。有没有像“React.createElement”这样的方法可以在不重新渲染父母的情况下添加孩子

【问题讨论】：

标签： reactjs react-native rerender

【解决方案1】：

ScrollView 的性能不是很好，因为它一次渲染了所有的孩子。如果您希望在用户向下滚动时呈现子级，我建议使用 FlatList，性能和用户体验要好得多。

这是一个链接https://facebook.github.io/react-native/docs/flatlist.html

首先你会想要创建一个函数来返回你想看到的视图。渲染 FlatList 组件并将两个 props 传递给它，data 和 renderItem。 renderItem 将是返回您希望看到的视图的函数，而 data 将是您正在映射的集合。

`//this is the component you want to render for each child
function MyComponent({ name, text, image }){
  return (
    <View>
        however you want the child to look like 
    </View>
  )
}
// this is the function that you pass to FlatList, and your props to.
renderItem = ({ item }) => {
  return (
    <MyComponent {...item}/>
  )
}
// rendering the FlatList component
render(){
  const data = getData() // an object

  return (
    <View>
      <FlatList
        data={data}
        renderItem={this.renderItem}
      />
    </View>
  )
}`

【讨论】：

看来你没明白我的意思。我正在编写一个比 FlatList 好得多的高性能 List 组件。我需要知道如何在不重新渲染父母的情况下动态有效地添加孩子。有没有像“React.createElement”这样的方法可以在不重新渲染父母的情况下添加孩子
如果该方法不存在，我只是在初始化时创建更多的Views。只是提高性能。
哦，好的，我现在明白了。感谢您的澄清。我明白你的意思，我个人没有遇到过这种方法，虽然它会很棒