React 的历史与应用

2010年，Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的 React 的设计。
2011年，Jordan Walke 创造了 FaxJS，也就是后来的 React 原型。
2012年，在 Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用，Jordan Walke 基于 FaxJS 的经验，创造了 React。

React 的设计思路

UI 编程痛点

React 的设计目标之一是解决传统 UI 编程中的一些痛点，例如手动操作 DOM、频繁的重绘和难以维护的代码。React引入了虚拟 DOM 的概念，通过将整个 UI 表示为一个状态树，并使用声明式的方式描述UI的外观，从而简化了 UI 的开发和维护过程。

响应式与转换式

React 采用了响应式的编程模型，即 UI 的状态变化会自动触发相应的更新。这种模型使得开发者只需要关注 UI 的状态变化，而不需要手动操作 DOM 来更新 UI。此外，React 还引入了转换式的思想，即将 UI 的状态转换为 UI 的外观，从而实现了 UI 的高效更新。

React 设计与实现 - 组件化

React 的核心思想是组件化，即将 UI 拆分为独立的可复用组件。每个组件都有自己的状态和属性，并且可以通过组合和嵌套来构建复杂的UI。这种组件化的设计使得 UI 的开发更加模块化和可维护，同时也提高了代码的复用性。

React 设计与实现 – 状态归属问题

React 中的状态归属问题是指如何管理组件的状态。React 推荐将状态放在最小的可能范围内，并通过 props 将状态传递给子组件。这种设计使得状态的管理更加清晰和可控，同时也减少了状态共享带来的问题。

React 设计与实现 – 生命周期

React 提供了一套生命周期方法，用于在组件的不同阶段执行特定的操作。通过这些生命周期方法，开发者可以在组件的不同生命周期阶段进行初始化、更新和销毁等操作。这种设计使得开发者可以更好地控制组件的行为，并且可以在不同的生命周期阶段执行相应的逻辑。

React（hooks）的写法

不要在循环、条件或嵌套函数中调用 Hook。

下面是React Hooks的一些常见写法：

使用 useState Hook 来管理组件的状态：

import React, { useState } from 'react';
function MyComponent() {
  const [count, setCount] = useState(0);

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

使用 useEffect Hook 来处理副作用（如订阅、数据获取等）：

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 在组件挂载后执行副作用
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  };

  return (
    <div>
      {data ? (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

React 状态管理库

核心思想

React 状态管理库的核心思想是将应用程序的状态集中管理，以便更好地管理和共享状态，并简化组件之间的通信。

React 状态管理库推荐

Redux：Redux 是一个功能强大且广泛使用的状态管理库。它采用了单一数据源和不可变状态的思想，通过使用纯函数来更新状态。Redux提供了一个中央存储（store）来存储应用程序的状态，并使用 action 和 reducer 来描述状态的变化。Redux 还提供了一些中间件，用于处理异步操作和副作用。Redux 的设计和使用方式相对成熟，有大量的社区支持和相关工具。
MobX：MobX 是另一个流行的状态管理库，它提供了一种简单而强大的方式来管理应用程序的状态。MobX 使用可观察的数据结构来跟踪状态的变化，并自动更新相关的组件。它支持响应式编程模型，使得状态的变化能够自动反映在组件中。MobX 的设计理念更加灵活，可以根据具体需求选择使用可观察对象、装饰器或者 React Hooks 来管理状态。

响应式系统与 React | 青训营