面试题：React 中 State 更新异步特性在简单场景下的应用

Question

假设你有一个简单的 React 组件，包含一个按钮和一个计数器。每次点击按钮，计数器的值应该增加。请描述在这个过程中，React State 更新的异步特性是如何体现的，并给出相应的代码示例（包括如何处理异步更新带来的问题，比如在更新后立即获取最新的 state 值）。

Answer 1

React State 更新的异步特性体现

在 React 中，当使用 setState（类组件）或 useState（函数组件）更新 state 时，React 会批量处理这些更新以提高性能。这意味着，多次调用 setState 或 useState 并不会立即触发重新渲染，而是会在合适的时机，一次性处理所有的更新并重新渲染组件。

例如，在下面这段代码中：

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

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

export default Counter;

尽管调用了三次 setCount(count + 1)，但实际上 count 只会增加 1。因为 React 将这些更新合并，最后只应用一次更新。

处理异步更新带来的问题 - 获取最新的 state 值

1. 使用回调函数形式的 setState（类组件）
   • 在类组件中，setState 接受一个回调函数作为第二个参数，这个回调函数会在 state 更新并重新渲染后执行，此时可以获取到最新的 state 值。

   import React, { Component } from 'react';
   
   class Counter extends Component {
     constructor(props) {
       super(props);
       this.state = {
         count: 0
       };
     }
   
     handleClick = () => {
       this.setState(prevState => ({
         count: prevState.count + 1
       }), () => {
         console.log('最新的 count 值:', this.state.count);
       });
     };
   
     render() {
       return (
         <div>
           <p>Count: {this.state.count}</p>
           <button onClick={this.handleClick}>Increment</button>
         </div>
       );
     }
   }
   
   export default Counter;
   

2. 使用 useEffect（函数组件）
   • 在函数组件中，可以使用 useEffect 来监听 state 的变化。useEffect 的回调函数会在依赖项数组中的值发生变化时执行，此时可以获取到最新的 state 值。

   import React, { useState, useEffect } from 'react';
   
   function Counter() {
     const [count, setCount] = useState(0);
   
     const handleClick = () => {
       setCount(count + 1);
     };
   
     useEffect(() => {
       console.log('最新的 count 值:', count);
     }, [count]);
   
     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={handleClick}>Increment</button>
       </div>
     );
   }
   
   export default Counter;
   

通过上述方法，可以在 React 的异步 state 更新后获取到最新的 state 值。