ReactJS力量举应用createRoot警告消除及代码优化咨询

一、先解决控制台警告 #

这个警告的核心原因是重复调用了ReactDOMClient.createRoot()——你可能在入口文件（比如index.js）里多次执行了创建根节点的逻辑，或者在某个会重复触发的代码块里调用了它。

正确的做法是只创建一次根实例，后续更新直接复用它：

// index.js 入口文件
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 只执行一次：获取容器并创建根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 渲染/更新应用都用这个root实例的render方法
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

别再用废弃的ReactDOM.render，按上面的写法就能彻底消除警告。

二、代码架构优化建议 #

针对你的三个组件，做以下针对性优化：

1. Plate组件：强化样式与复用性 #

把杠铃片的样式逻辑封装到组件内部，根据color属性自动匹配视觉样式，同时保证组件的纯展示属性：

function Plate({ color, weight }) {
  // 预设不同重量对应的样式（可根据需求调整）
  const baseStyles = {
    width: '80px',
    height: '22px',
    borderRadius: '4px',
    backgroundColor: color,
    color: '#fff',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    margin: '0 6px',
    fontWeight: 'bold'
  };

  return <div style={baseStyles}>{weight}kg</div>;
}

2. WeightInputForm组件：分离逻辑与UI #

把重量计算逻辑从组件事件里抽出来，做成独立的纯函数，让组件只负责表单交互和状态管理，更易维护和测试：

// 抽离纯计算函数：输入总重量，返回左右两侧的杠铃片数组
function calculatePlates(totalWeight, barWeight = 20) {
  const usableWeight = totalWeight - barWeight;
  if (usableWeight <= 0) return [];

  // 标准杠铃片重量+对应颜色（可自定义）
  const plateConfig = [
    { weight: 25, color: 'black' },
    { weight: 20, color: 'blue' },
    { weight: 15, color: 'yellow' },
    { weight: 10, color: 'green' },
    { weight: 5, color: 'white' },
    { weight: 2.5, color: 'red' },
    { weight: 1.25, color: 'orange' }
  ];

  const plates = [];
  let remainingWeight = usableWeight / 2; // 左右平分重量

  plateConfig.forEach(({ weight, color }) => {
    const count = Math.floor(remainingWeight / weight);
    if (count > 0) {
      // 按数量添加对应杠铃片
      plates.push(...Array(count).fill({ weight, color }));
      remainingWeight -= count * weight;
    }
  });

  return plates;
}

// 表单组件只处理UI和交互
function WeightInputForm({ onPlatesCalculated }) {
  const [inputWeight, setInputWeight] = React.useState('');
  const [error, setError] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const weight = parseInt(inputWeight, 10);
    
    // 增加表单验证
    if (isNaN(weight)) {
      setError('请输入有效的数字');
      return;
    }
    if (weight < 20) {
      setError('总重量不能小于杠铃杆重量（默认20kg）');
      return;
    }

    setError('');
    const plates = calculatePlates(weight);
    onPlatesCalculated(plates);
  };

  return (
    <form onSubmit={handleSubmit} style={{ margin: '20px 0' }}>
      <input
        type="number"
        value={inputWeight}
        onChange={(e) => setInputWeight(e.target.value)}
        placeholder="输入总重量（kg）"
        min="20"
        style={{ padding: '8px', marginRight: '10px' }}
      />
      <button type="submit" style={{ padding: '8px 16px' }}>计算杠铃片</button>
      {error && <p style={{ color: 'red', marginTop: '8px', margin: 0 }}>{error}</p>}
    </form>
  );
}

3. App组件：简化状态管理 #

作为顶层容器，只负责维护杠铃片状态和整合组件，保持逻辑简洁：

function App() {
  const [plates, setPlates] = React.useState([]);

  return (
    <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
      <h1>力量举杠铃片计算器</h1>
      <WeightInputForm onPlatesCalculated={setPlates} />
      <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', marginTop: '20px' }}>
        {plates.map((plate, index) => (
          // 给列表项添加唯一key，避免React渲染警告
          <Plate key={`${plate.color}-${plate.weight}-${index}`} color={plate.color} weight={plate.weight} />
        ))}
      </div>
    </div>
  );
}

三、额外优化小技巧 #

• 把杠铃杆重量做成可配置项：比如在表单里加个输入框让用户自定义杆重，提升工具灵活性；
• 用CSS模块或Tailwind替代内联样式：让样式管理更规范，避免组件内样式冗余；
• 添加重置按钮：方便用户清空当前计算结果，重新输入。

内容的提问来源于stack exchange，提问作者Grégory Nam