• 学习中遇到的第一个问题：我在开始我的第 React 项目时犯的 5 个错误 - 学新通 (swvq.com)
• 快速入门 – React 中文文档 (docschina.org)
• 在 Vite 中使用 - Ant Design

React历史与应用

• 2010年，Facebook在其 php生态中,引入了xhp框架,首次引入了组合式组且件的思想,启发了后来的React的设计
• 2011年，Jordan Walke创造了FaxJS,也就是后来的React原型； 2012
• 在Facebook收购Instagram后,该FaxJS项目在内部得到使用,JondanWalke基于FaxJS的经验,创造 了 React。
• 2013年，React正式开源,在2013 JSConf上Jordan Walke介绍了这项新技术。
• VUE：尤雨溪 - 搜狗百科 (sogou.com)

React设计思路

• 纯JS中UI编程痛点：
  • 状态更新,UI不会自动更新,需要手动地调用 DOM进行更新。
  • 欠缺基本的代码层面的封装和隔离,代码层面没有组件化。
  • UI之间的数据依赖关系,需要手动维护,如果依赖链路长,则会遇到"Callback Hell"。
• 转换式系统（输入输出），响应式系统（监听事件，消息驱动，执行既定回调——更新UI界面）
• React响应式编程：
  • 状态更新,UI自动更新。
    • "状态更新,UI不会自动更新,需要手动地调用DOM进行更新。
  • 前端代码组件化,可复用,可封装。
    • 欠缺基本的代码层面的封装和隔离,代码层面没有组件化。"
  • 状态之间的互相依赖关系,只需声明即可。
    • "UI之间的数据依赖关系,需要手动维护,如果依赖链路长,则会遇到"Callback Hell"。"
• React设计与实现组件化
  1. 组件是组件的组合/原子组件
  2. 组件内拥有状态,外部不可见
  3. 父组件可将状态传入组件内部
• React设计思路
  • 组件内部拥有私有状态State。
  • 组件接受外部的Props状态提供复用性。
  • 根据当前的State/Props,返回一个UI。
• React生命周期
• React的Hooks写法
  • 内部state（useState/useEffect,etc）
• React实现
  • JSX不符合JS标准语法
  • 返回的JSX发生改变时,如何更新DOM
  • State/Props更新时,要重新触发render函数
• Virtual DOM (虚拟 DOM)
  • Virtual DOM 是一种用于和真实DOM同步,而在JS内存中维护的一个对象,它具有和DOM类似的树状结构,并和DOM可以建立一一对应的关系。

• 它赋予了 React声明式的API:您告诉React希望让Ul是什么状态,React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

• Diff
• React状态管理库
  • Modern.js Redux等等，将状态抽离到UI外部进行统一管理
• 状态机：当前状态收到外部事件，迁移到下一个事件。
• React框架
  • Next、Modern.js