React 面试问题

TL;DR

React 是一个由 Facebook 创建的 JavaScript 库，用于构建用户界面，主要用于单页应用程序。它允许开发人员创建管理自己状态的可重用组件。React 的主要优点包括基于组件的架构，用于模块化代码，虚拟 DOM 用于高效更新，声明式 UI 用于更易读的代码，单向数据绑定用于可预测的数据流，以及拥有丰富资源和工具的强大社区和生态系统。

React 的主要特点：

• 声明式：您根据数据描述 UI 的所需状态，React 处理高效更新实际 DOM。
• 基于组件：构建管理自身状态和逻辑的可重用和模块化 UI 元素（组件）。
• 虚拟 DOM：React 使用实际 DOM 的轻量级内存表示，允许它选择性地高效地执行更新。
• JSX：虽然不是强制性的，但 JSX 提供了一个语法扩展，允许您在 JavaScript 代码中编写类似 HTML 的结构，使 UI 开发更直观。

什么是 React？

React 是一个由 Facebook 开发的开源 JavaScript 库，用于构建用户界面。它专注于应用程序的视图层，特别适用于创建单页应用程序，在这种应用程序中，无缝的用户体验至关重要。React 允许开发人员构建封装其自身状态的组件，并将它们组合起来创建复杂的 UI。

React 的优点

1. 基于组件的架构

React 鼓励将您的 UI 分解为独立的、可重用的组件。每个组件封装其自身的状态、逻辑和渲染，使您的代码：

• 模块化和可重用：组件可以在应用程序的不同部分甚至其他项目中轻松重用。
• 可维护：组件内的更改是隔离的，从而降低了意外副作用的风险。
• 更易于测试：组件可以独立测试，确保其功能和可靠性。

2. 虚拟 DOM 和高效更新

React 使用虚拟 DOM，即实际 DOM 的轻量级内存表示。当数据更改时，React 首先更新虚拟 DOM，然后将其与之前的版本进行比较。这个过程称为 diffing，它允许 React 识别实际 DOM 中所需的最少更改集。通过仅更新必要的元素，React 最小化了昂贵的 DOM 操作，从而显着提高了性能。

3. 大型且活跃的社区

React 拥有庞大而活跃的全球开发人员社区。 这转化为：

• 广泛的文档和资源：查找全面的文档、教程和社区驱动的资源，以帮助您的学习和开发过程。
• 丰富的第三方库和工具：利用丰富的预构建组件、库和工具生态系统，这些生态系统扩展了 React 的功能并简化了开发。
• 强大的社区支持：通过论坛、在线社区和聚会寻求帮助、分享知识并与同行开发人员互动。

4. 一次学习，随处编写

React 的多功能性超出了 Web 开发的范围。 使用 React Native，您可以使用您的 React 知识为 iOS 和 Android 构建原生移动应用程序。 这种“一次学习，随处编写”的方法允许您：

• 在平台之间共享代码：在 Web 和移动设备之间重用组件和逻辑，从而减少开发时间和精力。
• 利用现有技能：将您的 React 专业知识应用于移动开发，而无需学习全新的技术。
• 使用单个代码库定位多个平台：通过为多个平台管理单个代码库来简化开发和维护。

延伸阅读

• React 官方网站： https://react.dev/
• React 文档： https://react.dev/learn
• React 博客： https://react.dev/blog
• React Native： https://reactnative.dev/

TL;DR

React Node 是 React 中的任何可渲染单元，例如元素、字符串、数字或 null。React Element 是一个描述要渲染内容的不可变对象，使用 JSX 或 React.createElement 创建。React Component 是一个返回 React Element 的函数或类，支持创建可重用的 UI 片段。

React node

一个 React Node 是 React 渲染系统中最基本的单元。它可以是一个 React 元素、一个字符串、一个数字、一个布尔值或 null。 基本上，任何可以在 React 中渲染的东西都是一个 React Node。

const stringNode = 'Hello, world!';
const numberNode = 123;
const booleanNode = true;
const nullNode = null;
const elementNode = <div>Hello, world!</div>;

React element

一个 React Element 是一个不可变的纯对象，表示您希望在屏幕上看到的内容。它包括类型（例如 HTML 标签的字符串或 React 组件）、props 和 children。React 元素是使用 JSX 语法或 React.createElement 创建的。

const element = <div className="greeting">Hello, world!</div>;

// 使用 React.createElement
const element = React.createElement(
  'div',
  { className: 'greeting' },
  'Hello, world!',
);

React component

一个 React Component 是一个可重用的 UI 片段，它可以接受输入（props）并返回描述 UI 的 React 元素。 有两种类型的组件：函数组件和类组件。

• 函数组件：这些更简单，只是将 props 作为参数并返回 React 元素的函数。

  function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
  }

• 类组件：这些是扩展 React.Component 的 ES6 类，并且必须具有返回 React 元素的 render 方法。

  class Welcome extends React.Component {
    render() {
      return <h1>Hello, {this.props.name}</h1>;
    }
  }

延伸阅读

• React documentation: Render and commit
• React documentation: Passing Props to a Component
• React documentation: Writing Markup with JSX
• React documentation: State: A Component's Memory

TL;DR

JSX 代表 JavaScript XML。它是 JavaScript 的语法扩展，允许您在 JavaScript 中编写类似 HTML 的代码。JSX 通过允许您直接在 JavaScript 代码中编写类似 HTML 的内容，从而更容易创建 React 组件。在底层，JSX 被转换为 JavaScript 函数调用，通常使用 Babel 等工具。例如，JSX 中的 <div>Hello, world!</div> 被转换为 React.createElement('div', null, 'Hello, world!')。

什么是JSX以及它如何工作？

什么是JSX？

JSX 代表 JavaScript XML。它是 JavaScript 的语法扩展，允许您在 JavaScript 中编写类似 HTML 的代码。JSX 主要与 React 一起使用，用于描述 UI 应该是什么样子。

