服用5年份筑基丹

前言

React，作为前端领域的一股强大势力，以其组件化、声明式的编程范式赢得了众多修仙者的青睐。然而，要想真正掌握 React 的精髓，却需要深入骨髓的修炼与理解。这五年的筑基丹，正是我修炼 React 的得力助手。

服下此丹，我仿佛置身于一个由React构建的奇妙世界。虚拟DOM、组件通信、状态管理、生命周期 等核心概念逐一展现在我眼前。我开始深入研究 React 的源码，探寻其内部运行机制，逐渐掌握 React 的高级特性与用法。

然而，修仙之路从来都不是一帆风顺的。在修炼 React 的过程中，我也遇到了诸多挑战与困惑。有时，我会在复杂的组件关系中迷失方向；有时，我会在状态管理的泥沼中挣扎。但正是这些挑战，让我更加坚定了修炼的决心，也让我更加珍惜每一次的突破与进步。

若你也想深入修炼 React 之道，不妨一同服下这五年份的筑基丹。让我们携手共进 ~

1. React 中的 Fiber 架构 ⭐

Fiber 架构是 React 16 引入的一种新的架构，它允许 React 在渲染过程中进行中断和恢复，从而实现更流畅的用户体验。

解决的痛点：

增量渲染：Fiber 架构可以将渲染工作拆分成多个时间片段执行，使得每个时间片段都有机会插入其他优先级更高的任务，从而在保证页面响应性的同时，尽可能快地完成渲染工作。
优先级调度：Fiber 架构引入了任务优先级的概念，可以根据任务的紧急程度和重要性对任务进行优先级排序，确保优先级较高的任务能够尽早得到处理，提高用户交互的流畅度。
可中断和恢复：Fiber 架构支持任务的中断和恢复，即在渲染过程中，如果有更高优先级的任务需要处理，当前任务可以被暂停并稍后恢复，以确保更及时地响应用户操作。
更好的错误处理：Fiber 架构为错误处理提供了更好的机制。每个 Fiber 都有自己的错误边界，可以捕获并处理组件树中发生的错误，并在不崩溃整个应用程序的情况下进行优雅降级。

2. React 中的 Diff 算法 ⭐

React Diff 算法是 React 虚拟 Dom 的核心。它允许 React 快速确定虚拟 Dom 树上的哪些部分需要更新，从而使得 UI 更新非常的高效。

同级比较

React 不会进行跨层级的 DOM 比较。它只比较同一层级的元素。

元素类型

类型不同，删除重建：当两棵树的相同位置找到两个不同类型的元素时，React 会直接销毁旧节点及其子节点，并从头开始创建新节点。
类型相同，复用节点：如果两个元素是相同类型的，React 会保留该 DOM 节点，并仅更新变化的属性。并递归地对其子节点进行比较。

Keys重要性

当在数组中渲染子节点时，必须为每个子节点分配一个稳定的 Key 值。通过为每个节点分配一个 Key，React 可以使用这个 Key 来识别那些在不同的渲染中仍然保持不变的元素。

如果你没有设置 Key，React 内部会默认使用元素的索引作为它们的 Key

若是设置一个随机 Key 会怎样？

现象：每次组件渲染，随机 Key 值都会变化，即时实际渲染的数据没有变，这个元素也会被销毁重新创建。

这将导致以下问题出现：

性能下降
状态丢失
- 如果一个组件或元素依赖于本地状态或维护状态（如输入字段）。
不一致的 DOM 行为
- 这可能导致不可预测的行为，如焦点丢失、文本选择丢失等。

3. React 中的 Virtual DOM ⭐

虚拟 DOM 本质上是一个 JS 对象，它反映了真实 DOM 的结构和内容。

1.提供一个中间缓存，使得直接操作实际的 DOM（这通常是昂贵的操作）不再那么频繁。
2.通过对比新旧虚拟 DOM 来计算出最小的变动，从而优化实际 DOM 的更新。

