面试题：React State 异步更新与生命周期及钩子函数的交互

React 类组件

State 更新异步特性与生命周期方法的相互影响

React 中的 setState 是异步的。这意味着当调用 setState 时，React 并不会立即更新 state，而是会批量处理多个 setState 调用，以提高性能。
componentDidUpdate 会在组件更新后被调用，此时 state 已经更新完成。但由于 setState 的异步特性，如果在 componentDidUpdate 中再次调用 setState，可能会陷入无限循环。例如：

import React, { Component } from'react';

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

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count!== this.state.count) {
      // 错误示例，会导致无限循环
      this.setState({
        count: this.state.count + 1
      });
    }
  }

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

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

正确处理方式

如果需要在 state 更新后执行某些操作，可以在 setState 的第二个参数（回调函数）中进行。例如：

import React, { Component } from'react';

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

  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    }, () => {
      // 在 state 更新后执行的操作
      console.log('State has been updated:', this.state.count);
    });
  };

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

React 函数式组件（使用 Hooks）

State 更新异步特性与钩子函数的相互影响

useState 返回的 setState 函数也是异步的。useEffect 会在组件渲染和更新后执行。与类组件不同，useEffect 没有像 componentDidUpdate 那样可以直接比较 prevState 和 currentState 的参数。但可以通过在 useEffect 的依赖数组中传入 state 变量来模拟类似的功能。
例如，在 useEffect 中错误地依赖了过时的 state 值：

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

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

  useEffect(() => {
    const id = setTimeout(() => {
      // 这里可能会使用到过时的 count 值
      console.log('Count after 1 second:', count);
    }, 1000);
    return () => clearTimeout(id);
  }, []);

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

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

正确处理方式

通过在 useEffect 的依赖数组中传入需要关注的 state 变量，确保 useEffect 在该 state 变化时重新执行。例如：

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

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

  useEffect(() => {
    const id = setTimeout(() => {
      console.log('Count after 1 second:', count);
    }, 1000);
    return () => clearTimeout(id);
  }, [count]);

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

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

如果需要在 state 更新后执行某些操作，也可以通过在 useEffect 中根据 state 的变化来触发。例如：

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

const ExampleHookComponent = () => {
  const [count, setCount] = useState(0);
  const [prevCount, setPrevCount] = useState(null);

  useEffect(() => {
    setPrevCount(count);
  }, [count]);

  useEffect(() => {
    if (prevCount!== null && prevCount!== count) {
      console.log('Count has changed from', prevCount, 'to', count);
    }
  }, [count, prevCount]);

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

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

通过以上方式，可以在类组件和函数式组件中正确处理 state 更新的异步特性与生命周期方法或钩子函数之间的关系，确保组件的状态和 UI 保持一致。

星途面试题库

面试题：React State 异步更新与生命周期及钩子函数的交互

知识考点

面试题答案

React 类组件

React 函数式组件（使用 Hooks）