JSX 如何工作？

JSX 本身不是有效的 JavaScript。它需要先转换为常规 JavaScript，然后才能由浏览器执行。这种转换通常由 Babel 等工具完成。

JSX 语法

JSX 允许您直接在 JavaScript 代码中编写类似 HTML 的标签。例如：

const element = <h1>Hello, world!</h1>;

转换过程

当您编写 JSX 时，它会被转换为 JavaScript 函数调用。例如，JSX 代码：

const element = <h1>Hello, world!</h1>;

被转换为：

const element = React.createElement('h1', null, 'Hello, world!');

嵌入表达式

您可以使用大括号 {} 将 JavaScript 表达式嵌入到 JSX 中。例如：

const name = 'John';
const element = <h1>Hello, {name}!</h1>;

JSX 中的属性

您可以使用引号指定字符串字面量作为属性，并使用大括号嵌入 JavaScript 表达式。例如：

const element = <img src={user.avatarUrl} alt="User Avatar" />;

JSX 是一个表达式

编译后，JSX 表达式会变成常规的 JavaScript 函数调用，并计算为 JavaScript 对象。这意味着您可以在 if 语句、for 循环中使用 JSX，并将其分配给变量。

JSX 阻止注入攻击

默认情况下，React DOM 会在渲染之前转义 JSX 中嵌入的任何值。这确保了您永远无法注入未在应用程序中明确编写的任何内容。

延伸阅读

• React JSX documentation
• Babel

TL;DR

在 React 中，state 是在组件内部管理并可以随时间变化的数据存储，而 props 是从父组件传递给子组件的只读属性。State 用于组件内变化的数据，而 props 用于将数据和事件处理程序传递给子组件。

React 中 state 和 props 的区别是什么？

State

State 是 React 组件中的一个内置对象，用于保存关于组件的数据或信息。它在组件内部进行管理，并且可以随时间变化，通常是响应用户操作或网络响应。当 state 发生变化时，组件会重新渲染以反映新的 state。

• State 是组件局部的，无法在组件外部访问或修改
• State 可以在类组件的构造函数中初始化，或者在函数组件中使用 useState hook
• State 的变化是异步的，应该使用类组件中的 setState 方法或函数组件中 useState 返回的更新函数

类组件中 state 的示例：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

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

函数组件中 state 的示例：

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

Props

Props（属性的简称）是从父组件传递给子组件的只读属性。它们用于将数据和事件处理程序传递到组件树的下方。Props 是不可变的，这意味着它们不能被子组件更改。

• Props 作为参数传递给子组件函数，或者作为类组件中 this 对象的属性
• Props 允许通过向组件传递不同的数据来复用组件
• Props 也可以用来传递函数，使子组件能够与父组件通信

类组件中 props 的示例：

class ParentComponent extends React.Component {
  render() {
    return <ChildComponent message="Hello, World!" />;
  }
}

class ChildComponent extends React.Component {
  render() {
    return <p>{this.props.message}</p>;
  }
}

函数组件中 props 的示例：

function ParentComponent() {
  return <ChildComponent message="Hello, World!" />;
}

function ChildComponent(props) {
  return <p>{props.message}</p>;
}

关键区别

• State 在组件内部管理，而 props 从父组件传递
• State 可以随时间变化，而 props 是不可变的
• State 用于组件内部变化的数据，而 props 用于向子组件传递数据和事件处理程序

延伸阅读

• React documentation on state
• React documentation on components and props
• React Hooks documentation

TL;DR

React 中的 key prop 用于唯一标识列表中的元素。它通过有效地更新和重新排序元素来帮助 React 优化渲染。如果没有唯一的 key，React 可能会不必要地重新渲染元素，从而导致性能问题和错误。

{
  items.map((item) => <ListItem key={item.id} value={item.value} />);
}

React 中 key prop 的作用是什么？

简介

key prop 是一个特殊的属性，当你在 React 中创建元素列表时，你需要包含它。它对于帮助 React 识别哪些项目已更改、已添加或已删除至关重要，从而优化渲染过程。

为什么 key 很重要

1. 高效更新：React 使用 key prop 来跟踪元素。当列表的状态发生变化时，React 可以快速确定哪些项目需要重新渲染、添加或删除。
2. 避免错误：如果没有唯一的键，React 可能会不必要地或错误地重新渲染元素，从而导致应用程序中出现潜在的错误。
3. 性能优化：通过使用唯一的键，React 最小化了 DOM 操作的数量，使你的应用程序更快、更高效。

如何使用 key prop

当渲染元素列表时，你应该为每个元素提供一个唯一的 key。此键应该是稳定的，这意味着它不应在渲染之间更改。通常，你可以使用数据中的唯一标识符，例如 id。

const items = [
  { id: 1, value: 'Item 1' },
  { id: 2, value: 'Item 2' },
  { id: 3, value: 'Item 3' },
];

function ItemList() {
  return (
    <ul>
      {items.map((item) => (
        <ListItem key={item.id} value={item.value} />
      ))}
    </ul>
  );
}

function ListItem({ value }) {
  return <li>{value}</li>;
}

常见错误

1. 使用数组索引作为键：虽然使用数组索引作为键可能很诱人，但我们不建议这样做，因为如果列表被重新排序或添加/删除项目，索引可能会发生变化。
2. 非唯一键：确保键在整个列表中是唯一的。重复的键可能导致意外行为和错误。

// 错误做法：使用数组索引作为键
{
  items.map((item, index) => <ListItem key={index} value={item.value} />);
}

// 好的做法：使用唯一标识符作为键
{
  items.map((item) => <ListItem key={item.id} value={item.value} />);
}

延伸阅读

• React 文档关于 keys
• 为什么 keys 在 React 中很重要
• 在 React 中保留和重置状态

