一、React 的历史与应用

历史

React 是由 Facebook 团队开发的一个用于构建用户界面的 JavaScript 库。它首次在 2013 年发布，并迅速获得了广泛的应用和认可。React 的目标是提供高效、可复用和易于维护的 UI 组件，以构建大规模的、可交互的 Web 应用程序。

应用

前端应用开发，如 Facebook, lnstagram，Netfiix 网页版。
移动原生应用开发，如 lnstagram，Discord，Oculus。
结合 Electron，进行桌面应用开发。

二、React 的设计思路

UI编程痛点

状态更新，UI不会自动更新，需要手动的调用DOM进行更新；
欠缺基本的代码层面的封装和隔离，代码层面没有组件化；
UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。

响应式对比转换式

实时性：响应式系统能够实时地监听状态变化并自动更新相关的界面，无需手动干预。
可扩展性：响应式系统可以很好地应对数据规模的增加，保持代码的逻辑清晰和可扩展性。
UI界面：React 中引入了响应式编程的概念，可以通过监听数据变化来自动更新 UI。

响应式编程的优点

状态更新，UI自动更新；
前端代码组件化，可复用，可封装；
状态之间的互相依赖关系，只需声明即可。

组件化

组件是组件的组合 / 原子组件；
组件内拥有状态，外部不可见；
父组件可将状态传入组件内部。

状态归属问题

状态归属于两个节点向上寻找到最近的祖宗节点。

React 是单向数据流。
解决状态不合理上升的问题的方法是使用组件的局部状态。
- 为了解决这个问题，可以将状态维持在组件的局部状态中，而不是将其上升到不必要的层级。这样可以保持关注点的聚焦，使得每个组件只关心自己的状态，而不需要关心其他组件的状态。
- 另外，可使用状态管理库（如 Redux、MobX）来集中管理应用程序的状态，从而避免状态的过度上升和状态共享的问题。
组件的状态改变后，React 会自动更新 DOM。
- React 会在组件的 render 方法被调用时生成一个新的虚拟 DOM 树，并与之前的虚拟 DOM 树进行比较。通过比较，React 可以找到变化的部分并且只对这部分进行实际的 DOM 更新操作，从而提高性能。

三、React (hooks) 的写法

React Hooks 提供了一种更直观和简洁的方式来编写组件。以函数组件为主，并通过使用特定的 Hook 函数来处理组件的状态和副作用。
Hooks 提供了一种无需类组件即可使用状态和其他 React 特性的方式，使得组件的代码更加简洁和易于理解。
例如，使用 useState Hook 来管理组件的状态：

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
  setCount(count + 1);
  };

  return (
  <div>
    <p>Count: {count}</p>
    <button onClick={increment}>Increment</button>
  </div>
  );
}

export default Counter;

四、React 的实现

1. JSX 不符合 JS 标准语法

JSX 是一种类似 HTML 的语法扩展，用于在 JavaScript 中描述用户界面。尽管它不是标准的 JavaScript 语法，但它被 React 用于声明组件的结构和样式，并且在构建过程中会被转换为合法的 JavaScript 代码。

2. 返回的 JSX 发生改变时如何更新 DOM

当组件的状态发生变化时，React 会对比前后两次渲染的虚拟 DOM 树，并找出需要更新的部分，然后只更新发生改变的部分到真实的 DOM 中，从而提高性能。

3. State/Props 更新时，要重新触发 render 函数

当组件的状态（State）或属性（Props）发生变化时，React 会自动重新调用组件的 render 方法来重新渲染组件，并更新界面。

五、React 状态管理库

React 提供了一种称为 Context 的状态管理机制，它可以将状态抽离到组件外部进行统一管理。Context 允许在组件树中共享状态，而不必通过逐层传递 Props。
当应用程序的规模变大时，使用状态管理库可以更好地组织和管理应用状态。Redux 和 MobX 是常用的 React 状态管理库，它们提供了更强大的状态管理能力，并具有丰富的生态系统。

六、应用级框架科普

常见的应用级框架包括 Next.js、Gatsby 等。

DAY8学习笔记（响应式系统与React） | 青训营