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 的更常見的方法。