使用useState钩子有效地更新数组中的对象

Question

我有一个React组件，可以呈现一个中等大小的输入列表（100多个项目）。它在我的电脑上渲染得很好，但是我的手机上有明显的输入延迟。 React DevTools显示整个父对象在每个按键上重新渲染。

有没有更有效的方法来解决这个问题？

https://codepen.io/anon/pen/YMvoyy?editors=0011

function MyInput({obj, onChange}) {
  return (
    <div>
      <label>
        {obj.label}
        <input type="text" value={obj.value} onChange={onChange} />
      </label>
    </div>
  );
}

// Passed in from a parent component
const startingObjects = 
  new Array(100).fill(null).map((_, i) => ({label: i, value: 'value'}));

function App() {
  const [objs, setObjects] = React.useState(startingObjects);
  function handleChange(obj) {
    return (event) => setObjects(objs.map((o) => {
      if (o === obj) return {...obj, value: event.target.value}
      return o;
    }));
  }
  return (
    <div>
      {objs.map((obj) => <MyInput obj={obj} onChange={handleChange(obj)} />)}  
    </div>
  );
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

该问题与以下内容有关：

function handleChange(obj) {
  return (event) => setObjects(objs.map((o) => {
    if (o === obj) return {...obj, value: event.target.value}
    return o;
  }));
}

在此，您将更新objs数组。这显然很好，但React不知道发生了什么变化，所以触发了所有孩子的渲染。

如果您的函数组件在给定相同的道具的情况下呈现相同的结果，则可以将其包装在对React.memo的调用中以提高性能。

https://reactjs.org/docs/react-api.html#reactmemo

const MyInput = React.memo(({obj, onChange}) => {
    console.log(`Rerendered: ${obj.label}`);
    return <div style={{display: 'flex'}}>
        <label>{obj.label}</label>
        <input type="text" value={obj.value} onChange={onChange} />
    </div>;
}, (prevProps, nextProps) => prevProps.obj.label === nextProps.obj.label && prevProps.obj.value === nextProps.obj.value);

但是，React.Memo在尝试确定它是否应该渲染时只进行浅层比较，因此我们可以将自定义比较函数作为第二个参数传递。

(prevProps, nextProps) => prevProps.obj.label === nextProps.obj.label && prevProps.obj.value === nextProps.obj.value);

基本上说，如果obj道具上的标签和值与前一个obj道具上的先前属性相同，请不要重新渲染。

最后，setObjects很像setState，也是异步的，不会立即反映和更新。因此，为了避免objs不正确的风险，并使用较旧的值，您可以将其更改为回调，如下所示：

function handleChange(obj) {
  return (event) => {
    const value = event.target.value;
    setObjects(prevObjs => (prevObjs.map((o) => {
      if (o === obj) return {...obj, value }
      return o;
    })))
  };
}

https://codepen.io/anon/pen/QPBLwy?editors=0011拥有所有这些，以及console.logs，显示是否有什么东西被重新渲染。

---

有没有更有效的方法来解决这个问题？

您将所有值存储在一个数组中，这意味着您不知道哪个元素需要更新而不迭代整个数组，比较对象是否匹配。

如果你开始使用Object：

const startingObjects = 
  new Array(100).fill(null).reduce((objects, _, index) => ({...objects, [index]: {value: 'value', label: index}}), {})

经过一些修改后，您的句柄功能将更改为

function handleChange(obj, index) {
  return (event) => {
    const value = event.target.value;
    setObjects(prevObjs => ({...prevObjs, [index]: {...obj, value}}));
  }
}

https://codepen.io/anon/pen/LvBPEB?editors=0011就是一个例子。