[react] 简要描述下你知道的react工作原理是什么？

[wwwind213]

[react] 简要描述下你知道的react工作原理是什么？

[lishichengyan]

dom diff: https://zhuanlan.zhihu.com/p/20346379

[paultyh]

1、MVVM设计模式 2、数据驱动虚拟DOM 3、通过props,state作为状态机管理组件内数据

[postbird]

我理解的核心部分：

• 通过虚拟DOM表达真实DOM
• 通过数据驱动更新虚拟DOM进而更新真实DOM（MVVM）
• 有一套完整并且合理的 DOM Diff 算法（现在 React 17 是基于 lane 架构来调度的 Fiber Diff 算法）来提高 diff 性能，进而提高应用性能。

同时 React 实现了数据驱动与渲染平台剥离，通过统一的调度与Diff 算法，可以引用到不同的渲染环境，如 Native 、浏览器、Canvas 等

[vkboo]

React以组件为基本的工作单位，每个组件都有自己的render方法(函数式组件直接返回)返回一个jsx结构用于描述组件的UI，组件有自己的状态state和从父组件接受的数据props；当state或props发生改变时，会引起React内部开始进行Reconciler（即DOM diff）操作，这个操作会首先检查当前节点的state和props是否改变，来决定是否更新当前节点的状态并执行响应的生命周期函数，并把节点差异存放在effect list（diff结果）中，一个节点检查完了之后会按照从顶向下、兄弟节点间逐级构造的方式进行循环这个操作，这个过程时可暂停的，依靠浏览器的requestIdelCallback进行调度；Reconciler完成了之后，这个组件树更新前后的diff结果已经算出来了，接下来就是不可中断commit操作，这个操作会把diff结果应用到真实的DOM上，执行componentDidMount或componentDidUpdate声明周期，整个更新流程完成。