[英]Rendering in React-Native
我相对较新,可以对本机做出反应,并且通常使用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;
您的组件看起来可以实现为无状态/功能组件,而您无权使用react native生命周期方法,这使组件更轻巧/更快。
您的LinkedIcon组件作为功能/无状态组件可能看起来像这样:
const LinkedIcon = (props) => {
return (
<TouchableHighlight>
<Icon title="circle" size={15} />
</TouchableHighlight>
);
}
现在,您可以轻松地在父组件(可能是有状态的组件)中实例化多个LinkedIcons,可以在其中处理LinkedIcons状态(如果需要)。
class Main extends Component {
render(){
return (
<View>
<LinkedIcon .../>
<LinkedIcon .../>
...
</View>
);
}
}
也许有人可以提供更好的答案,但据我所知,如果您需要处理本地状态,则希望使用一个class
。 它与类和非类组件的文件大小有关。 在这种情况下,我建议您将文件设置为愚蠢的组件,因为没有本地状态。.您只是从父级传递道具。
const LinkedIcon = props => (
<TouchableHighlight>
<Icon title="circle" size={15} />
</TouchableHighlight>
)
希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.