reactjs - 如何在 React Native 中动态有效地添加孩子而不重新渲染父母

Question

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

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

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

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

Answer 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>
  )
}`