虚拟 DOM 可以让 React 更优雅高效的更新真实 DOM，虚拟 DOM 可以让开发者不用关注 DOM 操作，只操作数据。

4. React 中的 Hooks ⭐

Hooks 是 React 16.8 版本引入的新特性，它允许在函数组件中使用状态（state）和生命周期（lifecycle）等 React 特性。

常用 Hooks

useState：用于在函数组件中定义和更新状态（state）。
useEffect：用于在函数组件中执行副作用操作（side effect）。
useContext：用于在函数组件中获取上下文（context）的值。
useReducer：用于在函数组件中实现状态管理。
useRef：用于在函数组件中获取对 DOM 元素的引用。
useCallback：用于在函数组件中缓存函数。
useMemo：用于在函数组件中缓存计算结果。
useLayoutEffect：类似于 useEffect，但会在 DOM 更新后同步调用副作用函数。

5. React 中的生命周期 ⭐

React 组件的生命周期是指组件从创建到销毁的过程，它包括三个阶段：挂载、更新和卸载。

挂载：组件创建时，会调用 constructor 方法，然后调用 render 方法，最后调用 componentDidMount 方法。
更新：当组件的 props 或 state 发生变化时，会调用 render 方法，然后调用 componentDidUpdate 方法。
卸载：当组件从 DOM 中移除时，会调用 componentWillUnmount 方法。

挂载阶段

constructor：在组件创建时调用，用于初始化组件的状态。
render：在组件创建时调用，用于返回组件的 UI 结构。
componentDidMount：在组件挂载后调用，用于执行一些副作用操作，如发送网络请求、订阅事件等。

更新阶段

componentWillReceiveProps：在组件接收到新的 props 时调用，用于更新组件的状态。
shouldComponentUpdate：在组件接收到新的 props 或 state 时调用，用于判断是否需要重新渲染组件。
componentWillUpdate：在组件接收到新的 props 或 state 且 shouldComponentUpdate 返回 true 时调用，用于更新组件的状态。
render：在组件接收到新的 props 或 state 时调用，用于返回组件的 UI 结构。
componentDidUpdate：在组件更新后调用，用于执行一些副作用操作，如发送网络请求、订阅事件等。

卸载阶段

componentWillUnmount：在组件从 DOM 中移除时调用，用于执行一些清理操作，如取消订阅事件、清除定时器等。

6. useMemo、React.memo、useCallback区别 ⭐

useMemo 和 React.memo 都是 React 中的性能优化工具，但它们的作用和用法上有些区别。

useMemo：用于在组件渲染时计算某个值，并将计算结果缓存起来，避免在每次渲染时重新计算。
React.memo：用于优化组件的渲染，当组件的 props 没有变化时，避免重新渲染。
useCallback：用于在组件渲染时缓存某个函数，避免在每次渲染时重新创建函数。

7. useState 和 useRef 区别 ⭐

触发渲染：useState 更新状态时会触发组件的重新渲染，而 useRef 更新 .current 属性时不会。
用途：useState 用于那些组件状态（通常是用户界面状态），这些状态的改变需要导致组件重新渲染。useRef 用于持久化存储数据，这些数据的改变不应该引起渲染。
返回值：useState 返回一个状态值和一个更新这个状态值的函数。useRef 返回一个具有 .current 属性的对象，你可以在其中存储任何值。

8. useEffect 和 useLayoutEffect ⭐

useEffect

作用：useEffect 允许你执行任何在组件渲染后需要执行的操作。这些副作用包括数据获取、订阅或手动更改 React 组件树之外的 DOM。
执行时机：useEffect 在组件渲染到屏幕之后被调用，因此不会阻塞 DOM 的更新。这对于大多数副作用是合适的，尤其是那些不需要同步到屏幕的操作。
示例用途：数据请求、设置订阅、以及任何需要在组件加载后执行且不需要立即反映在屏幕上的操作。

