在 React Native 中使用 Hooks

「爱情、让人受尽委屈。」 2022-01-22 08:09 259阅读 0赞

React官方在 2018 ReactConf 大会上宣布 React v16.7.0-alpha(内测) 将引入 Hooks。什么是Hooks，我们来了解一下。

## 什么是Hooks? ##

在平时开发过程中，我们一般都会遇到如下问题：

> 1. 难以重用和共享组件中的与状态相关的逻辑  
> 2. 逻辑复杂的组件难以开发与维护，当我们的组件需要处理多个互不相关的 state 时，每个生命周期函数中可能会包含着各种互不相关的逻辑在里面。  
> 3. 由于业务变动，函数组件不得不改为类组件等等。

上面说起来比较抽象，接下来我们以 键盘Api **Keyboard** 为例说明问题。

export default class App extends Component { 
       
       constructor(props) { 
       super(props); 
       this.state = { 
       isShowKeyboard: false 
       } 
       } 
       
       static getDerivedStateFromProps() { 
       this.keyboardDidShowListener = Keyboard.addListener( 
       "keyboardDidShow", 
       this.keyboardDidShowHandler 
       ); 
       } 
       
       keyboardDidShowHandler () { 
       this.setState({ 
       isShowKeyboard: true 
       }); 
       } 
       
       componentWillUnmount() { 
       this.keyboardDidShowListener.remove(); 
       } 
       
       render() { 
       return ( 
       <View style={styles.container}> 
       <Text> 
       当前键盘状态: {this.state.isShowKeyboard} 
       </Text> 
       </View> 
       ); 
       } 
       }

上面的代码用例比较简单，使用 Keyboard 注册监听键盘的**显示、隐藏**状态。可以看到键盘事件的注册，注销，状态的render都放在了Component中，如果当前Component中涉及很多这样的逻辑，会造成当前Component职责非常重，并且状态数据不能共享，当在另一个Component中需要监听键盘事件时，需要重新编写或Copy重复代码，冗余非常严重，对于功能维护和扩展都不是一件好事。

Hooks的出现解决了上面的问题，它允许开发者定义**函数组件，**也可以使用类组件（class components）的 state 和 组件生命周期，而不需要在 mixin、 函数组件、HOC组件和 render props 之间来回切换。方便我们在业务中实现业务逻辑代码的分离和组件的复用。与使用 setState 相比，**组件是没有状态的。**来看看使用Hooks的方式：

import { useState, useEffect } from 'react'; 
       import { 
       Keyboard 
       } from 'react-native'; 
       
       export default function keyboard() { 
       const [keyboardStatus, setKeyboardStatus] = useState( false); 
       Keyboard.addListener( 
       "keyboardDidShow", 
       this.keyboardDidShowHandler 
       ); 
       useEffect( ()=> { 
       return ()=> Keyboard.removeListener( 
       "keyboardDidShow", 
       ()=> setKeyboardStatus( true) 
       ); 
       }, [ false]); 
       return ( 
       <Text> 
       当前键盘状态：{keyboardStatus} 
       </Text> 
       ) 
       }

上述代码中将关于键盘的业务逻辑剥离到了函数中，称之为 **函数组件。**当我们在其他Component中使用时，只需要导入进来即可。在函数组件中，我们使用到了 useState、useEffect，它们作为Hooks中提供的Api，起到了什么作用呢？

## Hooks Api ##

官方提供了 hooks 的三个关键的Api，分别是 **State Hooks 、 Effect Hooks 、Context Hooks、 Custom Hooks**(自定义hooks)。

### useState ###

useState 这个方法可以为函数组件带来 local state，它接收一个用于初始 state 的值，返回一对变量

// 等价于 
       const keyboardStatus= useState( 0)[ 0]; 
       const setKeyboardStatus= useState( 0)[ 1];

理解起来比较简单，其实就是定义 state 状态值，以及修改该 state 状态值的行为函数。

### useEffect ###

useEffect 可以简单的理解为替代如下生命周期：

> componentDidMount、componentDidUpdate、componentWillUnmount

useEffect 的代码既会在第一次初始化时（componentDidMount）执行，也会在后续每次触发 render 渲染时（componentDidUpdate）执行，返回值在组件注销时（componentWillUnmount）执行。结合上面的例子：

useEffect( ()=> { 
       // return 将会在组件注销时调用 
       return ()=> Keyboard.removeListener( 
       "keyboardDidShow", 
       ()=> setKeyboardStatus( true) 
       ); 
       }, [ false]);

useEffect 的第二个参数，作为性能优化的设置，决定是否执行里面的操作来避免一些不必要的性能损失。只要第二个参数数组中的成员的值没有改变，就会跳过此次执行。如果传入一个空数组 \[ \]，那么只会在组件 mount 和 unmount 时期执行。