TL;DR

在 React 中使用数组索引作为 key 的值可能会导致性能问题和错误。当项目顺序发生变化时，React 可能无法正确识别哪些项目已更改，从而导致不必要的重新渲染或不正确的组件更新。最好使用唯一的标识符作为 key，以确保 React 可以有效地管理和更新 DOM。

使用数组索引作为 React 中 key 值的后果

性能问题

当数组索引用作 key 时，React 可能无法有效地更新 DOM。如果数组中项目的顺序发生变化，React 将无法正确识别已添加、删除或移动的项目。这可能导致不必要的重新渲染和性能下降。

不正确的组件更新

使用数组索引作为 key 可能会导致应用程序中的错误。例如，如果项目的顺序发生变化，React 可能会为不同的项目重用相同的组件实例，从而导致不正确的状态和 props 传递给组件。这可能导致意外行为和难以调试的问题。

例子

考虑以下使用数组索引作为 key 的示例：

const items = ['Item 1', 'Item 2', 'Item 3'];

const List = () => (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

如果 items 的顺序发生变化，React 可能无法正确更新 DOM，从而导致性能问题和潜在的错误。

更好的方法

与其使用数组索引，不如使用唯一的标识符作为 key。这确保了 React 可以有效地管理和更新 DOM。

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

const List = () => (
  <ul>
    {items.map((item) => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

在此示例中，使用 item.id 作为 key 可确保 React 在顺序更改时正确识别和更新项目。

延伸阅读

• React documentation on keys
• Why using array index as a key is an anti-pattern
• React performance optimization with keys

TL;DR

React 中的受控组件是指表单数据由组件的状态处理的组件。状态是唯一的真理来源，对表单输入的任何更改都通过事件处理程序进行管理。另一方面，非受控组件在其内部存储自己的状态，并依赖于 refs 来访问表单值。受控组件提供更多控制，更容易测试，而非受控组件对于基本用例来说可能更易于实现。

受控组件和非受控 React 组件有什么区别？

受控组件

受控组件是指表单数据由组件的状态处理的组件。状态是唯一的真理来源，对表单输入的任何更改都通过事件处理程序进行管理。

示例

class ControlledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

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

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

非受控组件

非受控组件在其内部存储自己的状态，并依赖于 refs 来访问表单值。这种方法更类似于传统的 HTML 表单元素。

示例

class UncontrolledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

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

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.inputRef} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

主要区别

状态管理

• 受控组件：状态由 React 组件管理。
• 非受控组件：状态由 DOM 管理。

数据流

• 受控组件：数据从组件的状态流向输入元素。
• 非受控组件：数据通过 refs 从输入元素流向组件。

用例

• 受控组件：当您需要强制验证、有条件地禁用/启用输入或执行其他复杂交互时，首选受控组件。
• 非受控组件：适用于简单表单或需要与非 React 代码集成时。

延伸阅读

• React documentation on controlled and uncontrolled components
• React refs and the DOM

TL;DR

如果管理不当，在 React 中使用 Context 可能会导致性能问题。它可能导致使用 Context 的组件不必要的重新渲染，即使它们使用的 Context 部分没有改变。此外，过度使用 Context 进行状态管理会使代码更难理解和维护。谨慎使用 Context 并考虑使用 Redux 或 Zustand 等其他状态管理解决方案来满足更复杂的状态需求非常重要。

使用 React Context 的陷阱

性能问题

在 React 中使用 Context 的主要陷阱之一是潜在的性能问题。当 Context 值更改时，所有使用 Context 的组件都将重新渲染，即使它们不使用已更改的 Context 部分。这可能导致不必要的重新渲染并降低应用程序的性能。

示例

const MyContext = React.createContext();

function ParentComponent() {
  const [value, setValue] = React.useState(0);

  return (
    <MyContext.Provider value={value}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const value = React.useContext(MyContext);
  console.log('ChildComponent re-rendered');
  return <div>{value}</div>;
}

在此示例中，ChildComponent 将在 ParentComponent 中的 value 每次更改时重新渲染，即使 ChildComponent 不需要更新。

过度使用 Context

使用 Context 进行状态管理会使代码更难理解和维护。Context 最适合于不经常更改的全局状态，例如主题设置或用户身份验证状态。过度使用 Context 进行更复杂的状态管理会导致代码库混乱且难以理解。

调试困难

调试与 Context 相关的问题可能具有挑战性。由于 Context 更新可能会在多个组件中触发重新渲染，因此很难追踪错误或性能问题的根源。对于具有许多 Context 提供程序和使用者的较大应用程序来说尤其如此。

缺乏细粒度控制

Context 提供了一种在组件树中传递数据的方法，而无需在每个级别手动传递 props。但是，它缺乏对 Context 值更改时应重新渲染哪些组件的细粒度控制。如果管理不当，这可能导致性能瓶颈。

Context 的替代方案

对于更复杂的状态管理需求，请考虑使用 Redux、Zustand 或 Recoil 等其他状态管理解决方案。这些库提供了对状态更新的更细粒度控制，并且可以帮助避免与使用 Context 相关的一些陷阱。

延伸阅读

• React Context
• React memo Performance Optimization
• Redux
• Zustand
• Recoil

TL;DR

React 中的 Hooks 允许您使用状态和其他 React 功能，而无需编写类。它们使在组件之间重用有状态逻辑、提高代码可读性以及通过减少对生命周期方法的需求来简化代码库变得更容易。像 useState 和 useEffect 这样的 Hooks 通常用于管理函数组件中的状态和副作用。

使用 React Hooks 的好处

简化的状态管理

像 useState 这样的 Hooks 允许您将状态添加到函数组件，而无需将它们转换为类组件。这使得代码更简洁，更易于阅读。

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

提高代码可读性

Hooks 有助于将复杂的组件分解成更小、可重用的逻辑片段。这使得代码更模块化，更容易理解。

可重用逻辑

自定义 Hook 允许您跨多个组件提取和重用有状态逻辑。这促进了代码重用并减少了重复。

function useCustomHook() {
  const [state, setState] = useState(initialState);
  // Custom logic here
  return [state, setState];
}

减少对生命周期方法的需求

像 useEffect 这样的 Hooks 可以替换生命周期方法，例如 componentDidMount、componentDidUpdate 和 componentWillUnmount。这简化了组件生命周期管理。

useEffect(() => {
  // Side effect logic here
  return () => {
    // Cleanup logic here
  };
}, [dependencies]);

更好地关注分离

Hooks 允许您通过将相关逻辑分组在一起来分离关注点。这使得代码库更易于维护和调试。

增强测试

与类组件相比，具有 Hooks 的函数组件通常更容易测试。Hooks 可以在隔离状态下进行测试，使单元测试更简单。

延伸阅读

• React Hooks documentation
• Using the State Hook
• Using the Effect Hook
• Building Your Own Hooks

总结

React Hooks 有一些基本规则来确保它们正常工作。 始终在 React 函数的顶层调用 Hooks，切勿在循环、条件或嵌套函数内调用。 仅从 React 函数组件或自定义 Hooks 调用 Hooks。 这些规则确保 Hooks 保持正确的状态和生命周期行为。

React Hooks 的规则是什么？

始终在顶层调用 Hooks

Hooks 应该始终在 React 函数的顶层调用。 这意味着你不应该在循环、条件或嵌套函数内调用 Hooks。 此规则确保每次组件渲染时 Hooks 以相同的顺序调用，这对于维护正确的状态和生命周期行为至关重要。

// 正确
function MyComponent() {
  const [count, setCount] = useState(0);

  if (count > 0) {
    // 做一些事情
  }
}

// 不正确
function MyComponent() {
  if (someCondition) {
    const [count, setCount] = useState(0); // 这将破坏 Hooks 的规则
  }
}

仅从 React 函数组件或自定义 Hooks 调用 Hooks

Hooks 应该仅从 React 函数组件或自定义 Hooks 调用。 此规则确保 Hooks 在 React 可以管理其状态和生命周期的适当上下文中被使用。

// 正确
function MyComponent() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}

// 正确（自定义 Hook）
function useCustomHook() {
  const [state, setState] = useState(null);
  return [state, setState];
}

// 不正确
function regularFunction() {
  const [count, setCount] = useState(0); // 这将破坏 Hooks 的规则
}

使用 eslint-plugin-react-hooks linter

为了执行这些规则，你可以使用 eslint-plugin-react-hooks linter。 这个插件将帮助你识别和修复代码中 Hooks 规则的违规行为。

npm install eslint-plugin-react-hooks --save-dev

将插件添加到你的 ESLint 配置中：

{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error", // 检查 Hooks 的规则
    "react-hooks/exhaustive-deps": "warn" // 检查 effect 依赖项
  }
}

延伸阅读

• React hooks documentation
• Rules of hooks
• Using the eslint-plugin-react-hooks linter

TL;DR

useEffect 和 useLayoutEffect 是 React 钩子，用于处理函数组件中的副作用，但它们在时机和用例上有所不同：

• useEffect：在 DOM 绘制后异步运行。它适用于数据获取、订阅或日志记录等任务。
• useLayoutEffect：在 DOM 更改后但在浏览器绘制之前同步运行。将其用于测量 DOM 元素或将 UI 与 DOM 同步等任务。

代码示例：

import React, { useEffect, useLayoutEffect, useRef } from 'react';

function Example() {
  const ref = useRef();

  useEffect(() => {
    console.log('useEffect: Runs after DOM paint');
  });

  useLayoutEffect(() => {
    console.log('useLayoutEffect: Runs before DOM paint');
    console.log('Element width:', ref.current.offsetWidth);
  });

  return <div ref={ref}>Hello</div>;
}

什么是 useEffect？

useEffect 是一个 React 钩子，用于管理函数组件中的副作用。副作用包括获取数据、更新订阅或与浏览器的 DOM API 交互等操作。

• 它在 DOM 更新和绘制后异步运行。
• 它不会阻止浏览器更新 UI。
• 默认情况下，它在每次渲染后运行，但依赖项可以控制其执行。

代码示例

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    console.log('Component mounted or updated');
    return () => console.log('Cleanup on unmount or dependency change');
  }, []); // Runs only on mount and unmount

  return <div>Hello, World!</div>;
}

