在 React-Native 中渲染答案

【问题标题】：Rendering in React-Native在 React-Native 中渲染
【发布时间】：2019-10-28 07:22:12
【问题描述】：

我对原生反应和一般使用 UI 构建任何东西都比较陌生。我想知道在编写应用程序时何时使用 render{} 函数合适。我问这个是因为我想知道对应用程序的影响。例如，如果我创建了一个<LinkedIcon> 组件并尝试在一个屏幕上显示大量它们，那么每个点都应该调用render。如果不是，我会怎么做。

示例代码：

    import React, { Component } from "react";
    import { Linking, View, TouchableHighlight } from "react-native";
    import Icon from "react-native-vector-icons/FontAwesome";

    class LinkedIcon extends Component<Props> { //will show about up to 20 on one screen 
      render() {
        return (
           <TouchableHighlight>
           <Icon title="circle" size={15} />
         </TouchableHighlight>
        );
      }
    }

    export default LinkedIcon;

【问题讨论】：

标签： javascript react-native render jsx

【解决方案1】：

您的组件看起来可以实现为无状态/功能组件，您无法访问反应原生生命周期方法，这使得组件更轻量/更快。

作为功能/无状态组件的 LinkedIcon 组件可能如下所示：

const LinkedIcon = (props) => {
   return (
       <TouchableHighlight>
           <Icon title="circle" size={15} />
       </TouchableHighlight>
   );
}

现在您可以轻松地在可能是有状态组件的父组件中实例化多个 LinkedIcons，您可以在其中处理 LinkedIcons 状态（如果需要）。

class Main extends Component {

   render(){
      return (
         <View>
            <LinkedIcon .../>
            <LinkedIcon .../>
             ...
         </View>
      );
   }
}

【讨论】：

【解决方案2】：

也许有人可以提供更好的答案，但据我了解，如果您有需要操作的本地状态，您可能希望使用 class。它与类与非类组件的文件大小有关。在这种情况下，我建议您将文件设置为哑组件，因为没有本地状态。您只是从父级传递道具。

const LinkedIcon = props => (
    <TouchableHighlight>
        <Icon title="circle" size={15} />
    </TouchableHighlight>
)

希望这会有所帮助！

【讨论】：