Question

我相对较新，可以对本机以及通常使用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;

Answer 1

您的组件看起来像可以实现为无状态/功能的组件，在其中您无权访问react本机生命周期方法，这使该组件更轻便/更快。

您的LinkedIcon组件作为功能/无状态组件可能看起来像这样：

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

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

class Main extends Component {

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

Answer 2

也许有人可以提供更好的答案，但据我所知，如果您需要处理本地状态，则希望使用class。它与类和非类组件的文件大小有关。在这种情况下，由于没有本地状态，我建议您使文件成为一个愚蠢的组件。您只是从父级传递道具而已。

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

希望这会有所帮助！

在React-Native中渲染

2 个答案: