React/React Native viewableItems解构问题

Question

这是React/React Native，但我觉得这个问题与JavaScript有关。不管怎样，这是我有的:

onViewableItemsChanged={({ viewableItems }) => {
if (viewableItems.length > 0) {
setActiveIndex(viewableItems[0].index || 0)
}
}}

,viewableItems是被破坏的东西。我们可以访问它，因为我们正在使用onViewableItemsChanged． 但是当我把这个函数移到别处时，比如:

onViewableItemsChanged={onFlatlistUpdate}

const onFlatlistUpdate = useCallback(({ viewableItems }) => {
if (viewableItems.length > 0) {
setActiveIndex(viewableItems[0].index || 0)
}
}, [])

I don ' t get whereviewableItems是来自哪里?我的意思是，在第一个例子中，它是从onViewableItemsChanged的上下文中解构的． 然而在第二个例子中，它是完全独立的，远离onViewableItemsChanged(当然我们使用的是useCallback但这无关紧要)那么我们是怎么接触到它的呢?

TL博士:在第二个例子中(onFlatlistUpdate)，其中是viewableItems如何访问viewableItems

?

Answer 1

在这两个示例中，您都将一个函数传递给onViewableItemsChangedprop。在第一种情况下，您将创建一个内联匿名函数，并将该函数引用传递给onViewableItemsChanged。在第二种情况下，您正在使用useCallback()创建一个函数，然后将其传递给onViewableItemsChanged(由useCallback()返回的函数将转发它传递给您提供的函数的任何参数)。在内部，具有onViewableItemsChanged属性的FlatList组件将调用该函数并传递带有viewableItems的对象，例如onViewableItemsChanged({viewableItems: ...})。这允许您在传递给FlatList组件的函数中解构对象。

我的意思是在第一个例子中，它是从上下文中解构的onViewableItemsChanged

onViewableItemsChanged没有真正的"上下文"。onViewableItemsChanged只是一个传递函数给它的道具。然后如何在FlatList中调用该函数决定了该函数的参数。这是由FlatList组件的内部处理，你不需要担心太多。你可以独立创建这个函数，也可以内联创建它，在这两种情况下，你传递给onViewableItemsChanged的函数引用可以被FlatList调用。

下面是使用普通JS的示例代码，我们将一个回调函数传递给另一个函数，以便调用它。将函数定义为独立函数还是内联函数并不重要，真正重要的是我们最终将函数传递给myFlatList:

const myFlatList = (onViewableItemsChanged) => {
onViewableItemsChanged({viewableItems: [1, 2, 3]});
}
// Defining the callback function inline 
myFlatList(({viewableItems}) => {
console.log("inline", viewableItems);
});
// Similar to your `useCallback()` definition
const callbackFn = ({viewableItems}) => {
console.log("independent", viewableItems);
}
myFlatList(callbackFn);