useLayoutEffect

作用：useLayoutEffect 的使用和 useEffect 相似，但它在 DOM 更新完成后、浏览器绘制之前同步调用。这使得它可以读取 DOM 布局并同步重新渲染。
执行时机：useLayoutEffect 会在 DOM 更新后立即同步执行，但在浏览器进行任何绘制之前，这意味着你可以在浏览器绘制之前读取布局并同步更新它，避免不必要的视觉闪烁。
示例用途：用于需要同步计算和重新渲染的操作，例如测量 DOM 节点的布局、同步动画等。

9. 类组件和函数组件 ⭐

React一开始，以类组件作为主体，在React16.8版本（引入React Hooks）后，解决了类组件的部分痛点（Hooks部分再说明），函数组件后来者居上。

类组件

定义特点：

组件首字母大写
继承自 React.Component
必须实现render函数

实现方式：

使用ES6 Class语法
构造器是可选的，用于初始化数据

import React, { Component } from 'react';
 
export default class App extends Component {
  constructor() {
    super();
    this.state = {};
  }
 
  render() {
    return (
      <div>
        <h1>我是类组件</h1>
      </div>
    );
  }
}

函数组件

函数组件，字面意思，就是JavaSript函数作为React组件。

定义特点：

组件首字母大写
无生命周期函数，可用useEffect替代
无状态管理，可用useState替代

// 定义一个函数组件  
function Greeting({ name }) {  
  // 使用JSX来渲染组件的UI  
  return (  
    <div>  
      Hello, {name}!  
    </div>  
  );  
}  
  
// 在另一个组件或应用中使用Greeting组件  
function App() {  
  return (  
    <div className="App">  
      <Greeting name="Alice" />  
      <Greeting name="Bob" />  
    </div>  
  );  
}  
  
export default App;

10. 高阶组件 ⭐

定义：高阶组件（HOC）是一个函数，接收一个组件作为参数，返回一个新的组件。
应用场景：
- 复用逻辑：高阶组件可以帮助我们在组件之间复用逻辑，避免重复代码。如果你现在多个组件有相同的逻辑代码，你可以将这个逻辑抽离出来封装一个高阶组件，实现代码逻辑的复用。
- 加工 props：高阶组件可以加工传递给组件的 props，从而改变组件的行为。
- 条件渲染：高阶组件可以根据特定的条件来决定是否渲染组件。
- 提供额外功能：高阶组件可以增强现有组件的功能，如错误处理，数据获取等等。

11. 受控组件和非受控组件 ⭐

受控组件

定义：受控组件是指通过 React 的 state 来控制组件的输入。每当表单数据改变时，都会通过一个事件处理函数来更新 state，然后组件会根据这个新的 state 来重新渲染。

特点：

数据驱动：组件的状态完全由 React 的 state 和 props 控制。
即时更新：每个状态的改变都伴随着组件的重新渲染。

import React, { useState } from 'react';

function ControlledComponent() {
    const [value, setValue] = useState('');

    const handleChange = (event) => {
        setValue(event.target.value);
    };

    return <input type="text" value={value} onChange={handleChange} />;
}

非受控组件

定义：非受控组件是指通过 DOM 的 ref 来控制组件的输入。非受控组件通过 DOM 的 ref 来获取组件的输入，而不是通过 React 的 state 来控制组件的输入。

特点：

DOM 驱动：表单数据由 DOM 节点自己管理，React 不负责维护状态。
使用 ref 访问：通常通过 ref 来从 DOM 节点获取表单数据。

import React, { useRef } from 'react';

function UncontrolledComponent() {
    const inputRef = useRef(null);

    const handleSubmit = (event) => {
        alert('A name was submitted: ' + inputRef.current.value);
        event.preventDefault();
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" ref={inputRef} />
            <button type="submit">Submit</button>
        </form>
    );
}

对比

