（React数据管理）前端八股文修炼Day7

一 setState 调用的原理？调用之后发生了什么​？是同步还是异步？

在React中，setState是一个非常重要的函数，用于更新组件的状态，并触发组件的重新渲染。理解setState的工作原理对于编写高效的React应用程序至关重要。以下是setState调用后发生的事情的概述：

setState的调用原理

1. 更新状态：当你调用setState时，你实际上是在安排一个更新操作。你传递给setState的对象会被合并到组件的当前状态中。

2. 异步操作：setState通常是异步的。这意味着在调用setState之后，状态不会立即更新。React会将setState操作批量处理以优化性能。因此，如果你在调用setState之后立即读取状态，你可能会得到未更新的值。

3. 重新渲染组件：状态的更新会导致组件及其子组件的重新渲染，但这并不是立即发生的。React会在其虚拟DOM中应用这些更改，并计算与上一次渲染相比的差异。

4. 调用生命周期方法：如果使用的是类组件，更新状态后可能会触发一些生命周期方法，如shouldComponentUpdate, componentWillUpdate, componentDidUpdate等。

调用之后发生了什么

1. 调度更新：调用setState之后，React 会将你的更新排入队列，并且稍后才执行实际的更新。

2. 组件重绘：React 决定何时将变化应用到DOM，这通常发生在微任务和JavaScript执行周期的末尾。在这个过程中，它会对虚拟DOM进行diff运算，并更新DOM树上需要变化的部分。

3. 批处理：React会批处理多个setState调用，以减少不必要的渲染和性能消耗。这意味着在事件处理器或生命周期方法中的多个setState调用可能会被合并为一个更新。

同步还是异步

正如前面提到的，setState通常表现为异步的，因为React会在内部批处理和优化更新。然而，它实际上并不是真正意义上的异步操作；它不会返回Promise，也不能用async/await来处理。

但是，有一些情况下，React 可能会同步执行setState：

• 在生命周期方法如componentDidMount和componentDidUpdate内部，setState更新将会被批处理，但仍然是在同一个事件循环中同步地处理。
• 在原生DOM事件处理函数中，如果你直接使用了原生DOM事件绑定（如直接使用addEventListener而不是React的onClick），则setState调用会同步更新状态。

如果你需要在setState后立即获取更新后的状态或执行操作，你可以使用setState的回调函数：

this.setState({ key: value }, () => {
  // 这里可以安全地访问更新后的状态
  console.log(this.state.key);
});
1
2
3
4

这个回调函数会在组件重新渲染和更新后触发。这样确保了您在回调中获得的状态是最新的。

二 React中的setState批量更新的过程是什么

在React中，setState的批量更新是一个优化机制，用于提升应用的性能和响应能力。批量更新意味着React会将短时间内的多次setState调用合并成一个更新操作，而不是对每次调用都执行一次完整的组件更新周期。下面是这个过程的概述：

批量更新的触发

React的批量更新通常在React控制的事件处理器（如用户交互事件）和生命周期方法中自动发生。这意味着，在这些情况下，即使你连续多次调用setState，React也可能将它们合并为一次更新，以减少不必要的渲染和提升性能。

过程概述

1. 调用setState：当setState被调用时，而不是立即更新组件的状态和DOM，React会将状态更新排入一个内部队列中。

2. 异步处理：React将继续执行当前的代码块，这可能包括更多的setState调用。这些调用也会被添加到队列中。React并不会立即处理这个队列。

3. 事件循环结束：一旦JavaScript调用栈清空，比如事件处理器执行完成后，React将开始处理批量更新。这通常在浏览器准备重新绘制之前的微任务阶段发生。

4. 状态合并：React遍历队列，将所有的状态更新合并。对于每个组件，这意味着合并多个setState调用中的对象，以计算出组件的最终状态。

5. 组件更新：有了最终的状态后，React开始组件的更新过程。这包括调用render方法，比较新旧虚拟DOM树，计算出需要做的最小DOM更新，然后在浏览器的下一次重绘前应用这些DOM更新。

异步行为的理解

