React：如何处理每次发生 state 更改时重新渲染的 Table 中的大 td Input 元素？

Question

我不确定这是否是在 React 中推送表格元素的正确方法，但我一直在这样做。 因此，每次重新渲染发生时，或者在这种情况下，当我更改输入时，都会执行下面的这个 for 循环。 如果我有 100 个输入怎么办？

问题：

1. 这是绘制表格元素的正确方法吗？
2. 重新渲染不会导致性能不佳，特别是如果您在返回之前有某种循环？
3. 如果这不是正确的方法。 请告诉我正确的方法。

function App() {
const [inputs,setInputs] = useState({input1:'',input2:'',input3:''})


function handleOnChange(e){
  const {name,value} = e.target

  setInputs(prev => ({...prev, [name]:value}))
}

let tableElement = []

for(let i = 1; i <= 3; i++){
  tableElement.push(<tr  key={i}>
    <td><Input value={inputs[`${i}`]} name={`input${i}`} onChange={handleOnChange} /></td>
  </tr>)
}

  return (
      <div>
        <Table>
          <tbody>
             {tableElement}
          </tbody>
        </Table>
      </div>

  );
}

export default App;

Answer 1

给定代码：

let tableElement = []

for (let i = 1; i <= 3; i++){
  tableElement.push((
    <tr key={i}>
      <td>
        <Input value={inputs[`${i}`]} name={`input${i}`} onChange={handleOnChange} />
      </td>
    </tr>
  ))
}

return (
  <div>
    <Table>
      <tbody>
         {tableElement}
      </tbody>
    </Table>
  </div>
);

问题：

1. 这是绘制表格元素的正确方法吗？

这没有错，尽管它可能不是将数组渲染到 JSX 的最常见方式。 通常你可以选择 map 一个数组到 JSX

const tableElement = [...Array(3).keys()].map((i) => (
  <tr key={i}>
    <td>
      <Input value={inputs[`${i}`]} name={`input${i}`} onChange={handleOnChange} />
    </td>
  </tr>
));

return (
  <div>
    <Table>
      <tbody>
         {tableElement}
      </tbody>
    </Table>
  </div>
);

或者直接在 JSX

return (
  <div>
    <Table>
      <tbody>
        {[...Array(3).keys()].map((i) => (
          <tr key={i}>
            <td>
              <Input
                value={inputs[`${i}`]}
                name={`input${i}`}
                onChange={handleOnChange}
              />
            </td>
          </tr>
        ))}
      </tbody>
    </Table>
  </div>
);

2. 重新渲染不会导致性能不佳，特别是如果您在返回之前有某种循环？

我想可能会出现性能不佳的情况，但是由于 UI 的性质，当组件渲染时需要 map 输出一堆数组元素，无论如何这都是必要的工作。

React 已经非常优化，开箱即用。 它使用协调过程来确定哪些映射元素与之前的渲染相比实际上发生了变化，并且只重新渲染必要的部分。 在映射 arrays 时使用 React 键来提供帮助。

3. 如果这不是正确的方法。 请告诉我正确的方法。

我在上面的第 1 点中分享了将数组映射到 JSX 的更常见的方法。