ThinkSSL🔒 一键申购 5分钟快速签发 30天无理由退款 购买更放心 广告
&emsp;&emsp;Hook(钩子)是React v16.8新引入的特性,能以钩子的形式为函数组件附加类组件的状态、生命周期等特性。React的类组件有难以拆分、测试,状态逻辑分散,难以复用等问题,虽然可以通过渲染属性(Render Props)和高阶组件来提取状态逻辑,但会形成层层嵌套,而使用Hook后的函数组件就能避免这些问题。 &emsp;&emsp;Hook本质上是一种特殊的JavaScript函数,名称以use为前缀,在使用它时需要遵循两条规则,如下所列: &emsp;&emsp;(1)在循环、条件语句或嵌套函数中调用Hook是不允许的,必须在函数的最顶层调用,确保Hook的调用顺序。 &emsp;&emsp;(2)只能在React的函数组件或自定义的Hook中调用Hook。 &emsp;&emsp;这两条规则可以结合后文的分析慢慢体会,接下来会详细讲解几个内置的Hook,并且会介绍如何自定义Hook,文中的示例来源于[官网](https://react.docschina.org/docs/hooks-intro.html)。 ## 一、State Hook(状态钩子) &emsp;&emsp;先来看一个简单的类组件,Btn组件会渲染出一个按钮,每次点击按钮,其文本会加一。 ~~~ import React from "react"; class Btn extends React.Component { constructor() { super(); this.state = { count: 0 }; this.dot = this.dot.bind(this); } dot() { this.setState({ count: this.state.count + 1 }) } render() { return <button onClick={this.dot}>{this.state.count}</button>; } } ~~~ &emsp;&emsp;然后将Btn组件改成相同功能的函数形式,如下代码所示,没有了构造函数和render()方法,通过useState()为函数组件附加状态。 ~~~ import { useState } from "react"; function Btn() { const [count, setCount] = useState(0); return (<button onClick={() => setCount(count + 1)}>{count}</button>); } ~~~ &emsp;&emsp;useState()是一个钩子函数,它的参数是状态的初始值,返回一个数组,包含两个元素:当前状态和更新状态的函数。通过数组解构的方式声明了一个名为count的状态变量和一个名为setCount的函数,相当于类组件中的this.state.count和this.setState()。在点击事件中读取状态或调用更新状态的函数都不需要this。 &emsp;&emsp;注意,useState()可以被多次调用,React会根据useState()的出现顺序保证状态的独立性,并且与this.setState()不同的是,更新状态是替换而不是合并。 ## 二、Effect Hook(副作用钩子) &emsp;&emsp;在React组件中有两种常见的副作用:无需清除和需要清除,接下来会逐个讲解。 **1)无需清除** &emsp;&emsp;在React更新DOM之后会运行一些无需清除的副作用,例如向服务器请求数据、变更DOM结构、记录日志等。在类组件中,这些副作用常在componentDidMount()和componentDidUpdate()生命周期方法中执行。以上一节的Btn组件为例,在更新计数后,修改页面标题,如下所示(只列出了核心代码)。 ~~~ class Btn extends React.Component { componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { document.title = `You clicked ${this.state.count} times`; } } ~~~ &emsp;&emsp;注意,两个函数中的代码是重复的,因为很多情况下,在组件挂载和更新时会执行相同的操作,而React并未提供每次渲染之后可回调的函数。 &emsp;&emsp;接下来用useEffect()钩子函数实现相同功能,同样只列出了核心代码,如下代码所示。useEffect()使得相同功能的副作用不用再分散到不同的生命周期中,即按照用途分离副作用。 ~~~ import { useEffect } from "react"; function Btn() { useEffect(() => { document.title = `You clicked ${count} times`; }); } ~~~ &emsp;&emsp;useEffect()可接收两个参数,第一个参数是回调函数,叫做Effect,在每次渲染(包括第一次挂载和后续的DOM更新)之后Effect都会被执行,其中每次接收的Effect都是新的,不用担心状态过期的问题;第二个参数是可选的数组(由Effect的依赖项组成),用于控制Effect的执行,而是否执行Effect将取决于数组中的元素是否发生了变化,例如将count变量作为数组的元素(如下代码所示),当count的值与重新渲染后的count的值一样时,React会忽略这个Effect,优化性能。 ~~~ useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); ~~~ &emsp;&emsp;当把一个空数组(\[\])传给useEffect()时,Effect只会运行一次,即仅在组件挂载和卸载时运行。由于Effect不依赖state或props中的任意值,因此永远都不需要重复执行。 &emsp;&emsp;useEffect()相当于componentDidMount()、componentDidUpdate()和componentWillUnmount()三个生命周期方法的组合,但与componentDidMount()或componentDidUpdate()不同,使用useEffect()会异步执行副作用,可避免阻塞浏览器更新视图。 **2)需要清除** &emsp;&emsp;有些副作用是必须清除的,例如订阅的外部数据源,将其清除后,可防止内存泄露。在类组件中,通常会在componentDidMount()中设置订阅,并在componentWillUnmount()中执行清除。 &emsp;&emsp;假设有一个ChatAPI模块,用于订阅好友的在线状态,如下所示(只有关键部分),其中componentDidMount()和componentWillUnmount()处理的是关联的副作用。 ~~~ class FriendStatus extends React.Component { componentDidMount() { ChatAPI.subscribeToFriendStatus( this.props.friend.id, this.handleStatusChange ); } componentWillUnmount() { ChatAPI.unsubscribeFromFriendStatus( this.props.friend.id, this.handleStatusChange ); } handleStatusChange(status) { this.setState({ isOnline: status.isOnline }); } } ~~~ &emsp;&emsp;接下来用函数组件实现相同的功能,同样只有关键部分的代码。由于添加和移除订阅的逻辑有很强的紧密性,因此useEffect()将它们组织在一起。当Effect返回一个函数时,React将在执行清除操作时调用它,如下所示。 ~~~ function FriendStatus(props) { useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); return () => { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }); } ~~~ &emsp;&emsp;注意,React会在执行当前Effect之前对上一个Effect进行清除,也就是说,副作用并不仅在组件卸载时被执行。 ## 三、自定义Hook &emsp;&emsp;自定义的Hook用于保存组件中可复用的逻辑,它的参数和返回值都没有特殊要求,类似于一个普通的函数,但为了遵循Hook的规则,其名称必须以use开头。接下来将之前的FriendStatus组件中订阅好友在线状态的逻辑抽离到自定义的useFriendStatus()中,其参数为friendID,返回值为好友当前的状态,如下所示。 ~~~ function useFriendStatus(friendID) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange); return () => { ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange); }; }); return isOnline; } ~~~ &emsp;&emsp;在FriendStatus组件中调用自定义的Hook,其内部逻辑将变得非常简洁,如下所示。 ~~~ function FriendStatus(props) { const isOnline = useFriendStatus(props.friend.id); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline'; } ~~~ ## 四、其它Hook &emsp;&emsp;除了上面所讲解的两个内置Hook,React还提供了其它功能的Hook,例如useContext()、useCallback()、useMemo()、useLayoutEffect()等,具体可参考[官方的API索引](https://react.docschina.org/docs/hooks-reference.html)。 **1)useContext()** &emsp;&emsp;接收一个由React.createContext()创建的Context对象,返回该Context的当前值(即要传送的数据)。调用了useContext()的组件会在Context值发生变化时重新渲染。 **2)useCallback()** &emsp;&emsp;包含两个参数,第一个是回调函数,第二个是依赖项数组,返回回调函数的记忆版本。当某个依赖项发生改变时,会更新回调函数。注意,依赖项数组不会作为参数传给回调函数。 **3)useMemo()** &emsp;&emsp;包含回调函数和依赖项数组两个参数,回调函数的返回值就是useMemo()的返回值,它会被缓存,并且仅在某个依赖项发生改变时才重新计算它。之前的useCallback(fn, deps)相当于useMemo(() => fn, deps)。 **4)useLayoutEffect()** &emsp;&emsp;函数签名与useEffect()相同,但调用时机不同,它会在所有的DOM更新之后同步调用Effect,也就是在浏览器更新视图之前调用Effect。 ***** > 原文出处: [博客园-React躬行记](https://www.cnblogs.com/strick/category/1455720.html) [知乎专栏-React躬行记](https://zhuanlan.zhihu.com/pwreact) 已建立一个微信前端交流群,如要进群,请先加微信号freedom20180706或扫描下面的二维码,请求中需注明“看云加群”,在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily),欢迎浏览。 ![](https://box.kancloud.cn/2e1f8ecf9512ecdd2fcaae8250e7d48a_430x430.jpg =200x200) 推荐一款前端监控脚本:[shin-monitor](https://github.com/pwstrick/shin-monitor),不仅能监控前端的错误、通信、打印等行为,还能计算各类性能参数,包括 FMP、LCP、FP 等。