常见用例

• 从 API 获取数据
• 设置订阅（例如，WebSocket 连接）
• 日志记录或分析跟踪
• 添加和删除事件侦听器

什么是 useLayoutEffect？

useLayoutEffect 是一个类似于 useEffect 的 React 钩子，但它在时机上有所不同。它在 DOM 更改后并在浏览器绘制屏幕之前同步运行。

• 它适用于需要在绘制前访问 DOM 的任务。
• 它可以阻止渲染，因此应谨慎使用。

代码示例

import React, { useLayoutEffect, useRef } from 'react';

function Example() {
  const ref = useRef();

  useLayoutEffect(() => {
    console.log('Element dimensions:', ref.current.getBoundingClientRect());
  });

  return <div ref={ref}>Hello</div>;
}

常见用例

• 测量 DOM 元素（例如，用于动画或布局）
• 根据计算调整 DOM 属性或样式
• 修复 UI 同步问题

useEffect 和 useLayoutEffect 之间的主要区别

时机

• useEffect：在浏览器绘制 UI 后执行。
• useLayoutEffect：在浏览器绘制之前，DOM 更改后立即执行。

阻塞行为

• useEffect：非阻塞，异步运行。
• useLayoutEffect：阻塞，同步运行。

用例示例

• useEffect：获取数据、更新状态或添加事件监听器。
• useLayoutEffect：测量 DOM 元素、管理动画或解决布局问题。

