自己写一个 react 3.状态更新

  • Z时代
  • 2024-01-10
  • 分类：综合

这一步跨度比较大，主要有两个方面，react组件的状态更新 与 基础设施升级

react 组件的状态更新

这个话题十分庞大，涉及到 setState内部机制 与 domdiff算法问题，react 的几个精髓之二就在这里了，不过我并没有一步吃下这两个大内容。我们回顾一下我们是怎么更新 react 组件的？一般说来途径是这样子的

用户触发行为->调用到组件的setState->组件进行更新

用户触发行为

本质上就是事件绑定，因为没有事件，不能响应用户的行为，而事件绑定又涉及到react里面的一个大点合成事件了，fb还用这个去申请了专利，不过也有人觉得这里面的代码很冗余。我这里简单起见，直接针对onClick属性的dom进行事件绑定

    if(props.onClick){
        //react中是使用合成事件的，鉴于时间问题先省略
        domElement.addEventListener('click',props.onClick);
      }

调用到组件的setState

这里面就是按照事件绑定->调用api->合并state->生成新虚拟dom->下一步的步骤进行

组件更新

简单起见，我是直接比较组件有没有差异，一但有，就整个dom更新掉。

把以上思路串起来，就做完了这个阶段的代码，实测也是可以运行的。

https://github.com/p2227/diyReact/blob/dbaebfc6fd58432cae3ea427ffd9851783a5eaa4/src/stage2-update.js

基础设施升级

在实现本次升级的过程中，我经常修改实例代码，要设计一个不太复杂但是又能体现以上功能点的交互实例，还是有很多细节需要打磨的。由于受不了一次次复制粘贴babel，也不想配置构建环境。于是把关注点放在了online版本的babel上 http://babeljs.io/setup#installation ，但是文档里面的用法我不太喜欢，他是每个实例都要写一个页面的。我观察了一下 standalone 的代码，进行了一些试验，发现它加了个全局对象Babel，上面有一些熟悉的方法如 transform ，就自己写了个交互，把代码扔给Babel，再执行。鉴于效率的考虑把transform部分放到一个worker里面，这样就把demo页面做成可以直观切换不同版本的效果。

https://gh.p2227.com/diyReact/index.html

以上是 自己写一个 react 3.状态更新 的全部内容， 来源链接： utcz.com/z/264608.html

回到顶部