组件类型	数据管理	更新方式	使用场景
`受控` 组件	由 `React` 管理	`state` 和 `props` 实时更新	实时验证，控制 `输入`
`非受控` 组件	由 `DOM` 管理	依赖 `ref` 获取当前值	表单提交，`取值`

总结：React 推荐使用受控组件来实现表单，因为需要控制组件的状态和行为。但非受控组件在一些场景下（例如性能要求极高）可能更为简单。

12. React 18 的新特性 ⭐

官方文档：React v18.0 的新特性

Concurrent Mode（并发模式）

Concurrent Mode 是一种新的渲染模式，它允许 React 在主线程上执行渲染操作，从而提高应用程序的性能和响应能力。

在 React18 之前，所有任务都被视为急迫任务，react18 引入了并发模式，在这个模式下，渲染是可以中断的，高优先级的任务可以优先渲染更新。开启并发模式只需要将之前的 ReactDom.render 换成 ReactDom.createRoot 这个新的 api 即可。

自动批量处理

在 React18 之前，我们只在 React 事件处理函数中进行批处理更新。默认情况下，在 promise、setTimeout、原生事件处理函数中、或任何其它事件内的更新都不会进行批处理。React18 之后，默认自动执行批处理，多次更新合并为一次更新。

其他

新的 Suspense 特性：允许在组件中使用异步组件，从而实现组件的懒加载和错误边界处理。
新的 Hooks：useId、 useTransition、 useDeferredValue、 useSyncExternalStore、 useInsertionEffect
新的根节点挂载方式：使用新的 API createRoot 来替代旧的 render 方法。

13. React Vue 异同处 ⭐

相同点

都有虚拟 Dom + Diff 算法的渲染机制，用于提升渲染速度
都使用组件化开发，通过 props 传参等方式进行父子数据通信
都具备状态管理（ Vue 的 Vuex/Pinia，React的 Redux/Mobx ）
都支持跨平台开发（ Vue 的 Uniapp， React 的 React Native ）

不同点

1.框架层面：

Vue：

本质属于 MVVM 模式（由 MVC 发展出来的）
由于 MVVM 模式，双向数据流

React：

严格意义上，只能算是 MVC 中的 View 层
由于 MVC 模式，单向数据流

2.数据层面：

Vue：

vue 推崇 响应式，实现了数据的 双向绑定。
由于数据可变，当数据发生变化，可通过 getter/setter 以及一些函数的 劫持监听数据的变化
并且当数据变化时，可直接更新到对应的虚拟 Dom（VM 的理念）

React：

React 推崇 不可变（Immutable），为 单向数据流。
由于数据不可变，所以 React 无需监听数据的变化，React 只对 setState 之后会有 重新渲染 的流程
当数据发生变化（ setState 之后），React 默认是通过 比较引用的方式（Diff）进行的，所以若是不优化，则会导致大量非必要渲染，从而影响性能（代码要求更高）

3.渲染层面：

Vue：

Vue 可以很快的计算出虚拟 DOM 的差异，这由于它监听了每一个组件的依赖关系，不需要重新渲染整个组件树

React：

React 数据变化时，会将全部子组件重新渲染。但可 shouldComponentUpdate 这个生命周期函数进行控制。

4.Diff 算法：

Vue：

同层比较新老：新的不存在旧的存在就删除，新的存在旧的不存在就创建
基于 Snabbdom 库，使用双向链表，边对比，边更新 DOM。

React：

递归同层比较，标识差异点保存到 Diff 队列，从而得到 patch 树，再 统一操作批量更新 DOM。

5.其他层面：

模板语法不同：Vue 是 指令+模板语法，react 是 函数式编程
性能优化可控：Vue 性能优化（自动的）相对 React 可控性低，因此大型应用，数据量庞大，无需过量非必要的 Watcher，出于性能方面，推荐使用可控的 React。
社区生态差异：Vue 国内受众人群多，React 国际受众人群多（更为成熟↑）