如何将原生JS加法交互代码转换为React实现？

刚从原生JS过渡到React需要适应状态驱动视图的核心逻辑，下面是你给出的原生加法代码对应的React实现，同时拆解关键差异：

原生JS实现代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <input type="text" id="inp1" /> + <input type="text" id="inp2" />
    <div id="results">=</div>
    <button onclick="myFunction()">Add</button>
    <script>
      myFunction = () => {
        const num1 = parseInt(inp1.value);
        const num2 = parseInt(inp2.value);
        const res = num1 + num2;
        document.getElementById("results").innerHTML =
          "= The sum of " + num1 + " and " + num2 + " is: " + res;
      };
    </script>
  </body>
</html>

React实现代码 #

import { useState } from 'react';

function AddCalculator() {
  // 定义三个状态：两个输入值、计算结果
  const [num1, setNum1] = useState('');
  const [num2, setNum2] = useState('');
  const [result, setResult] = useState('=');

  // 加法逻辑函数
  const handleAdd = () => {
    const n1 = parseInt(num1);
    const n2 = parseInt(num2);
    const sum = n1 + n2;
    // 更新结果状态，视图自动同步
    setResult(`= The sum of ${n1} and ${n2} is: ${sum}`);
  };

  return (
    <>
      {/* 受控组件：value绑定状态，onChange触发状态更新 */}
      <input
        type="text"
        value={num1}
        onChange={(e) => setNum1(e.target.value)}
      /> +
      <input
        type="text"
        value={num2}
        onChange={(e) => setNum2(e.target.value)}
      />
      {/* 直接渲染状态值，替代原生的innerHTML修改 */}
      <div>{result}</div>
      {/* React事件绑定用驼峰式，直接传函数引用 */}
      <button onClick={handleAdd}>Add</button>
    </>
  );
}

export default AddCalculator;

核心差异说明 #

• 状态驱动视图：React用useState管理输入值和结果，状态更新后视图自动重新渲染，无需手动查询DOM或修改innerHTML
• 受控组件：输入框的value绑定状态变量，onChange事件触发状态更新，让React完全控制输入值，替代原生直接操作DOM元素的方式
• 事件绑定：React采用驼峰式命名（如onClick），直接绑定函数引用，而非原生的字符串事件名
• JSX语法：在JavaScript中直接编写UI结构，用{}插入变量，替代原生的字符串拼接生成内容

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