React 组件与享元模式

作者: smartphp | 来源:发表于2016-12-03 01:02 被阅读77次

    我们在react/react-native的代码中都有这样的代码

    import { View,  
                   StyleSheet, 
                   ScrollView, 
                   ListView,  
                   StatusBar,
                  InteractionManager,
                  Navigator, }
                  from 'react-native'
     
                   
    

    通过这样的方式引入组件对象。 今天又一次读js设计模式的时候发现原来的理解是错误的,误解了组件的外部状态和内部状态,从而没有领会组件的微妙之处。今天把正确的概念写出来。

    在曾探的《javascript 设计模式与开发实践》关于享元模式的内部状态和外部状态有这样的描述

    -内部状态存储于对象内部
    -内部状态可以被一些对象共享
    -内部状态可以独立于场景,通常不会变
    -外部状态取决于具体的场景,并根据场景而变化,外部状态不能被共享

    怎么解释呢?意思是页面中出现的所有View组件实际是同一个共享对象,外部状态从对象上剥离开来,并存储在外部。
    剥离了外部状态的就是共享组件。 外部状态必要时传入共享组件就可以组成一个完整的对象。这些外部状态包括 state,props,style等
    组装外部状态需要时间,但是可以大大减少系统中的对象数量,享元模式是用时间换空间的做法。
    通过import导入的就是公共组件对象。 公共组件内部可以为外部状态加上标签以示区别,这就是ref参数存在的含义。

    这就是借助享元模式理解的react组件的构造和用法。

    借助模式设计慢慢读代码,写代码。

    相关文章

      网友评论

        本文标题:React 组件与享元模式

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