Reactjs 使用闭包优化可选列表项的性能

首先，我们已经知道我们的目标是防止动物受到不必要的伤害.我们再加上React.memo:

const Animal = React.memo(({selected, name, onClick}: AnimalProps) => (
  <div onClick={onClick}>{`[${selected ? 'X' : ' '}]`} {name}</div>
))

当然，它现在什么都没做.我们可以清楚地看到，name和selected是静态值.它们只是字符串和布尔值，所以它们应该能够很好地处理React.memo.问题是onClick.

在这段代码中，我们可以看到我们正在循环中创建新函数:

const makeOnClick  = (item: string) => () => {
  // ...
}
makeOnClick(i)

在每个渲染中，生成的函数总是不同的.当前代码类似于:

<Animal onClick={() => onClick(i)} />

这对React永远不起作用.备忘录，因为它总是在创建一个新函数.所以我们的目标是传递一个静态函数给它.让我们将其修改为:

<Animal onClick={onClick} />

但我们仍然需要知道i.所以在动物成分中，我们可以做到:

const Animal = React.memo(({ selected, name, onClick }: AnimalProps) => (
  <div onClick={() => onClick(name)}>
    {`[${selected ? 'X' : ' '}]`} {name}
  </div>
));

在这种情况下，如果onClick是静态值，则动物组件不会进行不必要的渲染.所以我们的最终目标是为动物创建一个静态onClick函数.

而且现在makeOnClick已经不是makeOnClick了.我们不需要返回函数的函数，所以我们只需将其命名为onClick，并删除额外的内部函数:

const onClick  = (item: string) => {
  const ix = items.indexOf(item)
  const newItems = (ix > -1) ?
    [...items.slice(0, ix), ...items.slice(ix + 1)]
    :
    [...items, item]
  setItems(newItems)
}

现在是最后一步.我们只需要记住这个函数，但我们可以看到它需要最新的items个.换句话说，items是它的依赖关系.因此，即使我们现在添加useCallback，我们仍然需要将items添加到依赖项中.我们知道，当一个项目被选中时，items个改变，useCallback个改变不会有任何帮助.我们必须以某种方式从依赖项中删除items个.

幸运的是，setState实际上支持回调函数.对于exmaple:

setItems(items => [...items, 'foo'])

也就是说，我们可以访问当前的items，而不必依赖于items.因此，我们只需更改setItems即可使用更新功能:

const onClick = React.useCallback((item: string) => {
  setItems((items) => {
    const ix = items.indexOf(item);
    const newItems =
      ix > -1
        ? [...items.slice(0, ix), ...items.slice(ix + 1)]
        : [...items, item];
    return newItems;
  });
}, []);

现在应该可以用了.请参阅完整的工作代码:https://stackblitz.com/edit/react-ts-foxpnu?file=index.tsx

您可以使用React Developer工具判断渲染，或者只添加一些conosle.登录到动物组件.