关于为何使用React新特色Hook的局地实践与浅见,

2020-03-24 作者:网站首页   |   浏览(88)

时间: 2019-12-27阅读: 48标签: Hook

你还在为该使用无状态组件还是有状态组件而烦恼吗?——拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function。

关于Hook的定义官方文档是这么说的:

你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗?——拥有了Hooks,生命周期钩子函数可以先丢一边了。

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

你在还在为组件中的this指向而晕头转向吗?——既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对this。

简单来说,就是在使用函数式组件时能用上state,还有一些生命周期函数等其他的特性。

这样看来,说React Hooks是今年最劲爆的新特性真的毫不夸张。如果你也对react感兴趣,或者正在使用react进行项目开发,答应我,请一定抽出至少30分钟的时间来阅读本文好吗?所有你需要了解的React Hooks的知识点,本文都涉及到了,相信完整读完后你一定会有所收获。

如果想了解Hook怎么用,官方文档和阮一峰的React Hooks 入门教程都讲得很清楚了,我建议直接看官方文档和阮大神的文章即可。

一个最简单的Hooks

本篇博客只讲为什么要用React的Hook新特性,以及它解决了什么问题。

首先让我们看一下一个简单的有状态组件:

为什么使用Hook?

class Example extends React.Component { constructor; this.state = { count: 0 }; } render() { return (  You clicked {this.state.count} times  this.setState({ count: this.state.count   1 })}> Click me   ); }}

让我们先看看别人怎么说。

我们再来看一下使用hooks后的版本:

阮大神的文章中给了一个示例代码:

import { useState } from 'react';function Example() { const [count, setCount] = useState; return (  You clicked {count} times  setCount}> Click me   );}
import React, { Component } from "react";export default class Button extends Component { constructor() { super(); this.state = { buttonText: "Click me, please" }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(() = { return { buttonText: "Thanks, been clicked!" }; }); } render() { const { buttonText } = this.state; return button onClick={this.handleClick}{buttonText}/button; }}

是不是简单多了!可以看到,Example变成了一个函数,但这个函数却有自己的状态,同时它还可以更新自己的状态。这个函数之所以这么了不得,就是因为它注入了一个hook--useState,就是这个hook让我们的函数变成了一个有状态的函数。

并且提出:

除了useState这个hook外,还有很多别的hook,比如useEffect提供了类似于componentDidMount等生命周期钩子的功能,useContext提供了上下文的功能等等。

这个组件类仅仅是一个按钮,但可以看到,它的代码已经很"重"了。真实的 React App 由多个类按照层级,一层层构成,复杂度成倍增长。再加入 Redux,就变得更复杂。

Hooks本质上就是一类特殊的函数,它们可以为你的函数型组件注入一些特殊的功能。咦?这听起来有点像被诟病的Mixins啊?难道是Mixins要在react中死灰复燃了吗?当然不会了,等会我们再来谈两者的区别。总而言之,这些hooks的目标就是让你不再写class,让function一统江湖。

实际上,上面这个代码的“重”有部分来源于写法问题,他可能并没有“重”,让我们看看下面这种class写法:

React为什么要搞一个Hooks?

import React, { Component } from "react";export default class Button extends Component { state = { buttonText: "Click me, please" } handleClick = () = { this.setState(() = { return { buttonText: "Thanks, been clicked!" }; }); } render() { const { buttonText } = this.state; return button onClick={this.handleClick}{buttonText}/button; }}

想要复用一个有状态的组件太麻烦了!

然后再对比下使用了Hook的函数式组件:

我们都知道react都核心思想就是,将一个页面拆成一堆独立的,可复用的组件,并且用自上而下的单向数据流的形式将这些组件串联起来。但假如你在大型的工作项目中用react,你会发现你的项目中实际上很多react组件冗长且难以复用。尤其是那些写成class的组件,它们本身包含了状态,所以复用这类组件就变得很麻烦。

import React, { useState } from "react";export default function Button() { const [buttonText, setButtonText] = useState("Click me, please"); function handleClick() { return setButtonText("Thanks, been clicked!"); } return button onClick={handleClick}{buttonText}/button;}

那之前,官方推荐怎么解决这个问题呢?答案是:渲染属性和高阶组件(Higher-Order Components)。我们可以稍微跑下题简单看一下这两种模式。

即使是我们简化过的class写法,比起Hook的看起来好像也确实“重”了点。