延伸阅读

• React Hooks 文档
• React useEffect API 文档
• React useLayoutEffect API 文档
• useEffect 和 useLayoutEffect 之间的区别

TL;DR

React 中 setState() 的回调函数参数格式用于确保状态更新基于最新的状态和 props。当新状态依赖于之前的状态时，这一点尤其重要。您无需直接将对象传递给 setState()，而是传递一个函数，该函数将之前的状态和 props 作为参数，并返回新状态。

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment,
}));

React 中 setState() 的回调函数参数格式的目的

确保状态更新基于最新的状态

React 的 setState() 是异步的，这意味着可以出于性能原因将对 setState() 的多个调用批处理在一起。如果依赖当前状态来计算下一个状态，使用回调函数格式可确保您使用最新的状态。

语法

setState() 的回调函数格式将一个函数作为参数。此函数接收两个参数：prevState 和 props。它返回一个表示新状态的对象。

this.setState((prevState, props) => {
  return {
    counter: prevState.counter + props.increment,
  };
});

什么时候使用它

• 当新状态依赖于之前的状态时：如果需要根据当前状态更新状态，请使用回调函数格式以避免与异步状态更新相关的潜在问题。
• 当多个状态更新被批处理时：在多个 setState() 调用可能被批处理在一起的情况下，使用回调函数可确保每次更新都基于最新的状态。

示例

考虑一个计数器组件，其中状态更新取决于之前的状态：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
  }

  incrementCounter = () => {
    this.setState((prevState, props) => ({
      counter: prevState.counter + 1,
    }));
  };

  render() {
    return (
      <div>
        <p>Counter: {this.state.counter}</p>
        <button onClick={this.incrementCounter}>Increment</button>
      </div>
    );
  }
}

在此示例中，使用回调函数格式可确保正确递增 counter 状态，即使在短时间内多次调用 incrementCounter 也是如此。

延伸阅读

• React Docs: State: A Component's Memory
• React Docs: setState()
• React Docs: Responding to Events

TL;DR

useEffect 的依赖项数组决定了 effect 应该何时重新运行。如果数组为空，则 effect 仅在初始渲染后运行一次。如果它包含变量，则 effect 在任何这些变量更改时运行。如果省略，则 effect 在每次渲染后运行。

useEffect 的依赖项数组会影响什么？

useEffect 简介

React 中的 useEffect 钩子用于在函数组件中执行副作用。这些副作用可以包括数据获取、订阅或手动更改 DOM。useEffect 钩子接受两个参数：一个包含副作用逻辑的函数和一个可选的依赖项数组。

依赖项数组

依赖项数组是 useEffect 钩子的第二个参数。它是一个 effect 所依赖的值的数组。React 使用此数组来确定何时重新运行 effect。

useEffect(() => {
  // 在这里编写副作用逻辑
}, [dependency1, dependency2]);

依赖项数组如何影响 useEffect

1. 空依赖项数组 ([]):

   • effect 仅在初始渲染后运行一次。
   • 这类似于类组件中 componentDidMount 的行为。
   useEffect(() => {
     // 此代码仅在初始渲染后运行一次
   }, []);

2. 带有变量的依赖项数组:

   • effect 在初始渲染后运行，并在任何指定的依赖项更改时运行。
   • React 对依赖项进行浅层比较，以确定它们是否已更改。
   useEffect(() => {
     // 此代码在初始渲染后运行，并在 dependency1 或 dependency2 更改时运行
   }, [dependency1, dependency2]);

3. 没有依赖项数组:

   • effect 在每次渲染后运行。
   • 如果 effect 代价高昂，这可能会导致性能问题。
   useEffect(() => {
     // 此代码在每次渲染后运行
   });

常见陷阱

1. 过时的闭包:

   • 如果你在 effect 内部使用状态或 props，而没有将它们包含在依赖项数组中，你可能会得到过时的值。
   • 始终将 effect 所依赖的所有状态和 props 包含在依赖项数组中。
   const [count, setCount] = useState(0);
   
   useEffect(() => {
     const handle = setInterval(() => {
       console.log(count); // 如果 `count` 不在依赖项数组中，这可能会记录过时的值
     }, 1000);
   
     return () => clearInterval(handle);
   }, [count]); // 确保 `count` 包含在依赖项数组中

2. 函数作为依赖项:

   • 函数在每次渲染时都会重新创建，因此将它们包含在依赖项数组中可能会导致 effect 运行的频率超过必要次数。
   • 如果需要将函数包含在依赖项数组中，请使用 useCallback 来记忆化函数。
   const handleClick = useCallback(() => {
     // 处理点击事件
   }, []);
   
   useEffect(() => {
     // 此 effect 不会不必要地重新运行，因为 `handleClick` 已被记忆化
   }, [handleClick]);

延伸阅读

• React Docs: Using the Effect Hook
• React Docs: Rules of Hooks
• Overreacted: A Complete Guide to useEffect

TL;DR

React 中的 useRef 钩子用于创建一个在渲染之间保持不变的可变对象。它可用于直接访问和操作 DOM 元素，存储在更新时不导致重新渲染的可变值，以及保留对值的引用而不触发重新渲染。例如，您可以使用 useRef 来聚焦输入元素：

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

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  useEffect(() => {
    inputEl.current.focus();
  }, []);

  return <input ref={inputEl} type="text" />;
}

React 中的 useRef 钩子是什么？应该在什么时候使用它？

useRef 简介

React 中的 useRef 钩子是一个函数，它返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数 (initialValue)。返回的对象将在组件的整个生命周期内保持不变。

useRef 的关键用例

访问和操作 DOM 元素

useRef 的主要用例之一是直接访问和操作 DOM 元素。当您需要以 React 的声明式方法无法轻松实现的方式与 DOM 交互时，这特别有用。

