是什么
React 使用基于组件的声明式编程思维。
组件是抽象的概念,它可以表示视图、样式甚至是逻辑,网页通常由许多视图构建而成,任意网页均能分解成多个组件,组件可以分解成子组件。使用 React 简洁清晰得可预测得自顶而下得声明组件的关系、状态、行为逻辑,从而构建出用户界面。
核心
- 一 ReactComponent & ReactElement & instances React.createElement 高度类似于 document.createElement,输入类型(字符串或ReactComponent)、props、子 Element(s),输出 ReactElement 作为原子单元构成 Virtual DOM。
ReactElement 本质上是 Javascript Object, 其实与 HTMLElement 大同小异,它向开发者描述一个 Element 或 Element tree 的基本“面貌”。换句话说 ReactElement 等同于 light HTMLElement。
React 通过 ReactElement 的描述生成 instances 渲染至屏幕
- 二 Virtual DOM & Reconciliation & Update Virtual DOM 高度类似于 DOM,是一颗有序分层结构的树,描述多个 Elements 的联系,或相邻或嵌套或其他,若把联系当作线, Element 当作点,点和线构成“骨架”,点线越多构成的“骨架”越完整。
React 应用总是从任一特定状态过渡至另一个,并同时生成一颗新树。为降低开销提高应用性能,React 使用 Reconciliation 对比新/旧树差异从而决定哪些部分需要改变,在浏览器应用中,这些改变被翻译为 DOM 操作的集合,最后有序执行,完成一次 Update。
- 三 React Fiber
React 的优势
可复用的组件,减少冗余代码块提高可维护性 视图、样式、逻辑、状态都可抽象成组件,形成统一的编程思维,降低理解成本提高协作效率 跨端能力 实现 Virtual DOM,减少 DOM 操作的开销从而提高 Web 应用的性能 相比 html + css + js,纯粹的 js 使开发者能够无所拘束的组织代码,充满想象空间