React-Native React.Fragment 去除无用的节点

 render() {
        return (
            
                黑猫警长
                哪吒传奇
                四驱兄弟
                西游记
                猫和老鼠
                蓝猫淘气三千问
            
        );
    }

look~ 最外层的没有什么用，只是为了包裹内部的组件，这样就照成了一次不必要的渲染~有什么办法可以解决呢？这时候就需要 Fragment 登场啦~

React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。

以上代码可以修改修改~

写法一

 render() {
        return (
            [
                黑猫警长,
                哪吒传奇,
                四驱兄弟,
                西游记,
                猫和老鼠,
                蓝猫淘气三千问,
            ]
        );
    }

react 16开始， render支持返回数组。不过这种的需要在子组件添加key值~
也可以这样写

render() {
        return (
            

                黑猫警长
                哪吒传奇
                四驱兄弟
                西游记
                猫和老鼠
                蓝猫淘气三千问

                [
                    虹猫蓝兔七侠传,
                    灌篮高手,
                    足球小将,
                ]

            

        );
    }

写法二

返回数组的形式看着别扭或者不习惯。可以使用 React.Fragment ~

render() {
        return (
            
                黑猫警长,
                哪吒传奇,
                四驱兄弟,
                西游记,
                猫和老鼠,
                蓝猫淘气三千问,
            
        );
    }

当然，可以这样写~

render() {
        return (
            

                
                    黑猫警长,
                    四驱兄弟,
                    西游记,
                    猫和老鼠,
                    蓝猫淘气三千问,
                

                
                    虹猫蓝兔七侠传
                    灌篮高手
                    足球小将
                
            
        );
    }

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