这是我参与「第四届青训营」笔记创作活动的第12天

引言

React中响应式原理开发者只需关注状态转移（数据），当状态发生变化，React框架会自动根据新的状态重新构建UI。

React框架在接收到用户状态改变通知后，会根据当前渲染树，结合最新的状态改变，通过Diff算法，计算出树中变化的部分，然后只更新变化的部分（DOM操作），从而避免整棵树重构，提高性能。

1、React的应用

1、前端应用开发，如Facebook，Instagram,Netflix网页版。

2、移动原生应用开发，如Instagram,Discord,Oculus。

3、结合Electron，进行桌面应用开发。

1、状态更新，UI自动更新。

2、前端代码组件化，可复用，可封装。

3、状态之间的相互依赖关系，只需声明即可。

1、组件是 组件的组合/原子组件

2、组件内拥有状态，外部不可见

3、父组件可将状态传入组件内部

组件设计：

1、组件声明了状态和UI的映射

2、组件有Props/State两种状态

3、组件可由其他组件拼装而成

如何解决 JSX 不符合 JS 的标准的问题？

将 JSX 转译为 JS

返回的 JSX 发生改变时，如何更新 DOM ？

JSX 的改变会引起 Virtual DOM 的改变

对改变前后的 Virtual DOM 进行 Diff（How to Diff?）

根据 Virtual DOM 与 DOM 的映射关系，进而更新 DOM

react 组件的 render 函数，在哪些情况下，会被重新执行？

当组件的状态（Props/State）发生改变时，组件和其所有的子组件，会递归地重新执行 render 函数。

核心思想：将状态抽离到 UI 外部进行统一管理，将状态保存在 Store。

状态全部抽离到 UI 外部的弊端：组件与 Store 强耦合，不适用于 library 的开发，在业务代码中可以将组件公用状态防止在 Store 中

推荐使用：
redux
xstate
mobx
recoil

React VS Vue