zoukankan      html  css  js  c++  java
  • 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的数据就作为组件的一个信息,存储在这些节点上。

     

     

     

  • 相关阅读:
    PowerDesigner数据模型(CDM—PDM)
    Eclipse解决JSP页面乱码问题
    mysql中Access denied for user 'root'@'localhost' (using password:YES)
    PS小技巧
    sublime使用心得
    Java的变量命名
    Java栈和堆的区别
    Mac 快捷键
    用shell脚本监控进程是否存在 不存在则启动的实例
    linux怎么运行.SH文件
  • 原文地址:https://www.cnblogs.com/yanchenyu/p/13601433.html
Copyright © 2011-2022 走看看