React：如何处理 Table 中的大型 td Input 元素，每次发生状态更改时都会重新呈现？

Question

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

问题：

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

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>
);

问题：

Is this the right way to draw table element?

这并没有错，尽管它可能不是将数组呈现给 JSX 的最常见方式。通常你可以选择将数组映射到 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>
);

wouldn't re-render cause bad performance especially if you have some kind of loop before return?

我认为可能会出现性能不佳的情况，但由于 UI 的性质需要在组件呈现时映射出一堆数组元素，无论如何这是必要的工作。

React 已经非常优化，开箱即用。它使用协调过程来确定哪些映射元素 实际上 从以前的渲染中改变了，并且只重新渲染必要的元素。在映射数组时使用 React 键来帮助解决这方面的问题。

If this is not the right way to do it. Please show me the right way to do it.

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

React：如何处理 Table 中的大型 td Input 元素，每次发生状态更改时都会重新呈现？

React: How to deal with large td Input element in Table that re-render everytime when state changed occurs?

javascript

reactjs

reactstrap