Map 數組到 JSX 組件數組，但只有在 prop 發生更改時才更新數組中的正確索引

Question

我有：

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

它呈現多個<Input>的列表，我的<Input>被記憶，所以每當props.state.someInput.value有新值時，只有具有新值的<Input>被重新呈現。 但是， map() function 總是運行到它的完整性，javascript/react 有沒有辦法不重新運行map() function 並簡單地修改具有新道具的inputsArray的元素？

我並不是說要避免重新渲染，我的問題是要避免map() function 運行。 當避免重新渲染FooComponent時， map()不會運行，但如果重新渲染inputsArray內的元素，則整個列表的map()仍然會運行。

Answer 1

是的，使用這里說明的memo

如果您的 function 組件在給定相同的 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發生變化，否則記憶化的輸入組件不會重新渲染