设置状态导致REECT中的UI滞后

Question

我有一个React应用程序，可以在容器小部件中列出卡片列表。容器小部件具有使用效应，我们可以在其中订阅可观察到的数组，然后更新该数组，然后将其用于渲染组件内的卡片。每当任何卡都更改时，可观察的发射新值会再次创建整个数组，因此所有卡都会重新渲染。但是，这种重新渲染会导致明显的UI滞后。

这是从容器组件中删除的代码版本。

const obsRef = useRef<Subscription>(null);
const [apiResArray, setApiResArray] = useState([]);

useEffect(() => {
    
    if(obsRef.current) obsRef.current.unsubscribe();

    const mySubscription = myObservable$(changingValue)
    .subscribe((val) => {
        setApiResArray(val.apiArray);
    });

    obsRef.current = mySubscription;

    return () => {
      obsRef.current && obsRef.current.unsubscribe();
    };

}, [changingValue])

return (
    <CardWrapper $showMenu={showMenu}>
        { apiResArray.map((res, resIndex) => {
            return (
                <Card
                    data={{
                        // a json object with props
                    }}
                    key={res?.hKey}
                />
            );
        })}
    </CardWrapper>
);

card组件此处只需根据传递给它的道具呈现内容即可。我知道，由于数据是一个对象，因此参考平等可能会失败，并且我尝试记忆组件，但即使这也无济于事。

这些组件还有很多，但是发布所有代码没有意义。我想了解可能导致列表重新渲染的繁重操作，以至于整个UI被卡住了一两秒钟。该数组仅包含大约100个对象左右。每当更改效果更改时，它就会发生。我可以根据需要共享更多信息。

高度赞赏有关提高性能的任何建议。

Answer 1

React将安装和卸载 dev 模式中的组件，以验证效果清洁剂和任何副作用。

我担心该订阅并取消订阅您的效果。

如果您想定义更改值，为什么不将其包装在if语句中？

if (changingValue) {
    const mySubscription = myObservable$(changingValue)
    .subscribe((val) => {
        setApiResArray(val.apiArray);
    });

    obsRef.current = mySubscription;
}

另一个观察结果是渲染

<Card
  data={
    {
      // a json object with props
    }
  }
  key={res?.hKey} // Why is this a falsy value ?
/>

虚假价值的项目可以使重新渲染组件的关键道具更改，一个具有内部钥匙值，另一个带有您的实现值