在 React 中，当屏幕变化时，组件重新渲染已经渲染的功能答案

【问题标题】：In React, When screen change, Component re-renders already rendered function在 React 中，当屏幕变化时，组件重新渲染已经渲染的功能
【发布时间】：2021-11-28 11:29:33
【问题描述】：

我有一个平面列表，我将它与备忘录一起使用。

屏幕 1.js 组件

<FlatList
data={props.cars.results}
renderItem={(item)=> <SinleRowMemo item={item}/>}
/>

在 SingleRow.js 组件中；

export const SingleRow=(props.item)=>{
return (
<TouchableOpacity onPress={()=>SomeFuncComesFromProps()}>
    <View>
          <Text>{props.car.brand}</Text>
    </View>
</TouchableOpacity>
export const SingleRowMemo=React.memo(SingleRow)

App.js

 <Route path={"/"} component={<Screen 1/>}/>
 <Route path={"/detail"} component={<Screen 2/>}/>
 <Route path={"/about"} component={<Screen 3/>}/>

问题是当我进入“/detail”屏幕并返回“/”页面时， SingleRowMemo 函数再次重新运行并呈现已呈现的所有行。如何解决这个问题？谢谢

【问题讨论】：

标签： reactjs react-native react-hooks

【解决方案1】：

这会导致反应备忘录挂钩更改您的代码如下

const SingleRow=(props.item)=>{
return (
<TouchableOpacity onPress={()=>SomeFuncComesFromProps()}>
    <View>
          <Text>{props.car.brand}</Text>
    </View>
</TouchableOpacity>
export default SingleRow

【讨论】：

有什么解决办法吗？

【解决方案2】：

memoization 不会仅仅因为每行的参数都在变化而避免重新渲染。 React.memo() 适用于经常使用相同参数渲染组件并且渲染成本相对较高的情况。

https://dmitripavlutin.com/use-react-memo-wisely/

【讨论】：