React 组件与享元模式
2016-12-03 本文已影响77人
smartphp
我们在react/react-native的代码中都有这样的代码
import { View,
StyleSheet,
ScrollView,
ListView,
StatusBar,
InteractionManager,
Navigator, }
from 'react-native'
通过这样的方式引入组件对象。 今天又一次读js设计模式的时候发现原来的理解是错误的,误解了组件的外部状态和内部状态,从而没有领会组件的微妙之处。今天把正确的概念写出来。
在曾探的《javascript 设计模式与开发实践》关于享元模式的内部状态和外部状态有这样的描述
-内部状态存储于对象内部
-内部状态可以被一些对象共享
-内部状态可以独立于场景,通常不会变
-外部状态取决于具体的场景,并根据场景而变化,外部状态不能被共享
怎么解释呢?意思是页面中出现的所有View组件实际是同一个共享对象,外部状态从对象上剥离开来,并存储在外部。
剥离了外部状态的就是共享组件。 外部状态必要时传入共享组件就可以组成一个完整的对象。这些外部状态包括 state,props,style等
组装外部状态需要时间,但是可以大大减少系统中的对象数量,享元模式是用时间换空间的做法。
通过import导入的就是公共组件对象。 公共组件内部可以为外部状态加上标签以示区别,这就是ref参数存在的含义。
这就是借助享元模式理解的react组件的构造和用法。
借助模式设计慢慢读代码,写代码。