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

每个项目产品都要加埋点，加500行埋点是不是会占用你一两天的时间而且很容易犯错,想只用一小时准确加完这500行埋点剩下一天喝茶聊天么？来试试这520web工具, 高效加埋点，目前我们公司100号前端都在用，因为很好用，所以很自然普及开来了，推荐给大家吧

http://www.520webtool.com/

自己开发所以免费，埋点越多越能节约时间，点两下埋点就加上了，还不会犯错，里面有使用视频，反正免费 😄

 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>
        );
    }

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

作者：精神病患者link常
链接：https://www.jianshu.com/p/f6728e6928ff
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。