例子：

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

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  useEffect(() => {
    inputEl.current.focus();
  }, []);

  return <input ref={inputEl} type="text" />;
}

在此示例中，useRef 钩子用于创建对输入元素的引用，而 useEffect 钩子用于在组件挂载时聚焦输入元素。

存储可变值

useRef 也可以用于存储在更新时不会导致重新渲染的可变值。这对于跟踪随时间变化但不需要触发重新渲染的值很有用。

例子：

import React, { useRef } from 'react';

function Timer() {
  const count = useRef(0);

  const increment = () => {
    count.current += 1;
    console.log(count.current);
  };

  return <button onClick={increment}>Increment</button>;
}

在此示例中，count 变量存储在 useRef 对象中，并且它的值递增，而不会导致组件重新渲染。

保留对值的引用

useRef 可用于保留对值的引用，而不会触发重新渲染。这对于存储需要在渲染之间保持不变但不需要在更改时导致重新渲染的值很有用。

例子：

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

function Example() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  return (
    <div>
      <h1>Now: {count}</h1>
      <h2>Before: {prevCountRef.current}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

在这个例子中，prevCountRef 用于保持对 count 前一个值的引用，而不会导致重新渲染。

延伸阅读

• React documentation on useRef
• Using the useRef hook

TL;DR

React 中的 useCallback Hook 用于记忆函数，防止它们在每次渲染时被重新创建。当将回调传递给依赖于引用相等性以防止不必要渲染的优化子组件时，这特别有用。当您有一个作为 prop 传递给子组件的函数，并且您希望避免子组件不必要地重新渲染时，应该使用 useCallback。

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

React 中的 useCallback Hook 是什么？应该在什么时候使用？

什么是 useCallback？

useCallback Hook 是一个 React Hook，它返回一个记忆化的回调函数，该函数仅在其中一个依赖项发生更改时才会更改。它对于通过防止不必要的函数重新创建来优化性能非常有用。

语法

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

什么时候应该使用 useCallback？

防止不必要的重新渲染

当您将一个函数作为 prop 传递给子组件时，即使函数本身没有改变，子组件也可能在每次父组件重新渲染时重新渲染。使用 useCallback 可确保函数引用保持不变，只要其依赖项没有改变，从而防止不必要的重新渲染。

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return <ChildComponent onClick={handleClick} />;
};

const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Click me</button>;
});

优化性能

在复杂的应用程序中，在每次渲染时重新创建函数在性能方面可能代价高昂。通过使用 useCallback，您可以避免这种开销，并使您的应用程序更有效率。

注意事项

• 过度使用：过度使用 useCallback 可能会导致代码更复杂，并且不一定总能提高性能。应谨慎使用。
• 依赖项：确保所有依赖项都在依赖项数组中正确指定。缺少依赖项可能会导致陈旧的闭包和错误。

延伸阅读

• React documentation on useCallback
• React memoization techniques
• Understanding React's useCallback and useMemo

TL;DR

React 中的 useMemo Hook 用于记忆昂贵的计算，以便仅在其中一个依赖项发生更改时才重新计算它们。 这可以通过避免不必要的重新计算来提高性能。 当您有一个计算量很大的函数，并且不需要在每次渲染时运行它时，您应该使用 useMemo。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

React 中的 useMemo Hook 是什么？应该在什么时候使用它？

什么是 useMemo？

useMemo Hook 是一个内置的 React Hook，它允许您记忆函数的计算结果。 这意味着该函数仅在其依赖项之一发生更改时才会重新执行。 useMemo 的主要目的是通过防止不必要的重新计算来优化性能。

语法

useMemo 的语法如下：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• 第一个参数是一个返回您要记忆的值的函数。
• 第二个参数是一个依赖项数组。 仅当这些依赖项之一发生更改时，才会重新计算记忆值。

什么时候应该使用它？

昂贵的计算

如果您有一个执行计算量很大的计算的函数，则可以使用 useMemo 确保仅在必要时才执行此计算。

const expensiveCalculation = (num) => {
  // Some expensive calculation
  return num * 2;
};

const MyComponent = ({ number }) => {
  const memoizedValue = useMemo(() => expensiveCalculation(number), [number]);

  return <div>{memoizedValue}</div>;
};

避免不必要的渲染

useMemo 还可以用于避免子组件的不必要渲染。 如果子组件依赖于计算量很大的值，则可以使用 useMemo 确保仅在必要时才重新计算该值。

const MyComponent = ({ items }) => {
  const sortedItems = useMemo(() => {
    return items.sort((a, b) => a - b);
  }, [items]);

  return <ChildComponent sortedItems={sortedItems} />;
};

注意事项

• 过度使用：过度使用 useMemo 可能会导致代码更复杂，而没有显着的性能优势。 应谨慎使用。
• 依赖项：确保正确指定所有依赖项。 缺少依赖项可能会导致值过时，而额外的依赖项可能会导致不必要的重新计算。

延伸阅读

• React documentation on useMemo
• When to useMemo and useCallback by Kent C. Dodds

TL;DR

React 中的 useReducer Hook 用于在函数组件中管理复杂的 state 逻辑。它是 useState 的替代方案，当 state 具有多个子值或下一个 state 依赖于前一个 state 时，它特别有用。它接受一个 reducer 函数和一个初始 state 作为参数，并返回当前 state 和一个 dispatch 函数。

const [state, dispatch] = useReducer(reducer, initialState);

当您有涉及多个子值的复杂 state 逻辑，或者下一个 state 依赖于前一个 state 时，请使用 useReducer。

React 中的 useReducer Hook 是什么？应该在什么时候使用它？

useReducer 简介

useReducer Hook 是一个 React Hook，用于在函数组件中管理 state。它是 useState Hook 的替代方案，特别适用于管理更复杂的 state 逻辑。useReducer Hook 类似于 JavaScript 数组中的 reduce 函数，您可以使用一个 reducer 函数来确定 state 应该如何响应操作而改变。

