React框架原理

---

前言

文章会围绕React前端组件化开发框架原理进行讨论。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、React设计思想

1.原生JS

React相比于vue来说更接近原生JS，因为在react内部，jsx模板经babel转化后是一个对象，所有的操作都是基于这个对象和其对应的fiber结构来操作的，而vue.js通过编译将templete模板转换成渲染函数(render),执行渲染函数就可以得到一个虚拟节点树。

2.实现和更新原理

React将每个节点转化为fiber对象,最终形成一个fiber树结构，来依次渲染。通过两个fiber的对比来实现更新。这里要说到几个diff算法，分别是tree diff,component diff和element diff。同时更新过程可能会被打断，让优先级更高的任务优先执行(例如浏览器渲染)

• TREE DIFF
  核心是层次遍历和层级监控。如果同层有节点不同则会删除它的子树进行重新渲染，所以设置state要使粒度合适的小一些。能带来性能上的提升。
• COMPONENT DIFF
  如果某两个节点不是一个类型则进行TREE DIFF,否则进行ELEMENT DIFF。
• ELEMENT DIFF
  先根据每个节点的ID进行移位检查比较是不是同一个ID，并得到它如何进行增删查改。

3.单项数据绑定

父传子用props，有子传父的方法，不支持双向绑定，需要手动配置。

4.模板的格式和转换

用jsx指定模板，jsx类似JavaScript的扩展，在函数组件返回jsx,或者class组件的render方法内返回jsx，jsx将转换成对象。

5.关注运行时

React 更像是一种编程运行时。

React 程序通常会输出一个会随时间变化的树。 它有可能是 DOM 树 、iOS 视图层、PDF 原语 ，或者是 JSON 对象 。不过通常我们希望用它