美文网首页react-nativeRN知识
React-Native React.Fragment 去除无

React-Native React.Fragment 去除无

作者: 精神病患者link常 | 来源:发表于2018-11-12 14:33 被阅读26次
     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>
            );
        }
    

    具体代码具体分析设计啦~

    相关文章

      网友评论

        本文标题:React-Native React.Fragment 去除无

        本文链接:https://www.haomeiwen.com/subject/lyfcfqtx.html