虽然setState的批量更新行为通常被描述为“异步”，但这并不意味着它使用了JavaScript的异步功能（如Promises或async/await）。相反，它指的是更新不会立即处理，而是延迟到一个更合适的时机，以便进行批量处理。

案例外

在某些情况下，React不会批量更新setState调用。例如，在setTimeout、setInterval、原生事件处理器或异步操作的回调中调用setState时，每次调用都会立即触发组件更新，而不会进行批处理。为了在这些情况下实现批量更新，React 16.8引入了unstable_batchedUpdates方法，而在React 18中，通过新的并发特性（如startTransition），React提供了更自然的方式来处理这种异步更新。

三 React中有使用过getDefaultProps吗

在React的早期版本中，getDefaultProps是创建类组件时定义默认props的一种方式。这个方法是React组件生命周期的一部分，用于在组件类首次创建时设置默认的props值。

然而，随着React的发展，特别是自从引入了ES6类和函数组件以及Hooks之后，getDefaultProps的使用逐渐变得不再必要，也不再推荐使用。

对于使用ES6类的React组件，设置默认props的推荐方式是在类本身上设置defaultProps属性：

class MyComponent extends React.Component {
  // ...其他方法和生命周期函数
}

// 设置默认props
MyComponent.defaultProps = {
  myProp: 'defaultValue'
};
1
2
3
4
5
6
7
8

而对于函数组件，你可以直接在参数解构中为props设置默认值：

function MyComponent({ myProp = 'defaultValue' }) {
  // ...组件逻辑
}
1
2
3

在React 16.3版本之后，getDefaultProps已经不被推荐使用，尤其是在新的代码库中。而在React函数组件中，它根本就不适用。随着Hooks的引入（特别是自从React 16.8版本引入useState和其他Hooks之后），函数组件变得更加强大和流行，成为创建组件的首选方式。

因此，虽然getDefaultProps确实存在于React的早期版本中，它目前不再是设置默认props的推荐方法，你应该使用defaultProps属性或函数组件中的参数默认值。

四 React中setState的第二个参数作用是什么

在React中，setState方法用于更新组件的状态，并触发重新渲染。setState接受两个参数：第一个参数是要更新的状态（可以是对象或者一个函数），第二个参数是一个可选的回调函数，它会在setState操作完成并且组件重新渲染后被调用。

第二个参数的作用

第二个参数的主要作用是提供一种方式，让你能在状态更新和组件渲染之后执行某些代码。由于setState是一个异步操作，直接在setState调用之后读取状态可能得不到预期结果，因为此时状态可能还没有更新。通过使用setState的回调函数，你可以确保在状态更新并且组件完成渲染之后执行特定的操作。

示例

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

  handleClick = () => {
    this.setState(
      { count: this.state.count + 1 },
      () => {
        // 这个回调函数会在状态更新和组件重新渲染之后执行
        console.log('Count has been updated to:', this.state.count);
      }
    );
  };

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在上述示例中，每次点击按钮时，都会增加计数。通过在setState调用中提供一个回调函数，我们可以确保在计数更新并且组件完成重新渲染后输出新的计数值。

注意点

• 尽管使用setState的回调函数可以确保操作是在状态更新和组件渲染之后执行的，但过度依赖这种回调可能会使代码变得难以理解和维护。在可能的情况下，考虑使用生命周期方法（如componentDidUpdate）或Hooks（如useEffect）来替代。
• 在React的函数组件中，由于引入了Hooks，通常会使用useState和useEffectHooks来代替setState，在这种情况下，可以利用useEffect的依赖项数组来实现类似的功能，而不需要回调函数。

五 React中的setState和replaceState的区别是什么

在讨论setState和replaceState之间的区别之前，重要的是要指出，replaceState不是React类组件API的一部分。你可能是在提到React的早期或其他库的API时遇到的replaceState。React的官方API中，常用的是setState方法，而replaceState并没有被包括在现代React版本中。不过，让我们深入了解一下你可能遇到的概念。

setState

