React Hooks实现多按钮分别点击计数，组件拆分后如何处理逻辑？

• 组件状态作用域错误：React 组件内部的 state 是私有属性，兄弟组件（Buttons 和 Counter）之间无法直接互相访问内部状态，Buttons.count 这种写法完全无法获取到正确值
• 缺少按钮标识区分：三个按钮共用同一个点击处理函数，没有传入对应类型参数，无法区分点击的是哪个按钮
• 冗余状态定义：Counter 内部定义的 count 状态没有实际作用，计数逻辑分散导致数据无法同步

采用状态提升的思路，将三个按钮的计数状态统一放到两个子组件的公共父组件中管理，再通过 props 把点击处理函数传递给 Buttons 组件、把计数数据传递给 Counter 组件即可，该方案状态集中管理没有冗余，子组件均为无内部状态的展示组件，渲染性能更优。

完整实现代码 #

1. 父组件 App.js #

import React, { useState } from 'react';
import Buttons from './Buttons';
import Counter from './Counter';

function App() {
  // 用单个对象存储三类计数，避免创建多个重复state
  const [stats, setStats] = useState({
    good: 0,
    neutral: 0,
    bad: 0
  });

  // 接收按钮类型参数，更新对应分类的计数
  const handleButtonClick = (type) => {
    setStats(prevState => ({
      ...prevState,
      [type]: prevState[type] + 1
    }));
  };

  return (
    <div>
      <Buttons onClick={handleButtonClick} />
      <Counter stats={stats} />
    </div>
  );
}

export default App;

2. 按钮组件 Buttons.js #

import React from "react";

const Buttons = ({ onClick }) => {
  return (
    <div>
      <button className="GoodBtn" onClick={() => onClick('good')}>Good</button>
      <button className="NeutralBtn" onClick={() => onClick('neutral')}>Neutral</button>
      <button className="BadBtn" onClick={() => onClick('bad')}>Bad</button>
    </div>
  );
};

export default Buttons;

3. 统计组件 Counter.js #

import React from "react";

const Counter = ({ stats }) => {
  return (
    <div>
      <h2>Statistics</h2>
      <p>Good {stats.good}</p>
      <p>Neutral {stats.neutral}</p>
      <p>Bad {stats.bad}</p>
    </div>
  );
};

export default Counter;

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