语法

useReducer Hook 接受两个参数：一个 reducer 函数和一个初始 state。它返回一个包含当前 state 和一个 dispatch 函数的数组。

const [state, dispatch] = useReducer(reducer, initialState);

Reducer 函数

reducer 函数是一个纯函数，它接受当前 state 和一个 action 作为参数，并返回新的 state。action 是一个对象，通常具有一个 type 属性和一个可选的 payload。

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

使用示例

这是一个使用 useReducer 管理计数器 state 的简单示例：

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

export default Counter;

什么时候使用 useReducer

• 复杂的 state 逻辑：当您有涉及多个子值的复杂 state 逻辑，或者下一个 state 依赖于前一个 state 时，请使用 useReducer。
• 状态管理：当您需要更可预测的状态管理模式（类似于 Redux）时，它很有用。
• 性能优化：useReducer 可以通过避免不必要的重新渲染来帮助优化某些情况下的性能。

延伸阅读

• React documentation on useReducer
• Using the useReducer hook

TL;DR

React 中的 useId Hook 用于为组件内的元素生成唯一的 ID。这对于可访问性目的特别有用，例如将表单输入与其标签链接起来。它确保 ID 在整个应用程序中是唯一的，即使组件被多次渲染。

import { useId } from 'react';

function MyComponent() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>Name:</label>
      <input id={id} type="text" />
    </div>
  );
}

React 中的 useId Hook 是什么？应该在什么时候使用？

useId 简介

useId Hook 是 React 18 中引入的内置 React Hook。它旨在生成可在组件内使用的唯一 ID。这对于确保 ID 在整个应用程序中是唯一的特别有用，即使组件被多次渲染。

什么时候使用 useId

可访问性

useId 的主要用例之一是改善可访问性。例如，在创建表单元素时，使用标签上的 htmlFor 属性和输入上的 id 属性将标签链接到其对应的输入非常重要。useId Hook 确保这些 ID 是唯一的，从而防止任何潜在的冲突。

import { useId } from 'react';

function MyComponent() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>Name:</label>
      <input id={id} type="text" />
    </div>
  );
}

动态组件

当您有动态渲染或多次渲染的组件时，使用 useId 可确保组件的每个实例都具有唯一的 ID。这可以防止多个元素最终具有相同的 ID，这可能会导致可访问性和 JavaScript 行为出现问题。

import { useId } from 'react';

function DynamicComponent() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>Dynamic Input:</label>
      <input id={id} type="text" />
    </div>
  );
}

function App() {
  return (
    <div>
      <DynamicComponent />
      <DynamicComponent />
    </div>
  );
}

useId 的工作原理

useId Hook 生成可用作 ID 的唯一字符串。此字符串在整个应用程序中是唯一的，即使组件被多次渲染，也能确保不会发生冲突。该 Hook 不接受任何参数并返回一个字符串。

import { useId } from 'react';

function ExampleComponent() {
  const id = useId();
  console.log(id); // Outputs a unique ID string
  return <div id={id}>Unique ID Component</div>;
}

最佳实践

• 用于可访问性：将标签链接到输入时，始终使用 useId 以确保可访问性。
• 避免硬编码 ID：不要硬编码 ID，而是使用 useId 动态生成它们。
• 一致使用：在整个应用程序中一致地使用 useId 以避免 ID 冲突。

延伸阅读

• React documentation on useId
• MDN Web Docs on accessibility
• React 18 release notes

总结

在 React 中，重新渲染是指组件响应状态或 props 的变化而更新其在 DOM 中的输出的过程。当组件的状态或 props 发生变化时，React 会触发重新渲染，以确保 UI 反映最新的数据。此过程涉及再次调用组件的 render 方法以生成新的虚拟 DOM，然后将其与之前的虚拟 DOM 进行比较，以确定更新实际 DOM 所需的最小更改集。

React 中重新渲染是什么意思？

理解重新渲染

在 React 中，重新渲染是指组件响应其状态或 props 的变化而更新其在 DOM 中的输出的过程。这确保了 UI 始终与底层数据同步。

什么时候会发生重新渲染？

重新渲染发生在以下情况下：

• 当组件使用 setState 更改状态时
• 当组件从其父组件接收到新的 props 时
• 当父组件重新渲染时，导致其子组件也重新渲染

重新渲染过程

1. 状态或 props 更改：当组件的状态或 props 更改时，React 会为该组件安排重新渲染。
2. render 方法：React 调用组件的 render 方法以生成新的虚拟 DOM 树。
3. 虚拟 DOM 比较：React 使用 diffing 算法将新的虚拟 DOM 树与之前的虚拟 DOM 树进行比较。
4. DOM 更新：React 计算所需的最小更改集并相应地更新实际 DOM。

示例

这是一个简单的示例，用于说明重新渲染：

import React, { useState } from 'react';

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

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

在此示例中：

• Counter 组件有一个状态变量 count。
• 当单击按钮时，setCount 会更新状态，从而触发重新渲染。
• 再次调用 render 方法，并将新的虚拟 DOM 与之前的虚拟 DOM 进行比较。
• React 更新实际 DOM 以反映新的计数。

性能考虑

重新渲染可能很昂贵，尤其对于复杂的组件或大型应用程序而言。为了优化性能，React 提供了几种技术：

• PureComponent：一个基类，它实现了 props 和 state 的浅层比较，以防止不必要的重新渲染。
• React.memo：一个高阶组件，它会记忆组件 render 的结果，以避免在 props 未更改的情况下重新渲染。
• useMemo 和 useCallback：用于记忆值和函数的 Hook，以防止不必要的重新渲染。

延伸阅读

• React documentation on rendering
• React documentation on state
• React.memo

TL;DR