### Context Hooks ###

React 16.3 版本中发布了全新的Context API。目的为了解决子组件嵌套层级过深，父组件的属性难以传达的问题。使用方式不算复杂，首先要利用 Context API创建一个数据提供者(Provider)和数据消费者(Consumer)。（说到这里有点像Java多线程并发的例子）在提供者所在的地方存入数据，在消费者所在的地方取出数据。简单看下 Context 使用方式：

（1）创建上下文环境

// 创建 Context 
       import React from 'react'; 
       const DataContext = React.createContext({ 
       name: '', 
       age: 23 
       }); 
       export default DataContext;

（2）定义数据提供者 Provider

export default class App extends Component { 
       
       render() { 
       return ( 
       <DataContext.Provider value={ { name: 'Songlcy', age: 27 }}> 
       <CustomComponent /> 
       </DataContext.Provider> 
       ); 
       } 
       }

（3）定义数据消费者 Consumer

export default class CustomComponent extends Component { 
       render() { 
       return ( 
       <DataContext.Consumer> 
       { 
       context => ( 
       <Text> 
       我的名字：{context.name}, 我的年龄：{context.age} 
       </Text> 
       ) 
       } 
       </DataContext.Consumer> 
       ) 
       } 
       }

当组件嵌套层次很深的情况下，Context 的优势就会更为明显。

“**诶，醒醒！**”.....   说了这么多，继续回到Hooks。上面代码中，从 **Context — Provider — Consumer** 获取到数据，整个取值过程还是比较繁琐的。当我们要从多个 **Consumer** 中取值的时候，还要进行函数嵌套，更加麻烦。

useContext 是对 Context API 的简化。来看看简化后的样子：

const { name, age } = useContext(DataContext);

“**我靠！这就完了？**” 是的，取值过程就是这么简单，就是这么任性。再来10个 **Consumer**  又如何！

### Custom Hooks ###

Custom Hooks 即自定义Hooks行为方式，本身并不是Api。核心概念就是将逻辑提取出来封装到函数中，具体实现就是通过一个函数封装跟状态数据（State）有关的逻辑，将这些逻辑从组件中抽取出来。在这个函数中我们可以使用其他的 Hooks，也可以单独进行测试。修改上面的例子：

export default function useKeyboardStatus() { 
       const [keyboardStatus, setKeyboardStatus] = useState( false); 
       Keyboard.addListener( 
       "keyboardDidShow", 
       this.keyboardDidShowHandler 
       ); 
       useEffect( ()=> { 
       return ()=> Keyboard.removeListener( 
       "keyboardDidShow", 
       ()=> setKeyboardStatus( true) 
       ); 
       },[]); 
       return keyboardStatus; 
       }

代码几乎相同，唯一区别是函数名称用了 **use\*** 前缀，这里需要遵循一个约定，命名要用 **use\*** 。

## Hooks 工作原理 ##

“神马？Hooks 其实就是一个**数组**！”

回忆下最初我们使用 useState 时的方式：

const [keyboardStatus, setKeyboardStatus] = useState(false);

其实从这句代码我们也能猜出大致的实现思想：

> 使用一个类似于 **setter** 的函数作为hook函数中的第二个数组项返回，而 setter 将控制由hook管理的状态（State），状态由第一个数组项返回。

我们可以理解成有两个数组，分别存放 state、setState对应的方法。

当useState()第一次运行时，将setter函数推送到setter数组，状态推送到state数组。每个setter都有一个对它的光标位置的引用，因此通过触发对任何setter的调用，它将改变状态数组中该位置的状态值。说白了就是有个索引，setter方法根据索引修改对应的状态数据值。来看看伪代码的实现方式：

具体的源码实现，感兴趣的大家可以去看看。不过不建议每步都弄懂，了解了实现思想就可以了。

### 总结 ###

状态和相关的处理逻辑可以按照功能进行划分，不必散落在各个生命周期中，大大降低了开发和维护的难度。除了这几个hooks还有其他额外的hooks：[Hooks API Reference][]

最后推荐两个个很牛逼的库：

**[react-use][]: **封装了各种 Hooks。

**[eslint-plugin-react-hooks][]: ** Hooks ESLint 插件**。**

**一个老外写的很不错的 React Native Hooks 文章：**[React Hooks Basics— Building a React Native App with React Hooks][React Hooks Basics_ Building a React Native App with React_Hooks]

[Hooks API Reference]: https://reactjs.org/docs/hooks-reference.html
[react-use]: https://github.com/streamich/react-use
[eslint-plugin-react-hooks]: https://www.npmjs.com/package/eslint-plugin-react-hooks
[React Hooks Basics_ Building a React Native App with React_Hooks]: https://medium.com/crowdbotics/build-a-react-native-app-with-react-hooks-5498e1d5fdf6