Reactjs React Native:使用useCallback优化flatlist呈现项

我正试图找出尽可能多的方法来优化平面列表，因为我的平面列表组件抱怨我的平面列表项目渲染时间太长（我已经在使用RemoveClippedSubview、WindowsSize、maxToRenderPerBatch、React.memo等）

使用useCallback包装渲染函数是个好主意吗

例如，假设我的函数组件最初的形式是：

const FlatListItem = ({ color1, color2, color3, color4 }) => {
  function renderViewWithColorLogic(color) {
    // do some computationally heavy process
    // ...

    return <View>{/* some components */}</View>;
  }

  return (
    <View>
      {renderViewWithColorLogic(color1)}
      {renderViewWithColorLogic(color2)}
      {renderViewWithColorLogic(color3)}
      {renderViewWithColorLogic(color4)}
    </View>
  );
};

const FlatListItem=（{color1，color2，color3，color4}）=>{
函数renderViewWithColorLogic（颜色）{
//做一些繁重的计算过程
// ...
返回{/*部分组件*/}；
}
返回(
{renderViewWithColorLogic（color1）}
{renderViewWithColorLogic（color2）}
{renderViewWithColorLogic（color3）}
{renderViewWithColorLogic（color4）}
);
};

如果使用useCallback将渲染函数包装为：

const FlatListItem = ({ color1, color2, color3, color4 }) => {
  function _renderViewWithColorLogic(color) {
    // do some computationally heavy process
    // ...

    return <View>{/* some components */}</View>;
  }
  const renderViewWithColorLogic1 = useCallback(()=>_renderViewWithColorLogic(color1), [color1])
  const renderViewWithColorLogic2 = useCallback(()=>_renderViewWithColorLogic(color2), [color2])
  const renderViewWithColorLogic3 = useCallback(()=>_renderViewWithColorLogic(color3), [color3])
  const renderViewWithColorLogic4 = useCallback(()=>_renderViewWithColorLogic(color4), [color4])

  return (
    <View>
      {renderViewWithColorLogic1()}
      {renderViewWithColorLogic2()}
      {renderViewWithColorLogic3()}
      {renderViewWithColorLogic4()}
    </View>
  );
};

const FlatListItem=（{color1，color2，color3，color4}）=>{
函数_renderViewWithColorLogic（颜色）{
//做一些繁重的计算过程
// ...
返回{/*部分组件*/}；
}
const renderViewWithColorLogic1=useCallback（（）=>_renderViewWithColorLogic（color1），[color1]）
const renderViewWithColorLogic2=useCallback（（）=>_renderViewWithColorLogic（color2），[color2]）
const renderViewWithColorLogic3=useCallback（（）=>_renderViewWithColorLogic（color3），[color3]）
const renderViewWithColorLogic4=useCallback（（）=>_renderViewWithColorLogic（color4），[color4]）
返回(
{renderViewWithColorLogic1（）}
{renderViewWithColorLogic2（）}
{renderViewWithColorLogic3（）}
{renderViewWithColorLogic4（）}
);
};

它会提高平面列表的性能吗？ 任何其他优化平面列表的建议也将不胜感激

---

正如Andres所说，我认为通过一些计算实现flatlist项组件的更好方法如下：

const FlatListItem = ({ color1, color2, color3, color4 }) => (
  const viewWithColorLogic1 = useMemo(()=>_renderViewWithColorLogic(color1), [color1]);
  const viewWithColorLogic2 = useMemo(()=>_renderViewWithColorLogic(color2), [color2]);
  const viewWithColorLogic3 = useMemo(()=>_renderViewWithColorLogic(color3), [color3]);
  const viewWithColorLogic4 = useMemo(()=>_renderViewWithColorLogic(color4), [color4]);

  return (
    <View>
      {viewWithColorLogic1}
      {viewWithColorLogic2}
      {viewWithColorLogic3}
      {viewWithColorLogic4}
    </View>
  );
);

function renderViewWithColorLogic(color) {
    // do some computationally heavy process
    // ...

    return <View>{/* some components */}</View>;
}

const FlatListItem=（{color1，color2，color3，color4}）=>(
const viewWithColorLogic1=useMoom（（）=>_renderViewWithColorLogic（color1），[color1]）；
const viewWithColorLogic2=useMoom（（）=>_renderViewWithColorLogic（color2），[color2]）；
const viewWithColorLogic3=useMoom（（）=>_renderViewWithColorLogic（color3），[color3]）；
const viewWithColorLogic4=useMoom（（）=>_renderViewWithColorLogic（color4），[color4]）；
返回(
{viewWithColorLogic1}
{viewWithColorLogic2}
{viewWithColorLogic3}
{viewWithColorLogic4}
);
);
函数renderViewWithColorLogic（颜色）{
//做一些繁重的计算过程
// ...
返回{/*部分组件*/}；
}

useCallback（）

当您需要将回调作为道具传递到某个记忆化/纯组件时，hook只会为回调保留相同的ref。如果只对每个渲染调用函数，则没有必要使用

useCallback（）

来包装它

如果此函数不依赖于其他道具，则可以从组件中提取它，避免在每次渲染时创建函数：

const FlatListItem=（{color1，color2，color3，color4}）=>(
{renderViewWithColorLogic（color1）}
{renderViewWithColorLogic（color2）}
{renderViewWithColorLogic（color3）}
{renderViewWithColorLogic（color4）}
);
函数renderViewWithColorLogic（颜色）{
//做一些繁重的计算过程
// ...
返回{/*部分组件*/}；
}

如果函数中的计算量较大，最好使用

usemo（）

来记忆结果：

const FlatListItem=（{color1，color2，color3，color4}）=>{
const viewWithColorLogic1=useMoom（（）=>_renderViewWithColorLogic（color1），[color1]）；
const viewWithColorLogic2=useMoom（（）=>_renderViewWithColorLogic（color2），[color2]）；
const viewWithColorLogic3=useMoom（（）=>_renderViewWithColorLogic（color3），[color3]）；
const viewWithColorLogic4=useMoom（（）=>_renderViewWithColorLogic（color4），[color4]）；
返回(
{viewWithColorLogic1}
{viewWithColorLogic2}
{viewWithColorLogic3}
{viewWithColorLogic4}
);
};

由于颜色的数量是静态的，因此可以在循环中创建视图并禁用eslint规则

react hooks/rules of hooks

此处：

const view=[color1，color2，color3，color4].map（color=>UseMoom（renderViewWithColorLogic（color），[color]）；返回（{views}）

；我懂了。我对useMemo和UseCallback之间的区别感到有点困惑。我将尝试在组件外部提取渲染函数，然后尝试useMemo。谢谢你的支持。我将进一步讨论这个问题，以获得更多反馈。