在React组件中，setState是用来更新组件的状态的方法，并触发组件的重新渲染。setState可以接受一个对象或者一个函数作为参数。当传递一个对象时，这个对象表示状态的一部分将被合并到当前状态中。这意味着只需要提供要更新的状态字段，而不是整个状态对象。如果需要基于当前状态计算新状态，可以给setState传递一个函数。

replaceState（在某些早期或特定库中）

replaceState方法曾经是React组件API的一部分，但很早以前就被弃用并从React的核心API中移除了。当replaceState被使用时，它的作用是完全替换组件的状态，而不是将新状态合并到旧状态中，这与setState形成对比。replaceState直接接受一个新的状态对象作为参数，并使其成为组件的新状态。使用replaceState时，原先的状态会被完全覆盖，而不保留任何之前的状态值。

现代React中的类似行为

虽然replaceState不再是React API的一部分，但你仍然可以通过setState实现类似的行为。如果你想要替换而不是合并状态，可以通过setState传递一个返回新完整状态对象的函数参数来实现：

this.setState((prevState, props) => {
  // 返回一个对象，这个对象将成为新的状态
  return { /* 完整的新状态 */ };
});
1
2
3
4

使用这种方式，你可以控制状态的更新逻辑，包括完全替换状态而不保留任何旧状态值。

总结

最重要的是要记住，replaceState是React早期API的一部分，现代React应用中不再使用。相反，setState提供了灵活的方式来更新组件的状态，无论是部分更新还是完全替换状态。在实际开发中，理解和正确使用setState是非常重要的。

六 在React中组件的this.state和setState有什么区别

在React中，组件的this.state和setState()起着不同但互补的角色。

this.state

this.state是组件内部状态的表示，它是一个对象。这个状态对象包含了组件需要跟踪的数据。当组件的状态数据需要变化时，你应该使用setState()来更新它。

例如：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0 // 初始状态
    };
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

在上述代码中，this.state用于初始化组件状态。

setState()

setState()是React组件中用来异步更新组件状态的方法。当需要改变组件的状态时，你应该调用setState()，而不是直接修改this.state，因为后者不会触发组件的重新渲染。

// 正确的使用方式
this.setState({ count: this.state.count + 1 });

// 错误的使用方式 - 直接修改状态，这不会触发重新渲染
this.state.count = this.state.count + 1;
1
2
3
4
5

setState()可以接受一个对象作为参数，指示要更新的状态，或者一个接收前一个状态和当前的props作为参数的函数，返回一个状态对象。当状态更新完成并且组件重新渲染后，如果有需要，你可以提供一个回调函数作为setState的第二个参数。

区别和联系：

1. this.state是当前状态的快照，而setState()是一个用于更新状态的函数。
2. 直接修改this.state不会触发组件重新渲染，而setState()会。
3. setState()是异步的，它可能会批量处理多个状态更新，以优化性能。
4. 通常情况下，你应该总是使用setState()来更新状态，而不是直接修改this.state。

了解这些区别是很重要的，因为这关系到React的渲染更新机制，以及如何正确地管理组件的内部状态。直接修改this.state可能会导致不可预测的行为，因为React底层优化可能会被破坏，导致更新不一致或渲染问题。

七 state 是怎么注入到组件的，从 reducer 到组件经历了什么样的过程

在React及其生态系统中，特别是当使用如Redux这样的状态管理库时，state是如何从reducer注入到组件中的过程，是一个涉及多个步骤的过程。下面是一个概览，它将帮助你理解整个流程：

1. 定义Reducer

reducer是一个函数，它接收当前的state和一个action作为参数，并返回新的state。在Redux中，你通常会为应用的不同部分定义多个reducer，然后使用combineReducers来合并它们成一个根reducer。

2. 创建Store

使用根reducer，你通过调用createStore(rootReducer)来创建一个Redux store。这个store负责管理整个应用的状态。

3. 提供Store

为了让React组件能够访问Redux store中的状态，你需要使用<Provider>组件（来自react-redux库）包裹你的应用组件树，并将store作为prop传递给Provider。这样，应用中的任何组件都可以通过connect函数或useSelector钩子（在使用函数组件时）访问到store中的状态。