渲染属性指的是使用一个值为函数的prop来传递需要动态渲染的nodes或组件。如下面的代码可以看到我们的DataProvider组件包含了所有跟状态相关的代码,而Cat组件则可以是一个单纯的展示型组件,这样一来DataProvider就可以单独复用了。

Hook的语法确实简练了一些,但是这个理由并不是那么充分。

import Cat from 'components/cat'class DataProvider extends React.Component { constructor; this.state = { target: 'Zac' }; } render() { return (  {this.props.render }} ( )}/>虽然这个模式叫Render Props,但不是说非用一个叫render的props不可,习惯上大家更常写成下面这种:... {data => (  )}

阮大神同时列举了Redux 的作者 Dan Abramov 总结了组件类的几个缺点:

高阶组件这个概念就更好理解了,说白了就是一个函数接受一个组件作为参数,经过一系列加工后,最后返回一个新的组件。看下面的代码示例,withUser函数就是一个高阶组件,它返回了一个新的组件,这个组件具有了它提供的获取用户信息的功能。

大型组件很难拆分和重构,也很难测试。

const withUser = WrappedComponent => { const user = sessionStorage.getItem; return props => ;};const UserPage = props => (  My name is {props.user}! );export default withUser;

业务逻辑分散在组件的各个方法之中,导致重复逻辑或关联逻辑。(这里我认为阮大神写的可能有点问题,应该是是各个生命周期方法更为准确)

以上这两种模式看上去都挺不错的,很多库也运用了这种模式,比如我们常用的React Router。但我们仔细看这两种模式,会发现它们会增加我们代码的层级关系。最直观的体现,打开devtool看看你的组件层级嵌套是不是很夸张吧。这时候再回过头看我们上一节给出的hooks例子,是不是简洁多了,没有多余的层级嵌套。把各种想要的功能写成一个一个可复用的自定义hook,当你的组件想用什么功能时,直接在组件里调用这个hook即可。

组件类引入了复杂的编程模式,比如 render props 和高阶组件。

生命周期钩子函数里的逻辑太乱了吧!

这三点都是事实,于是有了函数化的组件,但之前的函数化组件没有state和生命周期,有了Hook那么就可以解决这个痛点。

我们通常希望一个函数只做一件事情,但我们的生命周期钩子函数里通常同时做了很多事情。比如我们需要在componentDidMount中发起ajax请求获取数据,绑定一些事件监听等等。同时,有时候我们还需要在componentDidUpdate做一遍同样的事情。当项目变复杂后,这一块的代码也变得不那么直观。

而且Hook并不只是这么简单,通过自定义Hook,我们可以将原有组件的逻辑提取出来实现复用。

classes真的太让人困惑了!

用useEffect解决生命周期导致的重复逻辑或关联逻辑

我们用class来创建react组件时,还有一件很麻烦的事情,就是this的指向问题。为了保证this的指向正确,我们要经常写这样的代码:this.handleClick = this.handleClick.bind,或者是这样的代码:this.handleClick}>。一旦我们不小心忘了绑定this,各种bug就随之而来,很麻烦。

上面举的几个缺点,第一点和第三点你可能很容易理解,第二点就不容易理解了,所以我们需要深入到具体的代码中去理解这句话。

还有一件让我很苦恼的事情。我在之前的react系列文章当中曾经说过,尽可能把你的组件写成无状态组件的形式,因为它们更方便复用,可独立测试。然而很多时候,我们用function写了一个简洁完美的无状态组件,后来因为需求变动这个组件必须得有自己的state,我们又得很麻烦的把function改成class。

我们看看下面这段代码:

在这样的背景下,Hooks便横空出世了!

