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的数据就作为组件的一个信息,存储在这些节点上。

     

     

     

  • 相关阅读:
    Java 第十一届 蓝桥杯 省模拟赛 洁净数
    Java 第十一届 蓝桥杯 省模拟赛 第十层的二叉树
    Java 第十一届 蓝桥杯 省模拟赛 第十层的二叉树
    Java 第十一届 蓝桥杯 省模拟赛 第十层的二叉树
    Java 第十一届 蓝桥杯 省模拟赛 70044与113148的最大公约数
    Java 第十一届 蓝桥杯 省模拟赛 70044与113148的最大公约数
    20. Valid Parentheses
    290. Word Pattern
    205. Isomorphic Strings
    71. Simplify Path
  • 原文地址:https://www.cnblogs.com/yanchenyu/p/13601433.html
Copyright © 2011-2022 走看看