render() {
return (
<View>
<Text>黑猫警长</Text>
<Text>哪吒传奇</Text>
<Text>四驱兄弟</Text>
<Text>西游记</Text>
<Text>猫和老鼠</Text>
<Text>蓝猫淘气三千问</Text>
</View>
);
}
look~ 最外层的<View>没有什么用,只是为了包裹内部的组件,这样就照成了一次不必要的渲染~有什么办法可以解决呢?这时候就需要 Fragment 登场啦~
React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表,并且不在DOM中增加额外节点。
以上代码可以修改修改~
写法一
render() {
return (
[
<Text key={1}>黑猫警长</Text>,
<Text key={2}>哪吒传奇</Text>,
<Text key={3}>四驱兄弟</Text>,
<Text key={4}>西游记</Text>,
<Text key={5}>猫和老鼠</Text>,
<Text key={6}>蓝猫淘气三千问</Text>,
]
);
}
react 16开始, render支持返回数组。不过这种的需要在子组件添加key值~
也可以这样写
render() {
return (
<View>
<Text>黑猫警长</Text>
<Text>哪吒传奇</Text>
<Text>四驱兄弟</Text>
<Text>西游记</Text>
<Text>猫和老鼠</Text>
<Text>蓝猫淘气三千问</Text>
[
<Text key={1}>虹猫蓝兔七侠传</Text>,
<Text key={2}>灌篮高手</Text>,
<Text key={3}>足球小将</Text>,
]
</View>
);
}
写法二
返回数组的形式看着别扭或者不习惯。可以使用 React.Fragment ~
render() {
return (
<React.Fragment>
<Text>黑猫警长</Text>,
<Text>哪吒传奇</Text>,
<Text>四驱兄弟</Text>,
<Text>西游记</Text>,
<Text>猫和老鼠</Text>,
<Text>蓝猫淘气三千问</Text>,
</React.Fragment>
);
}
当然,可以这样写~
render() {
return (
<View>
<React.Fragment>
<Text>黑猫警长</Text>,
<Text>四驱兄弟</Text>,
<Text>西游记</Text>,
<Text>猫和老鼠</Text>,
<Text>蓝猫淘气三千问</Text>,
</React.Fragment>
<View>
<Text>虹猫蓝兔七侠传</Text>
<Text>灌篮高手</Text>
<Text>足球小将</Text>
</View>
</View>
);
}
具体代码具体分析设计啦~