您现在的位置是:首页 > 文章详情

React Hooks - 如何安全地使用state

日期:2019-10-22点击:359

Hi,丹尼尔,今天我们来聊一聊 "如何安全地使用 state" 怎么样?

丹尼尔:安全?难道使用 React Hooks 的 state 还会带来危险?X﹏X 紧张~

放松放松,关于安全,等会我给个例子就会很好理解了。没有例子的辅助,好难一下子说明白,也可能是我的表达能力 So So 吧!

丹尼尔:好吧。在场的各位同学,有不清楚 React Hooks 是什么的吗?

也许有一些同学还不太了解,我就简单地介绍下(突然有种凑字数的嫌疑 ヘ(・_|):

React Hooks 是个好东西,它让你可以用纯函数来实现有状态的组件,从此你不用再纠结组件到底是有状态还是无状态,从而在纯函数和类两种实现间徘徊(当然好处多多,绝不止这个,后面我会专门写一篇介绍 Why React Hooks 的文章滴😬)。

一旦你踏上 React Hooks 的征途,就会碰到各种各样奇怪的问题。

这很正常,一个新事物的诞生,总是伴随着各种问题,然后在打怪中不断升级成长,最终成为。。。

丹尼尔:喂喂,别扯远了

🤪如果你有看过关于 React Hooks 的官方文档,看过里面的一些例子,你可能会觉得,挺简单的,不过是改成用 useState 来使用 state 而已,没啥难度。

然而就在你放松警惕的这个moment,“危险”正在悄悄地在某些角落降临了。

丹尼尔:紧张,什么危险,不会失身吧

😅 额~~

对于 state 值的获取,你可能取到了一个不是你所期望的旧值,即不是最新的状态值。

你需要时时刻刻保持清醒,才有可能绕过这些“危险”。

丹尼尔:😵

看着你一脸蒙B的样子,我这就赶紧给个例子哈。

栗子来了:当你在表单上填写了一些信息,然后离开表单时,希望能自动保存为草稿,以便下次进来时能还原,省去重新填写的麻烦。

下面给出简化版的实现:

import React, { useState, useEffect } from "react"; export const UseStateDemoComp1 = () => { const [name, setName] = useState('daniel'); useEffect(function() { return () => { saveDraft() } }, []) function saveDraft() { console.log('Save Draft:', name); } return ( <div> <form> <input value={name} onChange={e => setName(e.target.value)}></input> </form> </div> ); }; 

昨一看,代码好像没啥问题。

传给 useEffect 的 function 返回了一个 function,该 function 相当于原来的componentWillUnmount生命周期方法,即只在组件快销毁的时候才会调用执行。在该方法里面执行一些逻辑,这里调用saveDraft方法,获取 name state 的值,然后保存。

找出问题了吗?如果没有,那我们直接看个动图吧,看看问题所在:

动图演示

点击 Toggle 按钮会销毁掉组件,所以会触发销毁动作。从动图可以看到,我们填写的是“sarah”,但在销毁执行的方法中,取到的值却是“daniel”

丹尼尔:这是为什么呢?不应该是最新的值吗?😶

因为useEffect的依赖是个空数组,所以在整个组件生命周期只会执行一次,即在组件第一次完成渲染后执行,而useEffect的方法里面用到的 state 值就是当时最新的state值,可以用快照来理解。在接下来的时间里,无论组件重新渲染多少次,都不会改变里面的 state 的值,因为它只是当时的快照

有同学可能会说,把 name 加进 useEffect 依赖的数组里面就行了。如下:

useEffect(function() { return () => { saveDraft() } }, [name]) 

看上去好像是满足了需求,但依然有问题。因为我只想在组件退出的时候才保存,但现在的效果就是表单字段值一旦改变,就会保存,保存操作变得非常的频繁。

动图演示

丹尼尔:所以你想说 React Hooks 对此毫无办法?

当然不是啦,通过 useRefuseEffect 是可以实现上面的需求的。怎么实现?同学们就自己动下脑筋吧。当你实现出来后,你会发现代码不仅啰嗦,可读性还差。

丹尼尔:好了,请开始你的表演吧

😎有了上面的例子,这里就可以对安全地使用state作个描述了:

“安全地使用 state,就是无论你在何时何地以何种方式读取 state 的值时,它总是符合你的预期,总是最新的那个值,而不用你小心翼翼地去判断它会不会是个没更新的旧值”

官方提供了自定义Hooks的能力,就是想通过社区的共同努力,来持续完善Hooks。

接下来我们通过 【nice-hooks】这个第三方自定义Hooks的开源项目,使用它的 useSingleState 来代替 useState,话不多说,直接上代码

import React, { useEffect } from "react"; import { useSingleState } from "nice-hooks"; export const DemoComp1 = () => { const [state, setState] = useSingleState({ name: 'daniel' }); useEffect(function() { return () => { saveDraft() } }, []) function saveDraft() { console.log('Save Draft:', state.name); } return ( <div> <form> <input value={state.name} onChange={e => setState({name: e.target.value})}></input> </form> </div> ); }; 

先来个动图直接看下效果。完美~

动图演示

这里介绍一下useSingleState这个 hook:它使用类似于 class 形式的 this.statethis.setState 的方式来使用 state,所以非常容易上手。最重要是它可以安全地使用 state,并且拥有 callback 能力。

最后我们使用 useLifeCycle 这个 hook 对代码进一步完善。好了,下面的代码成品相比于直接使用官方的 hooks,是不是感觉好多了。

import React from "react"; import { useSingleState, useLifeCycle } from "nice-hooks"; export const DemoComp1 = () => { const [state, setState] = useSingleState({ name: 'daniel' }); useLifeCycle({ willUnmount() { saveDraft() } }) function saveDraft() { console.log('Save Draft:', state.name); } return ( <div> <form> <input value={state.name} onChange={e => setState({name: e.target.value})}></input> </form> </div> ); }; 

时间真快,又到了该说再见的时候。

如果你觉得这篇文章写得还可以,还请点个赞哦。

如果你觉得 nice-hooks 还不错,还请加颗☆哦。

ByeBye!


Keywords: react, hooks, nice-hooks

原文链接:https://my.oschina.net/danieldx/blog/3120748
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章