响应式系统与 React 笔记｜青训营8.14前端基础班。今天的课程围绕前端框架React展开，我的笔记将按照老师介绍

今天的课程围绕前端框架React展开，我的笔记将分为6个模块：

React的历史与应用

React 4大特性：

既可以在客户端渲染，也可以在服务端渲染
响应式，即当状态更新时，UI也会自动更新
性能优，不用反复刷新
为前端代码做组件（用函数声明）级别的复用封装

React的设计思路

针对这些痛点，React应运而生，用响应式编程实现事件 --> 执行既定的回调 --> 状态变更 --> UI更新以下是有了React后的便捷之处：

总结：

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

（因为要想顶栏价格显示当前价格，需要从父组件传入状态，而顶栏的父组件是Root）

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

Tips：

React是单向数据流，从父组件向子组件传递数据，子组件不能直接修改父组件的数据，而是通过回调函数等间接方式将数据的变化传递回父组件。
状态不合理上升是指当某个状态需要被多个子组件共享或使用时，开发者可能会将这个状态提升到共同的父组件，从而导致组件层级过深或状态在不相关的组件之间传递，影响代码的可维护性和可理解性。
通过将共享的状态提升到合适的祖先组件，并通过 props 进行传递，React 可以有效地解决状态不合理上升的问题，同时保持代码的可维护性和可扩展性。
当组件的状态发生变化时，React 会执行以下步骤来更新 DOM：

状态变化触发渲染： 当组件的状态发生变化，React 会触发组件的重新渲染。
生成虚拟 DOM： 在重新渲染过程中，React 会生成一个新的虚拟 DOM 树，这棵树代表了组件当前的状态和结构。
比较虚拟 DOM： React 会将新生成的虚拟 DOM 树与之前渲染的虚拟 DOM 树进行比较，找出两者之间的差异。
生成变更集合： 比较虚拟 DOM 后，React 会生成一个包含需要更新的 DOM 元素的变更集合。
应用变更： 最后，React 会将变更集合应用到实际的 DOM 上，只更新需要更改的部分，从而尽量减少对真实 DOM 的操作。

在 React 中，组件的生命周期指的是组件从创建到销毁的整个过程中，不同阶段会触发不同的方法。

constructor： 组件的构造函数，初始化 state 和绑定方法。

componentDidMount： 组件已经被插入到 DOM 中，适合进行异步数据获取等操作。

componentDidUpdate： 组件已经被更新（重新渲染）时被调用。

componentWillUnmount： 组件将被从 DOM 中移除时被调用，用于清理资源。

React（hooks）的写法

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>
  );
}

useEffect 用于处理副作用（如网络请求、数据获取、DOM 操作、订阅等）的 Hook。它接收一个函数和一个依赖数组作为参数。当组件渲染时，useEffect 中的函数会被执行，然后可以在函数内部执行副作用。依赖数组用于指定在哪些状态发生变化时需要重新执行副作用函数。如果不提供依赖数组，副作用会在每次组件重新渲染时都执行。

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty dependency array means the effect runs only on mount

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

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

React的实现

React状态管理库

React状态管理库的核心思想是：将状态抽离到UI外部进行统一管理，以此解决状态共享问题。（尽量避免前面提到的把Root设置为父组件的情况发生）

Store就是所有组件共同组成的那个UI的状态，因此放在Store里的组件是那种不需要频繁向后端发起请求的，比如用户头像

但是这样也有弊端，如降低了组件的复用性

应用级框架科普

React 本身是一个用于构建用户界面的 JavaScript 库，它专注于 UI 的渲染和组件的管理。然而，为了构建更复杂的应用，通常需要在 React 基础上搭建一种应用级框架，来管理状态、路由、数据流等方面的问题。这些应用级框架在 React 生态系统中被称为"React 应用级框架"或"React 应用框架"，它们提供了一套通用的结构和工具，帮助开发者构建更大型、更复杂的应用。

响应式系统与 React 笔记｜ 青训营