React设计模式相关

关于我在React设计模式上做的一些思考:

  

一,项目里实战的经历

 

       最开始我根据组件不同的职能定义,拆分了展示组件和容器组件两大类,后来随着业务逻辑越来越复杂,容器组件代码越来越冗长,我又加入了HOC高阶组件的设计模式,将部分共享的通用功能逻辑抽出,来加强容器组件的可维护性和可扩展性;但是后来发现在多个HOC的一起使用时会经常出现props冲突的问题,而且数据来源比较混乱,于是我们又将这部分组件改用了render props,只取小部分定制化的state,来减小复杂度。

     但其实无论是HOC还是render props,都是通过组件去解决组件的问题,将公共逻辑抽取到上层组件,然后利用props下传。不过也能理解,因为毕竟如果有生命周期逻辑复用这种的话,只能用组件。

     不过后来有了hooks就不一样了,我们解决了HOC和render props的痛点,可以不再借助组件去抽离逻辑代码,真正的函数式思维,副作用更少,将状态管理和逻辑完全抽离React component,更好地实现复用,包括生命周期的逻辑复用。

 

 

二,总结:

 

HOC和render props都是为了共享代码逻辑以及部分生命周期而提出的设计模式,但是也各有利弊:

 

1,HOC的优点就是可扩展性更强,因为支持多参数传入,而缺点就是props要求必须统一,适合做一些复杂的功能型插件;

2,render props的优点就是只取需要的state,props自由命名,但是缺点就是可扩展性不强,而且很容易形成嵌套地域,因此适合做一些简单的UI层的组件;

3,Hooks可以用来优化render的前置处理,将相关的逻辑放在一起,而非散落在各个生命周期实例方法中

 

 

三,React Hooks原理

 

React Hooks的设计初衷就是为了解决复用逻辑状态等问题。

 

以useState为例:

 

1,通过闭包来实现状态的持久化;

2,状态的修改本质上还是借助setState;

3,利用一个 memoizedState 数组和 cursor 下标来解决多个状态存储问题:

    (1) 初次渲染的时候,按照useState和useEffect的顺序,将state和deps等按顺序依次塞到 memoizedState 数组中去;

    (2) 更新的时候,按照顺序从 memoizedState 中把上次记录的值取出;

 

memoizedState 和 cursor 是存在哪里的,它是怎么和每个函数组件一一对应的?

 

react会生成一棵组件树,树中每个节点都对应了一个组件,hooks的数据就作为组件的一个信息,存储在这些节点上。

 

 

 

原文地址:https://www.cnblogs.com/yanchenyu/p/13601433.html