我如何使用整个函数的效果

Question

我正试图在我的项目上第一次实现useEffects，但我不太确定从现在开始如何遵循。我有一个基于状态返回组件的函数。精简版:

const list = () => {
return value.map((element, index) => {
return (
<View style={styles.chosenExerciseContainer} key={generateKey(element)}>
<View style={styles.chosenExercisesModal}>
<Text>A lot of things here<Text>
</View>
</View>
);
});
};

在我的导出组件中，我这样使用它:

(...)
<ScrollView contentContainerStyle={styles.scrollViewModalBody}>
{list()}
</ScrollView>
(...)

所以，只要状态改变，我的函数也应该改变，它应该再次渲染。它现在的方式，它实际上是工作的，但当我要扔掉文档，我意识到这可能是一个问题，所以我试图实现与useEffect。

根据我对useEffect的理解，我应该使用"value"作为重新渲染的参数，但我不确定我应该把什么放在useEffect本身，因为当我把"list"这样的:

React.useEffect(()=>{
const list = () => {
(...)
}
},[value])

组件没有找到它。

在同一屏幕内，我有一个弹出与下拉菜单，改变值。

<DropDownPicker
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
theme="LIGHT"
multiple={true}
mode="SIMPLE"
badgeDotColors={["black"]}
/>

Answer 1

您不会使用useEffect只是声明函数。在这段代码中，您可能根本不需要做任何更改。

然而，如果你想声明一个函数，它有依赖于状态，并允许框架决定是否应该重新创建该函数基于这些依赖，这正是useCallback的作用:

const list = useCallback(() => {
return value.map((element, index) => {
return (
<View style={styles.chosenExerciseContainer} key={generateKey(element)}>
<View style={styles.chosenExercisesModal}>
<Text>A lot of things here<Text>
</View>
</View>
);
});
}, [value]);

这里的好处本质上是，如果依赖数组没有改变，框架将跳过创建新函数的成本，并重用以前的函数。这可以提高性能，但可能并不明显。当这个函数是一个组件道具时，它才真正有用。例如:

<SomeComponent callback={list} />

没有useCallback，功能list改变;在每次渲染中，即使没有什么重要的实际上是不同的。这将导致SomeComponent总是重新渲染，我们不知道这是否是一个昂贵的操作。

但是对于useCallback，如果依赖数组中没有任何变化，那么list将是与之前渲染相同的函数实例的引用，因此SomeComponent没有新的道具，可以更有效地由框架记住和优化。