当更新列表中的某些项目时，避免所有项目重新呈现

Question

这里真的需要你的帮助

我浪费了很多时间来优化我的应用程序，我想我没有得到关于React的一些东西

下面是一个典型的例子:我有一个有一些相互连接的输入的表单(改变一个输入可以禁用/启用另一个)类似于我的代码:

const Form = (form)=>{  
const [inputs, setInputs] = useState(form.inputs)
const updateInputs = (updates)=>{
/**
* Changing some inputs
*/
}
return inputs.map(input=>
<InputComponent {...input} key={input.id} onChange={updateInputs}></InputComponent>
)
}

我的问题是当输入被改变时，所有的输入都被重新渲染。

Memo/PureComponent在这里是无用的，因为updateInputs函数

不能使用useCallback"钩子"updateInputs"因为它在缓存输入状态，每次更改时更新

是的，我使用React profiler。

我有同样的问题与复选框列表&广播电台列表。每当我得到一个项目之间共享状态的列表时，我就会遇到这个问题。

Answer 1

感谢@HaveSpacesuit和这篇文章(不是整篇文章，只是第4步)

我的问题是:我不能把useCallback "updateInputs"因为我在做这样的东西:

const updateInputs = useCallback((updates)=>{
const localInputs = [...inputs]
/* update localInputs */
setInputs(localInputs)
}, [])

但是这样做会记住输入。

设置"inputs"在useCallback参数中，每次更新都会创建一个新的函数引用，这使得useCallback无用。

解决方案是:

const updateInputs = useCallback((updates)=>{
setInputs((oldInputs)=>{
const localInputs = [...oldInputs]
/*update localInputs*/
return localInputs
}
}, [])

就像这样，函数将更新新的"输入"，并且由于useCallback，函数将在呈现器之间保留其引用。

每次用户交互的时间从200ms缩短到25ms