4. 连接组件

对于类组件，使用connect函数将组件连接到Redux store。connect接受两个参数：mapStateToProps和mapDispatchToProps。mapStateToProps是一个函数，它告诉Redux这个组件需要访问store中的哪些状态；mapDispatchToProps是一个函数或对象，它定义了组件如何分发actions来更新状态。

对于函数组件，你可以使用useSelector钩子来选择store中的状态片段，并使用useDispatch钩子来分发actions。

5. State注入组件

通过以上步骤，Redux store中的状态就可以注入到React组件中了。对于通过connect连接的组件，store中的状态片段（通过mapStateToProps选择）会作为props传递给组件；而对于使用useSelector的函数组件，选中的状态片段将直接在组件内部可用。

6. 响应Actions

当应用分发一个action时（例如，用户触发一个动作），它会通过store传递给根reducer，reducer根据action的类型和负载（payload）来更新状态。状态的更新会触发订阅了这部分状态的组件重新渲染，以反映最新的状态。

总结

这个过程保证了Redux管理的状态可以以可预测的方式更新，并且这些更新能够反映到React组件中。通过这种方式，Redux提供了一种在React应用中管理全局状态的强大工具。

八 React组件的state和props有什么区别

在React中，组件的state和props是两种不同的数据形式，它们共同控制着组件的行为和呈现方式。以下是它们之间的主要区别：

props (Properties)

• 不可变性：props是父组件传递给子组件的数据，且子组件不能修改这些数据。如果你想要在子组件内部改变传入的props，你需要将其转换成组件自己的state。
• 用途：props用于组件间的通信和数据传递。它们让组件复用成为可能，因为可以将不同的数据作为props传递给同一组件，使得组件表现不同的行为。
• 控制：props通常用于定义组件应当如何表现，而不是组件本身的状态。

state

• 可变性：state是组件内部的状态数据，它可以在组件内部被改变。state的更新通常会引起组件的重新渲染。
• 用途：state用于声明应用中随时间可能会改变的数据。当应用需要响应用户输入、服务器请求或时间推移等操作时使用state。
• 控制：state是局限于当前组件的，它不应该直接从外部修改，而是通过组件的this.setState()方法进行更新。

总结

• props由父组件传递给子组件，主要用于组件的配置。
• state由组件自身维护，用于响应用户输入或系统事件，以产生动态和交互式的UI。

在React的函数组件中，使用useState钩子来创建可变的状态，而props仍然是传递给这些组件的不可变数据。在类组件中，this.props和this.state分别用于访问这两种数据。

理解state和props的区别对于构建可预测的React应用程序至关重要，因为它们决定了组件如何创建交互并且如何与其他组件共享数据。

九 在React中组件的props改变时更新组件的有哪些方法

在React中，组件的props变化时，通常会触发组件的重新渲染。在类组件中，你可以使用特定的生命周期方法来响应props的变化，而在函数组件中，由于没有生命周期方法，通常会通过React的钩子（Hooks）来处理。下面是一些主要的方法或钩子：

类组件中的生命周期方法：

1. componentWillReceiveProps (不推荐使用)：在新版的React中，这个生命周期方法已被弃用，不建议使用。
2. static getDerivedStateFromProps(nextProps, prevState)：在props变化时被调用，并且在render方法之前。该方法必须返回一个对象来更新状态，或者返回null来表示新的props不需要更新任何状态。
3. shouldComponentUpdate(nextProps, nextState)：这个方法允许你决定当前的props或state变化是否应该触发重新渲染。返回true表示允许重新渲染，返回false则阻止渲染。
4. componentDidUpdate(prevProps, prevState, snapshot)：这个方法在组件更新后被调用，可用于执行例如网络请求或DOM操作的操作。

函数组件中的钩子：

