如何不拆分独立组件，使用同一函数分别更新复用的count状态变量？

原代码的问题在于两个按钮共用了同一个count状态，所以任意按钮触发更新都会同步修改两个位置的渲染值，不需要拆分组件也能实现需求，可选方案如下：

方案1：声明独立状态变量（最简单高效，适合按钮数量少的场景） #

直接给两个按钮分别声明独立的state，更新函数可复用，传入标识区分要更新的状态即可，无额外性能开销：

import { useState } from 'react';

function Foo() {
    const [count1, setCount1] = useState(0);
    const [count2, setCount2] = useState(0);

    // 复用更新逻辑，函数式更新可避免闭包问题
    function incrementCount(btnType) {
        if (btnType === 'btn1') {
            setCount1(prev => prev + 1);
        } else if (btnType === 'btn2') {
            setCount2(prev => prev + 1);
        }
    }
    return(
        <div>
            {/* 按钮1 */}
            <div>
                <p>count: {count1}</p>
                <button onClick={() => incrementCount('btn1')}>Click</button>
            </div>

            {/* 按钮2 */}
            <div>
                <p>count: {count2}</p>
                <button onClick={() => incrementCount('btn2')}>Click</button>
            </div>
             
        </div>
    )
}
export default Foo;

方案2：单对象存储多状态（适合按钮数量多、后续有扩展需求的场景） #

如果后续可能新增更多同类型按钮，可以把所有计数存在同一个对象类型的state里，扩展性更强：

import { useState } from 'react';

function Foo() {
    // 用对象存储所有按钮的计数值，key为按钮的唯一标识
    const [counts, setCounts] = useState({
        btn1: 0,
        btn2: 0
    });

    function incrementCount(btnKey) {
        setCounts(prev => ({
            ...prev,
            [btnKey]: prev[btnKey] + 1
        }));
    }
    return(
        <div>
            <div>
                <p>count: {counts.btn1}</p>
                <button onClick={() => incrementCount('btn1')}>Click</button>
            </div>
            <div>
                <p>count: {counts.btn2}</p>
                <button onClick={() => incrementCount('btn2')}>Click</button>
            </div>
        </div>
    )
}
export default Foo;

两种方案都完全符合不拆分组件的要求，逻辑简单直接，性能也优于拆分组件复用的方案。

内容的提问来源于stack exchange，提问作者Bryan Erazo