import React, { Component } from "react";export default class Match extends Component { state={ matchInfo:'' } componentDidMount() { this.getMatchInfo(this.props.matchId) } componentDidUpdate(prevProps) { if (prevProps.matchId !== this.props.matchId) { this.getMatchInfo(this.props.matchId) } } getMatchInfo = (matchId) = { // 请求后台接口获取赛事信息 // ... this.setState({ matchInfo:serverResult // serverResult是后台接口的返回值 }) } render() { const { matchInfo } = this.state return div{matchInfo}/div; }}

什么是State Hooks?

这样的代码在我们的业务中经常会出现,通过修改传入赛事组件的ID,去改变这个赛事组件的信息。

回到一开始我们用的例子,我们分解来看到底state hooks做了什么:

在上面的代码中,受生命周期影响,我们需要在加载完毕和Id更新时都写上重复的逻辑和关联逻辑。

import { useState } from 'react';function Example() { const [count, setCount] = useState; return (  You clicked {count} times  setCount}> Click me   );}

import { useState } from 'react';function Example() { const [count, setCount] = useState;

所以现在你应该比较好理解这句话:业务逻辑分散在组件的各个生命周期方法之中,导致重复逻辑或关联逻辑

useState是react自带的一个hook函数,它的作用就是用来声明状态变量。useState这个函数接收的参数是我们的状态初始值,它返回了一个数组,这个数组的第[0]项是当前当前的状态值,第[1]项是可以改变状态值的方法函数。

为了解决这一点,React提供了useEffect这个钩子。

所以我们做的事情其实就是,声明了一个状态变量count,把它的初始值设为0,同时提供了一个可以更改count的函数setCount。

但是在讲这个之前,我们需要先了解到React带来的一个新的思想:同步。

上面这种表达形式,是借用了es6的数组解构,它可以让我们的代码看起来更简洁。不清楚这种用法的可以先去看下我的这篇文章30分钟掌握ES6/ES2015核心内容。

我们在上面的代码中所做的实际上就是在把组件内的状态和组件外的状态进行同步。

如果不用数组解构的话,可以写成下面这样。实际上数组解构是一件开销很大的事情,用下面这种写法,或者改用对象解构,性能会有很大的提升。具体可以去这篇文章的分析Array destructuring for multi-value returns (in light of React hooks),这里不详细展开,我们就按照官方推荐使用数组解构就好。

所以在使用Hook之前,我们需要先摒弃生命周期的思想,而用同步的思想去思考这个问题。

let _useState = useState;let count = _useState[0];let setCount = _useState[1];

现在再让我们看看改造后的代码:

读取状态值

import React, { Component } from "react";export default function Match({matchId}) { const [ matchInfo, setMatchInfo ] = React.useState('') React.useEffect(() = { // 请求后台接口获取赛事信息 // ... setMatchInfo(serverResult) // serverResult是后台接口的返回值 }, [matchId]) return div{matchInfo}/div;}
You clicked {count} times

看到这个代码,再对比上面的代码,你心中第一反应应该就是:简单。

是不是超简单?因为我们的状态count就是一个单纯的变量而已,我们再也不需要写成{this.state.count}这样了。

React.useEffect接受两个参数,第一个参数是Effect函数,第二个参数是一个数组。

更新状态

组件加载的时候,执行Effect函数。

  setCount}> Click me 

组件更新会去判断数组中的各个值是否变动,如果不变,那么不会执行Effect函数。

当用户点击按钮时,我们调用setCount函数,这个函数接收的参数是修改过的新状态值。接下来的事情就交给react了,react将会重新渲染我们的Example组件,并且使用的是更新后的新的状态,即count=1。这里我们要停下来思考一下,Example本质上也是一个普通的函数,为什么它可以记住之前的状态?

而如果不传第二个参数,那么无论加载还是更新,都会执行Effect函数。

一个至关重要的问题

顺便提一句,这里有组件加载和更新的生命周期的概念了,那么也应该是有组件卸载的概念的:

这里我们就发现了问题,通常来说我们在一个函数中声明的变量,当函数运行完成后,这个变量也就销毁了,比如考虑下面的例子:

import React, { Component } from "react";export default function Match({matchId}) { const [ matchInfo, setMatchInfo ] = React.useState('') React.useEffect(() = { // 请求后台接口获取赛事信息 // ... setMatchInfo(serverResult) // serverResult是后台接口的返回值 return ()={ // 组件卸载后的执行代码 } }, [matchId]) return div{matchInfo}/div;}}
function add { const result = 0; return result   1;}add; //1

这个常用于事件绑定解绑之类的。

不管我们反复调用add函数多少次,结果都是1。因为每一次我们调用add时,result变量都是从初始值0开始的。那为什么上面的Example函数每次执行的时候,都是拿的上一次执行完的状态值作为初始值?答案是:是react帮我们记住的。至于react是用什么机制记住的,我们可以再思考一下。

用自定义Hook解决高阶组件

假如一个组件有多个状态值怎么办?

React的高阶组件是用来提炼重复逻辑的组件工厂,简单一点来说就是个函数,输入参数为组件A,输出的是带有某逻辑的组件A 。

首先,useState是可以多次调用的,所以我们完全可以这样写:

回想一下上面的Match组件,假如这个组件是页面A的首页头部用来展示赛事信息,然后现在页面B的侧边栏也需要展示赛事信息。

function ExampleWithManyStates() { const [age, setAge] = useState; const [fruit, setFruit] = useState; const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

问题就在于页面A的这块UI需要用div,而页面B侧边栏的这块UI需要用到span。

其次,useState接收的初始值没有规定一定要是string/number/boolean这种简单数据类型,它完全可以接收对象或者数组作为参数。唯一需要注意的点是,之前我们的this.setState做的是合并状态后返回一个新状态,而useState是直接替换老状态后返回新状态。最后,react也给我们提供了一个useReducer的hook,如果你更喜欢redux式的状态管理方案的话。

保证今天早点下班的做法是复制A页面的代码到页面B,然后改下render的UI即可。

从ExampleWithManyStates函数我们可以看到,useState无论调用多少次,相互之间是独立的。这一点至关重要。为什么这么说呢?

保证以后早点下班的做法是使用高阶组件,请看下面的代码:

其实我们看hook的“形态”,有点类似之前被官方否定掉的Mixins这种方案,都是提供一种“插拔式的功能注入”的能力。而mixins之所以被否定,是因为Mixins机制是让多个Mixins共享一个对象的数据空间,这样就很难确保不同Mixins依赖的状态不发生冲突。

import React from "react";function hocMatch(Component) { return class Match React.Component { componentDidMount() { this.getMatchInfo(this.props.matchId) } componentDidUpdate(prevProps) { if (prevProps.matchId !== this.props.matchId) { this.getMatchInfo(this.props.matchId) } } getMatchInfo = (matchId) = { // 请求后台接口获取赛事信息 } render () { return ( Component {...this.props} / ) } }}const MatchDiv=hocMatch(DivUIComponent)const MatchSpan=hocMatch(SpanUIComponent)MatchDiv matchId={1} matchInfo={matchInfo} /MatchSpan matchId={1} matchInfo={matchInfo} /

而现在我们的hook,一方面它是直接用在function当中,而不是class;另一方面每一个hook都是相互独立的,不同组件调用同一个hook也能保证各自状态的独立性。这就是两者的本质区别了。

但是实际上有的时候我们的高阶组件可能会更复杂,比如react-redux的connect,这就是高阶组件的复杂化使用方式。

react是怎么保证多个useState的相互独立的?

又比如:

还是看上面给出的ExampleWithManyStates例子,我们调用了三次useState,每次我们传的参数只是一个值,我们根本没有告诉react这些值对应的key是哪个,那react是怎么保证这三个useState找到它对应的state呢?

hocPage( hocMatch( hocDiv(DivComponent) ))

答案是,react是根据useState出现的顺序来定的。我们具体来看一下:

毫无疑问高阶组件能让我们复用很多逻辑,但是过于复杂的高阶组件会让之后的维护者望而却步。

 //第一次渲染 useState; //将age初始化为42 useState; //将fruit初始化为banana useState([{ text: 'Learn Hooks' }]); //... //第二次渲染 useState; //读取状态变量age的值 useState; //读取状态变量fruit的值 useState([{ text: 'Learn Hooks' }]); //...

let showFruit = true;function ExampleWithManyStates() { const [age, setAge] = useState { const [fruit, setFruit] = useState; showFruit = false; } const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

 //第一次渲染 useState; //将age初始化为42 useState; //将fruit初始化为banana useState([{ text: 'Learn Hooks' }]); //... //第二次渲染 useState; //读取状态变量age的值 // useState; useState([{ text: 'Learn Hooks' }]); //读取到的却是状态变量fruit的值,导致报错

而Hook的玩法是使用自定义Hook去提炼这些逻辑,首先看看我们之前使用了Hook的函数式组件:

鉴于此,react规定我们必须把hooks写在函数的最外层,不能写在ifelse等条件语句当中,来确保hooks的执行顺序一致。

import React, { Component } from "react";export default function Match({matchId}) { const [ matchInfo, setMatchInfo ] = React.useState('') React.useEffect(() = { // 请求后台接口获取赛事信息 // ... setMatchInfo(serverResult) // serverResult是后台接口的返回值 }, [matchId]) return div{matchInfo}/div;}

什么是Effect Hooks?

然后,自定义Hook:

我们在上一节的例子中增加一个新功能:

function useMatch(matchId){ const [ matchInfo, setMatchInfo ] = React.useState('') React.useEffect(() = { // 请求后台接口获取赛事信息 // ... setMatchInfo(serverResult) // serverResult是后台接口的返回值 }, [matchId]) return [matchInfo]}
import { useState, useEffect } from 'react';function Example() { const [count, setCount] = useState; // 类似于componentDidMount 和 componentDidUpdate: useEffect => { // 更新文档的标题 document.title = `You clicked ${count} times`; }); return (  You clicked {count} times  setCount}> Click me   );}

接下来,修改原来的Match组件

我们对比着看一下,如果没有hooks,我们会怎么写?

export default function Match({matchId}) { const [matchInfo]=useMatch(matchId) return div{matchInfo}/div;}
class Example extends React.Component { constructor; this.state = { count: 0 }; } componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { document.title = `You clicked ${this.state.count} times`; } render() { return (  You clicked {this.state.count} times  this.setState({ count: this.state.count   1 })}> Click me   ); }}

相比高阶组件,自定义Hook更加简单,也更加容易理解。

我们写的有状态组件,通常会产生很多的副作用,比如发起ajax请求获取数据,添加一些监听的注册和取消注册,手动修改dom等等。我们之前都把这些副作用的函数写在生命周期函数钩子里,比如componentDidMount,componentDidUpdate和componentWillUnmount。而现在的useEffect就相当与这些声明周期函数钩子的集合体。它以一抵三。

现在我们再来处理以下这种情况:

同时,由于前文所说hooks可以反复多次使用,相互独立。所以我们合理的做法是,给每一个副作用一个单独的useEffect钩子。这样一来,这些副作用不再一股脑堆在生命周期钩子里,代码变得更加清晰。

hocPage( hocMatch( hocDiv(DivComponent) ))

useEffect做了什么?

我们的代码将不会出现这种不断嵌套情况,而是会变成下面这种:

我们再梳理一遍下面代码的逻辑:

export default function PageA({matchId}) { const [pageInfo]=usePage(pageId) const [matchInfo]=useMatch(matchId) const [divInfo]=useDiv(divId) return ul li{pageInfo}/li li{matchInfo}/li li{divInfo}/li /ul}
function Example() { const [count, setCount] = useState => { document.title = `You clicked ${count} times`; });

是否需要改造旧的class组件?

首先,我们声明了一个状态变量count,将它的初始值设为0。然后我们告诉react,我们的这个组件有一个副作用。我们给useEffecthook传了一个匿名函数,这个匿名函数就是我们的副作用。在这个例子里,我们的副作用是调用browser API来修改文档标题。当react要渲染我们的组件时,它会先记住我们用到的副作用。等react更新了DOM之后,它再依次执行我们定义的副作用函数。

现在我们了解到了Hook的好,所以就需要去改造旧的class组件。

第一,react首次渲染和之后的每次渲染都会调用一遍传给useEffect的函数。而之前我们要用两个声明周期函数来分别表示首次渲染,和之后的更新导致的重新渲染。

官方推荐不需要专门为了hook去改造class组件,并且保证将继续更新class相关功能。

第二,useEffect中定义的副作用函数的执行不会阻碍浏览器更新视图,也就是说这些函数是异步执行的,而之前的componentDidMount或componentDidUpdate中的代码则是同步执行的。这种安排对大多数副作用说都是合理的,但有的情况除外,比如我们有时候需要先根据DOM计算出某个元素的尺寸再重新渲染,这时候我们希望这次重新渲染是同步发生的,也就是说它会在浏览器真的去绘制这个页面前发生。

实际上我们也没有必要专门去改造旧项目中的class组件,因为工作量并不小。

useEffect怎么解绑一些副作用

但是我们完全可以在新的项目或者新的组件中去使用它。

这种场景很常见,当我们在componentDidMount里添加了一个注册,我们得马上在componentWillUnmount中,也就是组件被注销之前清除掉我们添加的注册,否则内存泄漏的问题就出现了。

总结

怎么清除呢?让我们传给useEffect的副作用函数返回一个新的函数即可。这个新的函数将会在组件下一次重新渲染之后执行。这种模式在一些pubsub模式的实现中很常见。看下面的例子:

Hook是对函数式组件的一次增强,使得函数式组件可以做到class组件的state和生命周期。

import { useState, useEffect } from 'react';function FriendStatus { const [isOnline, setIsOnline] = useState; function handleStatusChange { setIsOnline; } useEffect => { ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); // 一定注意下这个顺序:告诉react在下次重新渲染组件之后,同时是下次调用ChatAPI.subscribeToFriendStatus之前执行cleanup return function cleanup() { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }); if  { return 'Loading...'; } return isOnline ? 'Online' : 'Offline';}

Hook的语法更加简练易懂,消除了class的生命周期方法导致的重复逻辑代码,解决了高阶组件难以理解和使用困难的问题。

这里有一个点需要重视!这种解绑的模式跟componentWillUnmount不一样。componentWillUnmount只会在组件被销毁前执行一次而已,而useEffect里的函数,每次组件渲染后都会执行一遍,包括副作用函数返回的这个清理函数也会重新执行一遍。所以我们一起来看一下下面这个问题。

然而Hook并没有让函数式组件能做到class组件做不到的事情,它只是让很多事情变得更加简单而已。

为什么要让副作用函数每次组件更新都执行一遍?

class组件并不会消失,但hook化的函数式组件将是趋势。

 componentDidMount() { ChatAPI.subscribeToFriendStatus( this.props.friend.id, this.handleStatusChange ); } componentWillUnmount() { ChatAPI.unsubscribeFromFriendStatus( this.props.friend.id, this.handleStatusChange ); }

作者:韩子卢出处:

很清除,我们在componentDidMount注册,再在componentWillUnmount清除注册。但假如这时候props.friend.id变了怎么办?我们不得不再添加一个componentDidUpdate来处理这种情况:

... componentDidUpdate { // 先把上一个friend.id解绑 ChatAPI.unsubscribeFromFriendStatus( prevProps.friend.id, this.handleStatusChange ); // 再重新注册新但friend.id ChatAPI.subscribeToFriendStatus( this.props.friend.id, this.handleStatusChange ); }...

看到了吗?很繁琐,而我们但useEffect则没这个问题,因为它在每次组件更新后都会重新执行一遍。所以代码的执行顺序是这样的:

1.页面首次渲染2.替friend.id=1的朋友注册3.突然friend.id变成了24.页面重新渲染5.清除friend.id=1的绑定6.替friend.id=2的朋友注册...

怎么跳过一些不必要的副作用函数

按照上一节的思路,每次重新渲染都要执行一遍这些副作用函数,显然是不经济的。怎么跳过一些不必要的计算呢?我们只需要给useEffect传第二个参数即可。用第二个参数来告诉react只有当这个参数的值发生改变时,才执行我们传的副作用函数。

useEffect => { document.title = `You clicked ${count} times`;}, [count]); // 只有当count的值发生变化时,才会重新执行`document.title`这一句

当我们第二个参数传一个空数组[]时,其实就相当于只在首次渲染的时候执行。也就是componentDidMount加componentWillUnmount的模式。不过这种用法可能带来bug,少用。

还有哪些自带的Effect Hooks?

除了上文重点介绍的useState和useEffect,react还给我们提供来很多有用的hooks:

useContext useReducer useCallback useMemo useRef useImperativeMethods useMutationEffect useLayoutEffect

我不再一一介绍,大家自行去查阅官方文档。

怎么写自定义的Effect Hooks?

为什么要自己去写一个Effect Hooks? 这样我们才能把可以复用的逻辑抽离出来,变成一个个可以随意插拔的“插销”,哪个组件要用来,我就插进哪个组件里,so easy!看一个完整的例子,你就明白了。

比如我们可以把上面写的FriendStatus组件中判断朋友是否在线的功能抽出来,新建一个useFriendStatus的hook专门用来判断某个id是否在线。

import { useState, useEffect } from 'react';function useFriendStatus { const [isOnline, setIsOnline] = useState; function handleStatusChange { setIsOnline; } useEffect => { ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange); return () => { ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange); }; }); return isOnline;}

这时候FriendStatus组件就可以简写为:

function FriendStatus { const isOnline = useFriendStatus; if  { return 'Loading...'; } return isOnline ? 'Online' : 'Offline';}

简直Perfect!假如这个时候我们又有一个朋友列表也需要显示是否在线的信息:

function FriendListItem { const isOnline = useFriendStatus; return ( 

{props.friend.name}

);}

简直Fabulous!

结尾

不知道你阅读完整篇文章的感受如何,或者对hooks有任何角度的看法和思考都欢迎在评论区一起讨论。另外如果你有换工作的打算,我们部门真的很缺人,欢迎私信勾搭~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文由yzc216亚洲城发布于网站首页,转载请注明出处:关于为何使用React新特色Hook的局地实践与浅见,

关键词: yzc216亚洲城