1. useState：使用useState钩子可以在组件中声明状态变量。当props变化时，你可以通过调用设置状态的函数来更新状态，这将导致组件重新渲染。
2. useEffect：这个钩子让你可以在组件中执行副作用操作。你可以利用useEffect来处理props的变化，就像在类组件中使用componentDidUpdate一样。通过给useEffect添加依赖数组，你可以控制它仅在特定的props变化时执行。
3. useMemo和useCallback：这些钩子可以帮助你避免在组件每次渲染时都进行昂贵的计算。通过将props作为依赖项，你可以仅在这些props改变时，重新计算记忆化的值或回调函数。

React Hooks和Props的关系：

• useEffect：当你想要在props变化时执行某些操作（例如数据获取或手动DOM操作），你应该使用useEffect钩子，并将变化的props作为依赖项传递。

  useEffect(() => {
    // 执行依赖于props变化的操作
  }, [props]); // 只有当props变化时才执行
  1
  2
  3

• useMemo和useCallback：当你希望仅在某些props变化时重新计算值或函数时，可以使用这些钩子。

  const memoizedValue = useMemo(() => computeExpensiveValue(props), [props]);
  const memoizedCallback = useCallback(() => {
    doSomething(props);
  }, [props]);
  1
  2
  3
  4

通过以上方法或钩子，React组件可以有效地响应props的改变并按需更新或执行其他操作。在函数组件中使用钩子已经成为更常见的模式，因为它们可以更简洁和直观地管理组件的生命周期和副作用。

十 React中的props为什么是只读的

在React中，props（属性）是组件之间通信的一种方式，父组件可以通过props向子组件传递数据。props被设计为只读的，出于以下几个原因：

1. 单向数据流

React 坚持单向数据流的原则，数据应该有一个可预测的流动方向。这使得组件体系更易于理解和维护。在这个体系中，props是从父组件流向子组件的，如果子组件能够修改props，这将打破单向数据流的规则，使得数据流动变得难以追踪。

2. 组件的可重用性

props的不可变性提高了组件的可重用性。组件可以被认为是纯函数，它们不会尝试改变输入的数据，只是根据输入的props和内部的state来产生UI。如果组件可以修改自己的props，它们的行为就会变得不可预测，这反过来会降低组件的可重用性。

3. 性能优化

由于props是不可变的，React可以轻松确定何时重新渲染组件。如果组件的props或state没有变化，React可能会跳过渲染以提高性能。如果props可以被修改，React则需要进行额外的工作来确定是否需要重新渲染组件。

4. 易于调试

不可变的props使得调试更为容易。当你查看一个组件时，你可以确信它的props是由父组件提供的，没有在组件内部被改变。这简化了问题追踪，因为你只需要查看父组件来找到数据来源。

总之，props是只读的，以确保组件行为的一致性、可预测性和可维护性。这是React推崇的函数式编程理念的体现，即避免直接修改数据，而应该通过返回新的对象和数组来处理状态的变化。

十一 在React中组件的props改变时更新组件的有哪些方法

在React中，当组件的props改变时，组件通常会自动重新渲染以反映props的新值。但是，你可能需要在props改变时执行一些额外的操作，如数据获取、状态更新或执行一些与渲染无关的逻辑。针对不同类型的React组件，有不同的方法来处理props改变时的更新。

函数组件

在函数组件中，你通常会利用Hooks来处理props的变化。

• React.useEffect:
  useEffect是处理副作用的主要方式，比如props改变时的副作用。你可以在useEffect的依赖数组中指定props，这样当这些props改变时，useEffect会重新执行。

useEffect(() => {
  // 执行当特定props改变时的逻辑
}, [props.specificProp]); // 依赖数组，仅当specificProp改变时运行
1
2
3

类组件

在类组件中，你可以使用生命周期方法来响应props的变化。

• componentDidUpdate:
  componentDidUpdate是一个生命周期方法，它在组件接收新的props或state后立即调用。你可以在这个方法中比较旧props和新props，并执行相应的逻辑。

componentDidUpdate(prevProps) {
  if (this.props.specificProp !== prevProps.specificProp) {
    // 当specificProp改变时执行某些操作
  }
}
1
2
3
4
5

