时间戳

首页 > 解决方案 > 将数组映射到 JSX 组件数组，但仅在 prop 发生更改时更新数组中的正确索引

javascript - 将数组映射到 JSX 组件数组，但仅在 prop 发生更改时更新数组中的正确索引

问题描述

我有：

const FooComponent = (props) => {
  const inputsArray = props.arrayOfInputs.map(
    (field) => <Input value={props.inputValues[field.id].value} key={...}/>
  )
  return inputsArray
}

它呈现多个 <Input>s 的列表， my被记忆，因此只要在只有s<Input>中存在新值时，新值就会被重新呈现。但是，函数总是运行到它的完整性，有没有办法让 javascript/react 不重新运行函数并简单地修改具有新道具的元素？props.state.someInput.value<Input>map()map()inputsArray

我并不是说要避免重新渲染，我的问题是要避免map()函数运行。FooComponent当避免重新渲染时，则map()不会运行，但如果inputsArray重新渲染内部的元素，map()则整个列表的 仍然会运行。

标签： javascriptreactjs

解决方案

是的，有，这里memo说明的用途

如果你的函数组件在给定相同的 props 的情况下呈现相同的结果，你可以将它包装在对 React.memo 的调用中，以便在某些情况下通过记忆结果来提高性能。这意味着 React 将跳过渲染组件，并重用上次渲染的结果。

首先，将您的输入提取到一个组件并用 memo 包装。

const InputComponent = React.memo((props) => {
  return <Input value={props.inputValues[field.id].value} key={...}/>
});

下一个：

const FooComponent = (props) => {
  const inputsArray = props.arrayOfInputs.map(
    (field) => <InputComponent value={props.inputValues[field.id].value} key={...}/>
  )
  return inputsArray
}

props.inputValues[field.id].value除非已更改，否则记忆化的输入组件不会重新渲染

推荐阅读