React 进阶:Hooks 该怎么用
2019-06-26 07:55
169 查看
这是 React 进阶系列的第一篇文章,这个系列内容会包括一些 React 的新知识以及原理内容,有兴趣的可以持续关注。注意:Hooks 在 React 16.8 版本中才正式发布
为什么要用 Hooks
组件嵌套问题
之前如果我们需要抽离一些重复的逻辑,就会选择 HOC 或者 render props 的方式。但是通过这样的方式去实现组件,你打开 React DevTools 就会发现组件被各种其他组件包裹在里面。这种方式首先提高了 debug 的难度,并且也很难实现共享状态。但是通过 Hooks 的方式去抽离重复逻辑的话,一是不会增加组件的嵌套,二是可以实现状态的共享。
class 组件的问题
如果我们需要一个管理状态的组件,那么就必须使用 class 的方式去创建一个组件。但是一旦 class 组件变得复杂,那么四散的代码就很不容易维护。另外 class 组件通过 Babel 编译出来的代码也相比函数组件多得多。Hooks 能够让我们通过函数组件的方式去管理状态,并且也能将四散的业务逻辑写成一个个 Hooks 便于复用以及维护。
Hooks 怎么用
前面说了一些 Hooks 的好处,接下来我们就进入正题,通过实现一个计数器来学习几个常用的 Hooks。
useState
useState的用法很简单,传入一个初始
state,返回一个
state以及修改
state的函数。
setCount用法是和
setState一样的,可以传入一个新的状态或者函数。
useState的用法是不是很简单。假如现在需要我们实现一个计数器,按照之前的方式只能通过 class 的方式去写,但是现在我们可以通过函数组件 + Hooks 的方式去实现这个功能。
useEffect
现在我们的计时器需求又升级了,需要在组件更新以后打印出当前的计数,这时候我们可以通过useEffect来实现
以上代码当我们改变计数的时候,就会打印出正确的计数,我们其实基本可以把
useEffect看成是
componentDidUpdate,它们的区别我们可以在下一个例子中看到。另外
useEffect还可以返回一个函数,功能类似于
componentWillUnmount
当我们每次更新计数时,都会先打印
clean这行 log现在我们的需求再次升级了,需要我们在计数器更新以后延时两秒打印出计数。实现这个再简单不过了,我们改造下
useEffect内部的代码即可
当我们快速点击按钮后,可以在两秒延时以后看到正确的计数。但是如果我们将这段代码写到
componentDidUpdate中,事情就变得不一样了。
对于这段代码来说,如果我们快速点击按钮,你会在延时两秒后看到打印出了相同的几个计数。这是因为在
useEffect中我们通过闭包的方式每次都捕获到了正确的计数。但是在
componentDidUpdate中,通过
this.state.count的方式只能拿到最新的状态,因为这是一个对象。当然如果你只想拿到最新的
state的话,你可以使用
useRef来实现。
useRef可以用来存储任何会改变的值,解决了在函数组件上不能通过实例去存储数据的问题。另外你还可以
useRef来访问到改变之前的数据。
现在需求再次升级,我们需要通过接口来获取初始计数,我们通过
setTimeout来模拟这个行为。
如果你去执行这段代码,会发现
useEffect无限执行。这是因为在
useEffect内部再次触发了状态更新,因此
useEffect会再次执行。解决这个问题我们可以通过
useEffect的第二个参数解决
第二个参数传入一个依赖数组,只有依赖的属性变更了,才会再次触发
useEffect的执行。在上述例子中,我们传入一个空数组就代表这个
useEffect只会执行一次。现在我们的代码有点丑陋了,可以将请求的这部分代码单独抽离成一个函数,你可能会这样写
但是这段代码出现的问题和一开始的是一样的,还是会无限执行。这是因为虽然你传入了依赖,但是每次组件更新的时候
fetch都会重新创建,因此
useEffect认为依赖已经更新了,所以再次执行回调。解决这个问题我们需要使用到一个新的 Hooks
useCallback。这个 Hooks 可以生成一个不随着组件更新而再次创建的 callback,接下来我们通过这个 Hooks 再次改造下代码
大功告成,我们已经通过几个 Hooks + 函数组件完美实现了原本需要 class 组件才能完成的事情。
总结
通过几个计数器的需求我们学习了一些常用的 Hooks,接下来总结一下这部分的内容。useState:传入我们所需的初始状态,返回一个常量状态以及改变状态的函数useEffect:第一个参数接受一个 callback,每次组件更新都会执行这个 callback,并且 callback 可以返回一个函数,该函数会在每次组件销毁前执行。如果
useEffect内部有依赖外部的属性,并且希望依赖属性不改变就不重复执行
useEffect的话,可以传入一个依赖数组作为第二个参数useRef:如果你需要有一个地方来存储变化的数据useCallback:如果你需要一个不会随着组件更新而重新创建的 callback
最后
如果你想进【大前端交流群】,关注公众号点击“交流加群”添加机器人自动拉你入群。关注我第一时间接收最新干货。
相关文章推荐
- React-Native进阶_6.导航 Naviagtion传递数据并展示
- React怎么创建.babelrc文件
- iOS 高级工程师是怎么进阶的(补充版20+点)
- React-navigation之进阶2_repint
- React Native进阶之Animated动画库详解
- 关于Vue.js和React.js,听听国外的开发者怎么说?
- React_Native 再学习5--TypeScript学习2——进阶语法
- React 进阶之高阶组件
- react的Hooks
- React学习之进阶ref的必要性(十三)
- SegmentFault 技术周刊 Vol.9 - 进阶吧!React
- React学习之进阶终临高阶组件(二十一)
- 2018最新React实战进阶45讲
- React学习之进阶ref的必要性(十三)
- Python进阶系列之怎么写出pythonic的代码
- 2019最新某React实战进阶45讲
- React进阶之高阶组件
- 程序员进阶:怎么成为一个软件架构师?
- Redux 17 - 进阶:和React Router一起使用(Usage with React Router)
- 新玩具,React v16.7.0-alpha Hooks