注意：componentWillReceiveProps曾经是处理props变化的常用生命周期方法，但自React 16.3起，它已被标记为不推荐使用，并在React 17中被废除。取而代之的是getDerivedStateFromProps和componentDidUpdate。

通用提示

• 当你只需要根据props的变化来重新渲染组件时，React会自动处理这一过程，你无需手动干预。
• 如果你需要在props变化时执行更复杂的操作，比如发起网络请求或更新内部状态，使用上述方法可以有效地实现。
• 总是尽量保持组件的纯净性和响应性，避免不必要的副作用和状态更新。

以上就是在React中处理组件props改变的主要方法，希望这些建议能帮助你更有效地开发React应用。

十二 React中怎么检验props

在React中，你可以使用PropTypes来检验传递给组件的props。PropTypes允许你指定一个组件可以接收的props数据类型，以及这些数据是否是必须的。如果传递给组件的props数据类型不匹配或者缺少必需的props，React会在开发者控制台中显示警告信息，帮助你快速定位问题。

从React v15.5开始，PropTypes被移到了一个独立的包prop-types中，因此你需要单独安装这个包。

安装prop-types包：

npm install prop-types --save
1

或者

yarn add prop-types
1

在组件中使用PropTypes来检测props：

import React from 'react';
import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    // ...
  }
}

MyComponent.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number.isRequired,
  onGreet: PropTypes.func,
  children: PropTypes.element,
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

如果你使用的是函数组件，你同样可以为其定义propTypes：

import PropTypes from 'prop-types';

function MyComponent({ name, age, onGreet }) {
  // ...
}

MyComponent.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number.isRequired,
  onGreet: PropTypes.func
};
1
2
3
4
5
6
7
8
9
10
11

PropTypes提供了很多验证器，能够确保你接收的数据类型是正确的。例如，它们可以是：

• PropTypes.array
• PropTypes.bool
• PropTypes.func
• PropTypes.number
• PropTypes.object
• PropTypes.string
• PropTypes.symbol
• PropTypes.element
• PropTypes.instanceOf(SomeClass)
• PropTypes.node
• PropTypes.oneOf(['News', 'Photos'])
• PropTypes.oneOfType([PropTypes.string, PropTypes.number])
• PropTypes.arrayOf(PropTypes.number)
• PropTypes.objectOf(PropTypes.number)
• PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number })
• PropTypes.any

如果要定义一个不可变的属性，可以使用.isRequired来链式调用。

注意，PropTypes是开发模式下用来检查错误的辅助功能，它不会在生产模式下检查props，不会对性能造成影响。

十三 验证props的目的是什么

在React中验证props的目的主要是为了确保组件接收到正确类型和形式的数据。这样做有几个关键的好处：

1. 类型安全：通过验证props的类型，开发者可以确保组件接收的数据是预期的类型，例如字符串、数字、函数等。这有助于预防运行时错误，例如尝试执行一个不是函数的props或是在需要数字的地方使用字符串。

2. 开发体验：在开发过程中，如果传递给组件的props与期望的类型不匹配，PropTypes将在控制台中显示警告信息。这让开发者能够快速定位到潜在的问题。

3. 代码可读性：使用PropTypes或是TypeScript中的类型定义，可以作为自动化文档来说明组件应该如何被使用，哪些props是必需的，哪些是可选的，以及它们应该是什么类型。

4. 维护性：随着项目的发展，代码库可能会变得越来越复杂。props验证可以作为一个可靠的系统，以确保组件的正确使用，防止未来的开发者或维护者意外引入错误。

5. 默认值和错误处理：验证props可以结合默认prop值和错误处理机制，为组件提供一个更强壮的错误处理策略，如果某个prop未被正确传递，可以优雅地降级或提供反馈。

6. 优化性能：在某些情况下，当组件不需要更新时，验证props可以帮助避免不必要的渲染，因为你可以精确地知道哪些props是组件渲染所必需的。

为了实现这些目的，React原生提供了PropTypes库，现在通常作为独立的prop-types包使用。另外，使用TypeScript进行类型检查是React社区中越来越流行的做法，它提供了静态类型检查的能力，这比运行时检查更强大。