面试题：React中如何正确使用useState来管理状态

Question

假设你正在开发一个计数器组件，要求实现一个功能，点击按钮时计数器数值增加。请用React的useState钩子函数来实现这个功能，并解释useState的返回值以及使用过程中的注意事项。

Answer 1

代码实现

import React, { useState } from 'react';

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

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

    return (
        <div>
            <p>计数器数值: {count}</p>
            <button onClick={handleClick}>增加</button>
        </div>
    );
};

export default CounterComponent;

useState返回值解释

useState返回一个数组，数组中有两个元素。

1. 第一个元素：当前状态值。例如上述代码中的count，它代表计数器当前的值，初始值为useState传入的参数0。
2. 第二个元素：用于更新状态的函数。如上述代码中的setCount，调用这个函数并传入新的值，就可以更新count的值。

使用注意事项

1. 不要直接修改状态值：不要像count = count + 1这样直接修改count的值，而是要通过setCount函数来更新，因为直接修改不会触发React的重新渲染机制，导致视图不会更新。
2. 批量更新：React会批量处理多个useState的更新操作以提高性能。但在某些异步操作或回调函数中，可能需要使用函数式更新方式setCount(prevCount => prevCount + 1)，这样可以确保拿到最新的状态值进行更新。
3. 依赖数组：在使用useEffect等依赖状态的钩子时，要正确设置依赖数组，否则可能导致不必要的渲染或状态更新问题。如果useEffect依赖count，那么count应该在依赖数组中useEffect(() => { /* 副作用操作 */ }, [count])。