React Fragments 用于对多个元素进行分组，而无需向 DOM 添加额外的节点。当您希望从组件的 render 方法返回多个元素，而无需将它们包裹在额外的 HTML 元素中时，这非常有用。您可以使用简写语法 <>...</> 或 React.Fragment 语法。

return (
  <>
    <ChildComponent1 />
    <ChildComponent2 />
  </>
);

React Fragments 有什么用？

对多个元素进行分组

React Fragments 允许您对多个元素进行分组，而无需向 DOM 添加额外的节点。当您希望从组件的 render 方法返回多个元素，但又不想引入不必要的包装元素时，这特别有用。

避免不必要的 DOM 节点

使用 React Fragments 有助于避免不必要的 DOM 节点，这对于性能和维护更清晰的 DOM 结构是有益的。这在复杂应用程序中尤为重要，因为额外的节点可能导致内存使用增加和渲染时间变慢。

语法

使用 React Fragments 有两种方法：

1. 简写语法：这是使用 fragments 最简洁的方式。它使用空标签 <>...</>。

   return (
     <>
       <ChildComponent1 />
       <ChildComponent2 />
     </>
   );

2. 完整语法：这使用 React.Fragment，如果您需要向 fragment 添加键，这可能很有用。

   return (
     <React.Fragment>
       <ChildComponent1 />
       <ChildComponent2 />
     </React.Fragment>
   );

向 fragments 添加键

如果您需要向 fragment 中的元素添加键，则必须使用完整的 React.Fragment 语法。这在渲染元素列表时很有用。

return (
  <>
    {items.map((item) => (
      <React.Fragment key={item.id}>
        <ChildComponent />
      </React.Fragment>
    ))}
  </>
);

用例

• 从组件返回多个元素：当组件需要返回多个兄弟元素时，使用 fragment 可以帮助避免不必要的包装元素。
• 渲染列表：渲染元素列表时，可以使用 fragments 对列表项进行分组，而无需向 DOM 添加额外的节点。
• 条件渲染：当有条件地渲染多个元素时，fragments 可以帮助保持 DOM 结构的整洁。

延伸阅读

• React Fragments - Official Documentation

TL;DR

React 中的 forwardRef() 用于通过组件将 ref 传递给其子组件之一。当您需要直接从父组件访问 DOM 元素或子组件的实例时，这非常有用。您使用 forwardRef() 包装您的函数式组件，并使用 ref 参数将 ref 转发到所需的子元素。

import React, { forwardRef } from 'react';

const MyComponent = forwardRef((props, ref) => <input ref={ref} {...props} />);

React 中的 forwardRef() 有什么作用？

简介

在 React 中，forwardRef() 是一个高阶函数，它允许您通过组件将 ref 转发给其子组件之一。当您需要直接从父组件访问 DOM 元素或子组件的实例时，这特别有用。

为什么使用 forwardRef()？

在以下几种情况下，forwardRef() 很有用：

• 访问 DOM 元素：当您需要直接操作 DOM 元素时，例如聚焦输入字段。
• 与子组件交互：当您需要调用子组件实例的方法或访问其属性时。

如何使用 forwardRef()

要使用 forwardRef()，您需要使用它包装您的函数式组件，并使用 ref 参数将 ref 转发到所需的子元素。

示例

这是一个简单的示例，演示如何使用 forwardRef()：

import React, { forwardRef, useRef } from 'react';

// 定义一个函数式组件并用 forwardRef 包装它
const MyInput = forwardRef((props, ref) => <input ref={ref} {...props} />);

const ParentComponent = () => {
  const inputRef = useRef(null);

  const focusInput = () => {
    // 访问 input 元素并聚焦它
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <MyInput ref={inputRef} placeholder="Type here..." />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

export default ParentComponent;

在此示例中：

1. MyInput 是一个用 forwardRef() 包装的函数式组件。
2. ref 参数被转发到 MyInput 内部的 input 元素。
3. 在 ParentComponent 中，使用 useRef() 创建一个 ref (inputRef)。
4. inputRef 被传递给 MyInput，允许父组件直接访问 input 元素。
5. 当单击按钮时，focusInput 函数使用 ref 来聚焦 input 元素。

重要注意事项

• 仅限函数式组件：forwardRef() 与函数式组件一起使用。类组件可以直接使用 ref，而无需 forwardRef()。
• Ref 转发：确保 ref 被转发到 DOM 元素或类组件实例，而不是另一个函数式组件。

延伸阅读

• React documentation on forwardRef()
• Using the useRef Hook
• Refs and the DOM

TL;DR

要在 React 中重置组件的状态，您可以将状态设置回其初始值。这可以通过定义初始状态，然后使用 setState 函数来重置它来实现。例如，如果您有一个像这样的状态对象：

const [state, setState] = useState(initialState);

您可以通过调用以下方法来重置它：

setState(initialState);

如何在 React 中重置组件的状态？

使用带有钩子的函数式组件

在函数式组件中，您可以使用 useState 钩子来管理状态。要重置状态，您可以简单地使用初始状态值调用 setState 函数。

示例

import React, { useState } from 'react';

const MyComponent = () => {
  const initialState = { count: 0, text: '' };
  const [state, setState] = useState(initialState);

  const resetState = () => {
    setState(initialState);
  };

  return (
    <div>
      <p>Count: {state.count}</p>
      <p>Text: {state.text}</p>
      <button onClick={resetState}>Reset</button>
    </div>
  );
};

export default MyComponent;

使用类组件

在类组件中，您可以通过使用初始状态值调用 this.setState 来重置状态。

示例

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.initialState = { count: 0, text: '' };
    this.state = this.initialState;
  }

  resetState = () => {
    this.setState(this.initialState);
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <p>Text: {this.state.text}</p>
        <button onClick={this.resetState}>Reset</button>
      </div>
    );
  }
}

export default MyComponent;