javascript - 在react-native功能组件中哪里实现初始化代码

Question

我遵循博览会项目创建向导给出的功能模式，并且我有一个如下所示的组件:

Search.js

export default function Search() {
   const [searchResults, setSearchResults] = React.useState(buildContentViews(contents));

   return (
      <View style={styles.container}>
         <ScrollView contentContainerStyle={styles.contentContainer}>
            <View style={styles.statusLine}>
               <Text style={styles.statusLineText}>{(pageInfo.numResults || 0) + ' Treffer'}</Text>
            </View>
            {searchResults}
         </ScrollView>
      </View>
   );
}

现在我有一些后端 REST 服务的非 react native 实现，它将定期更新搜索结果。因此我需要做类似的事情:

export default function Search() {
   const [searchResults, setSearchResults] = React.useState(buildContentViews(contents));

   client.events.on('searchResults', (results) => setSearchResults(results));

   return (
      <View style={styles.container}>
         <ScrollView contentContainerStyle={styles.contentContainer}>
            <View style={styles.statusLine}>
               <Text style={styles.statusLineText}>{(pageInfo.numResults || 0) + ' Treffer'}</Text>
            </View>
            {searchResults}
         </ScrollView>
      </View>
   );
}

但是，我很快就收到建立了太多事件监听器的错误，这可能是因为每次(重新)渲染组件时(或者换句话说，每当更新组件时)都会运行上述代码。

那么在这种情况下我如何正确注册事件监听器和/或取消注册事件监听器？

Answer 1

useEffect 钩子(Hook)是你的 friend !

这就是我处理注册/取消注册在屏幕之间移动的 react-navigation 事件的方式(我不知道你的客户端代码是如何工作的，这只是一个例子)

  useEffect(() => {
    const onFocus = () => {
      // here I do something when the screen gets focused
    }
    // this is how you handle the registration to the event
    const focusListener = navigation.addListener('didFocus', onFocus)

    // and this is how to handle deregistration!
    return () => focusListener.remove()

  }, []) // empty array of dependencies

1. 在 useEffect Hook 的主体中，您可以定义操作；
2. return 函数用于清理效果，是删除事件监听器的完美位置；
3. 空依赖数组确保此代码将仅执行一次(在第一次渲染之后)，不再执行!不再重新分配!定义事件监听器的完美方式!