时间戳

首页 > 解决方案 > 处理 React 页面在重新渲染时闪烁的方法（功能组件）

reactjs - 处理 React 页面在重新渲染时闪烁的方法（功能组件）

问题描述

很多事情导致我的 React 功能组件闪烁，因为新数据来自各种获取，并且所有内容都不断地从上到下重新绘制。

例如，如果我有一个顶级App组件，其中某处包含一个MyForm组件，并且在（作为道具传递，）App中执行我依赖的 DB Lookups 的初始获取，则在重绘自身时将闪烁收到新的道具值。MyFormlookups={lookups}MyForm

应用程序

useEffect(() => {    
    fetchLookups();
}, []);     

const fetchLookups = async () => {
    const url = '/api/general/lookups';
    try {
        const responseLookups = await axios.get(url);
        setLookups(responseLookups.data);
    }
}

MyForm - 会闪烁 - 请注意，我还必须检查来自的 Non-NULL Fetch 结果App，这很痛苦

<Form.Control 
value={props.lookups &&
       props.lookups.filter(item => item.id === 30)
                            .map((item, index) => {
                                return (
                                    item.description
                                );
                            })
/>

此外，在MyForm组件中，有很多使用 inits/listeners 的useEffect(.., [])，它们也会导致表单重新渲染。我无法知道所有这些初始化/侦听器的顺序是什么。

所以我的问题是，处理这种闪烁的最佳方法是什么？

  1. 我可以检测功能组件何时完全呈现，以显示覆盖完整初始化序列的加载微调器吗？
  2. 我可以以任何方式阻止重新渲染吗？

标签： reactjs

解决方案

推荐阅读