关于如何使用Hooks写法编写React Navigation

前言

由于之前所讲的使用React Navigation，即使使用函数组件，有部分语法使用的还是类似类组件的功能，所以今天整理一下React Navigation推出的几个Hooks写法，讲一下如何使用它们来修改之前的内容。

useNavigation

先看一个demo:

import React from 'react';
import {
     Text, View} from 'react-native';
import {
     useNavigation} from '@react-navigation/core';
import {
     Button} from 'react-native-paper';

const Home = () => {
     
  const nav = useNavigation();
  return (
    <View style={
     {
     alignItems: 'flex-start'}}>
      <Text>Home</Text>
      <Button
        icon="camera"
        mode="contained"
        onPress={
     () => {
     
          nav.navigate('About', {
     id: 2});
        }}>
        Press ME
      </Button>
    </View>
  );
};

export default Home;

这样的写法可以避免向以前一样使用props传值的问题。

useRoute

接着上面的demo，接受动态传值可以这样使用：

import React from 'react';
import {
     Text, View} from 'react-native';
import {
     useNavigation} from '@react-navigation/core';
import {
     Button} from 'react-native-paper';
import {
     useRoute} from '@react-navigation/core';

const About = () => {
     
  const nav = useNavigation();
  const route = useRoute();
  return (
    <View>
      <Text>About {
     route.params.id}</Text>
      <Button
        onPress={
     () => {
     
          nav.goBack();
        }}>
        Back
      </Button>
    </View>
  );
};

export default About;

useFocusEffect

这个钩子我们之前也用过，想要深入理解这个函数的话，我们首先要区分render 和 focus之间的不同，简单的说我们可以把RN中的focus理解为React 中的render，但如果我们直接使用useEffect的话，RN是不知道我们的render的，所以我们必须监听一个事件，这个事件就是focus。而如果通过监听事件的方式的话，我们在unfocus的时候，很多东西并不会被清理掉，反而会占用内存并影响一些接下来的操作，这样的话我们有需要手动的调用监听blur事件去清理上一个focus遗留下来的东西，而这个操作其实是很繁琐的。

所以为了简化我们的操作，React Navigation提出了useFocusEffect这个钩子，同时推荐我们使用useCallback这个钩子配合它使用，理由是避免副作用发生的太过频繁。

Note: To avoid the running the effect too often, it’s important to wrap the callback in useCallback before passing it to useFocusEffect as shown in the example.

useIsFocused

这个钩子的话我之前也讲过，比如我们想根据是否focus当前界面来进行不一样的渲染，就需要用到这个钩子函数，比较简单，所以直接贴官方的demo：

import {
      useIsFocused } from '@react-navigation/core';

// ...

function Profile() {
     
  const isFocused = useIsFocused();

  return <Text>{
     isFocused ? 'focused' : 'unfocused'}</Text>;
}

useScrollToTop

顾名思义，也不需要多解释，这个是官方是推荐配合useRef使用的，以返回ref存储的节点。也是贴官方的demo把：

import * as React from 'react';
import {
      ScrollView } from 'react-native';
import {
      useScrollToTop } from '@react-navigation/native';

export default function Albums() {
     
  const ref = React.useRef < ScrollView > null;

  useScrollToTop(ref);

  return <ScrollView ref={
     ref}>{
     /* content */}</ScrollView>;
}