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

     

     

     

  • 相关阅读:
    .net类库里ListView的一个BUG
    获取lable的caption, 摘抄还未测试可用否
    (转) lua实现split的简易方法
    2. SharePoint Online 开发,请联系qq512800530。加好备注。(不要发站内信。。。)
    1. android
    开发人员应关注的20个jQuery网站/博客
    Temp
    彩票项目开发节项
    求android ble 解决方案!
    自己开发的工作流引擎
  • 原文地址:https://www.cnblogs.com/yanchenyu/p/13601433.html
Copyright © 2020-2023  润新知