React 组件与享元模式

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

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

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

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

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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,242评论 25 708
  • 1 场景问题# 1.1 加入权限控制## 考虑这样一个问题,给系统加入权限控制,这基本上是所有的应用系统都有的功能...
    七寸知架构阅读 2,514评论 1 57
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,860评论 1 18
  • 本笔记基于React官方文档,当前React版本号为15.4.0。 1. 安装 1.1 尝试 开始之前可以先去co...
    Awey阅读 7,798评论 14 128
  • 我总有一种隐隐约约的感觉,自身的某些缺陷随着一些紧急的事愈发凸显出来。喜欢拖延,喜欢把事情往后推,喜欢缓一缓再做事...
    遇见苏小州阅读 237评论 0 1