react源码

mini-react

代码地址

虚拟dom

一种编程概念。在这个概念里，UI是一种理想化的虚拟的表现在内存中。

what？ ⽤ JavaScript 对象表示 DOM 信息和结构，当状态变更的时候，重新渲染这个 JavaScript 的对象结构。这个JavaScript 对象称为virtual dom； why？ DOM操作很慢，轻微的操作都可能导致⻚⾯重新排版，⾮常耗性能。相对于DOM对象，js对象处理起来更快，⽽且更简单。通过diff算法对⽐新旧vdom之间的差异，可以批量的、最⼩化的执⾏dom操作，从⽽提⾼性能。 where？ react中⽤JSX语法描述视图，通过babel-loader转译后它们变为React.createElement(...)形式，该函数将⽣成vdom来描述真实dom。将来如果状态变化，vdom将作出相应变化，再通过diff算法对⽐新⽼vdom区别从⽽做出最终dom操作。

在线尝试jsx

JSX

语法糖 React 使⽤ JSX 来替代常规的 JavaScript。 JSX 是⼀个看起来很像 XML 的 JavaScript 语法扩展。

开发效率：使⽤ JSX 编写模板简单快速。 执⾏效率：JSX编译为 JavaScript 代码后进⾏了优化，执⾏更快。 开课吧web全栈架构师类型安全：在编译过程中就能发现错误。 类型安全：在编译过程中就能发现错误。

原理：babel-loader会预编译JSX为React.createElement(...)

与vue的异同： react中虚拟dom+jsx的设计⼀开始就有，vue则是演进 过程中才出现的 jsx本来就是js扩展，转义过程简单直接的多；vue把template编译为render函数的过程需要复杂的编译器 转换字符串-ast-js函数字符串