ReactNative组件状态设计思考

设计React组件与设计一个原生js组件最大的区别就是状态的设计。

术语定义

1、属性
  • 泛指用户在初始化组件时候可以传给组件的
  • 有些框架也叫options
  • 是public的
  • 在RN体系中,叫props,其中还包含了事件
2、事件
  • 是public的
  • 是function类型的
  • 在RN体系中使用props来引用
3、接口
  • 是public的
  • 是function类型的
  • 通过组件实例化之后的对象,可以进行调用
4、内部属性
  • 是private的
  • 传统设计方案中一般用于存储组件的状态,数据等
  • RN体系中没有对其进行明确,可以自由设计
5、状态
  • RN体系中明确提出的概念
  • 传统设计方案中一般使用内部属性来表示

传统设计思路

按照原来设计组件的方法论,一个UI组件对外应该具有属性、事件、接口,对内具有内部属性,内部接口。

  • 属性就像一份配置文件,描述了组件应该具有的功能、外观或者初始状态。
  • 事件是组件在工作工程中,当满足某种条件的时候触发的回调函数
  • 接口是组件对象的方法,可以让组件去执行某个任务

在原来的设计理念中,并没有提出组件状态的概念,但是其也是一直存在的,通常是使用组件私有属性来存储。

比如,你设计一个按钮,那么他可能有正常状态,禁用状态,那么我们会设计一个属性disable={true|false}来通知组件初始化的具有的状态,设计2个接口disable、enable来赋予js有动态改变其状态的能力,设计2个事件onEnable、onDisable来通知回调函数组件状态发生了变化。伪代码如下:

//组件定义
class button{

    constructor(disable,pid){//构造函数
    
        this.disable=disable,//属性:组件初始化使用这个作为状态
        this.pid=pid;//属性:父容器的id
        
        this._disable=null,//状态:私有属性

        if(this.disable==true){//根据属性来决定初始化状态
            this.disable();
        }else{
            this.enable();
        }
        this.render();//渲染组件
    }
        
    
    enable(){
        this._disable=false;
        if(this.el)this.el.set('disable',false);
        this.fireEvent('onEnable');//触发事件
    }
    
    disable(){
        this._disable=true;
        if(this.el)this.el.set('disable',true);
        this.fireEvent('onDisable');//触发事件
    }
    
    
    render(){
        //渲染组件,状态直接影响了组件的表现和功能
        $(this.pid).innerHTML='

RN设计思路

上面的示例中,表示了一个传统UI组件的设计思路,_disable就是这个button组件的关键状态,它直接影响了组件的表现和行为。

而react架构直接把组件状态提升到了一个新的高度,主要有以下几点:

  • 使用固定的接口来声明组件状态和状态默认值
  • 使用固定的接口来获得和改变组件状态的值
  • 状态的改变一定会改变组件的表现,会导致组件的重新渲染

前两项都不是问题,因为我们原来也得有这些东西,只不过写法发生了变化,关键是最后一项。这里说的不是问题,指的是思路上比较容易接受。这种固定写法,问题也很明显,因为要想把一个状态从RN状态体系拿进拿出,会产生一定的工作成本,很是不爽。

组件状态的变化一定要导致view的变化吗?

答案肯定是no,因为有些状态仅仅影响组件的行为,并不影响表现。比如说,我赋予按钮一个新功能,它可以提交某个表单的数据,也就是需要一个新的状态formName,他就不影响表现,只影响行为。

考虑到性能的极致,我们就只能把这种状态放到RN的状态体系之外,作为对象的私有属性存在。

RN号称diff算法性能很高,但也不是0损耗,如果对RN的渲染理解很透彻,你当然也可以不这样设计,但是我这里还是倾向于保守一些,否则后期的调整也是有工作量的,因为定义、初始化、取值、改值这些操作代码都不一样。写到这里我突然想到,如果可以,我们可以通过某种方法方便的修改某个状态是否影响表现,不用改其它代码的话,那么我们设计状态的时候就不用区分了,就能让我们更关注设计本身。

结论

说道这里,基本可以理清思路了。

组件按照传统方式设计,该怎么设计就怎么设计,在设计原来组件内部属性的时候,多考虑一步,哪些内部属性的改变是影响表现的,哪些内部属性是不影响表现的。将影响表现的放入到RN状态体系中,将不影响表现的,放入内部属性中。即可。

tips

1、耦合性很强的父子组件,建议将状态统一放到父组件中,子组件中不要放状态了,无论是状态的跨组件共享,还是对view渲染的触发都很方便。除非你很确定某个状态只子组件内部使用,通常这种情况后边可能也会发生变化。

2、以下问题可以帮助识别是否是state,摘自官网

  • 是否是从父级通过 props 传入的?如果是,可能不是 state 。
  • 是否会随着时间改变?如果不是,可能不是 state 。
  • 能根据组件中其它 state 数据或者 props 计算出来吗?如果是,就不是 state 。
  • 属性的改变会影响到view的变化就可能是state

3、参考

  • https://facebook.github.io/react/docs/thinking-in-react.html
  • http://wiki.jikexueyuan.com/project/react/thinking-in-react.html
  • https://segmentfault.com/a/1190000004180955

你可能感兴趣的:(ReactNative组件状态设计思考)