在 react native 中使用 this.props.children 加载大组件时是否存在任何性能问题？答案

【问题标题】：Is there any performance issue on loading big component using this.props.children in react native?在 react native 中使用 this.props.children 加载大组件时是否存在任何性能问题？
【发布时间】：2019-06-15 11:48:05
【问题描述】：

我是本机反应的新手，我想知道，当我们使用 props.children 加载大型组件时是否存在任何性能问题？

例如我有以下组件：

SafeScrollView.js

import React from 'react';
import { View, KeyboardAvoidingView, Platform } from 'react-native';

const SafeScrollView = (props) => {
    if (Platform.OS === "android") {
        return (
          <View style={{flex:1, justifyContent:'center'}}>
            {props.children}          
          </View>
        );
    }
    return (
        <KeyboardAvoidingView style={{flex:1, justifyContent:'center'}} behavior="padding">
          {props.children}  
        </KeyboardAvoidingView>
    )
}

export default SafeScrollView

现在，我想在我的注册屏幕中使用此组件，其中包含其他许多组件，如图像、文本输入、按钮等。意味着整个注册屏幕将加载到此SafeScrollView 组件中。那么它会在即将到来的时间产生任何性能问题吗？

【问题讨论】：

基本组件不应导致任何性能问题。无论如何，只要将图像或动画组件传递给 SafeScrollView.js，就可能会出现性能问题。然后，您将不得不将渲染处理为不会以某种方式一次渲染所有组件。

标签： javascript reactjs react-native reactive-programming react-component

【解决方案1】：

这取决于您在子组件中使用的逻辑有多复杂。但是对于动画和图形使用较少的基本屏幕不会影响性能。

【讨论】：