React-Hooks-使用总结
date
Aug 30, 2020
slug
React-Hooks-使用总结
status
Published
tags
JavaScript
React
React hooks
summary
type
Post
React Hooks 使用总结
React Hooks 作为官方推荐的 React 打开方式,是否真的很香?我经过在项目中不断使用后,觉得 Hooks 是真香,不过过程中踩过的坑也不少,需要不断总结才能用好它,下面总结了一些使用经验。
引言
Hooks 组件其实是能力更强的函数式组件,函数式组件大家应该都用过,也可能用过并没有觉察到,我举几个例子:
- 类组件中,我们经常会把 render 方法中的某些模块抽象出来,比如:循环列表,我们可以直接写在 render 方法的 jsx 中,不过抽出一个方法,把 list 数据传过去,在方法中循环生成 jsx 返回来,代码更清晰,复用性更好。
- 更进一步,我们可以把通用的渲染方法放到父组件,供所有子组件复用。
- 再进一步,直接就写成一个纯函数,复用性更好,其他组件都可以来复用它。这个独立的渲染函数在 React 里面就是一个函数式组件,它就是一个组件,不过它没有对象实例、对象属性和对象方法。
Hooks 组件其实就是函数式组件,不过它是增强版的,它有状态,并且可以在状态变化的时候做一些响应处理。
Hooks 组件的重要特点
看完引言,不知道大家有没有抓到重点,我来总结一下(个人经验):
- 首先,最根本的区别:函数式组件没有对象实例、对象属性和对象方法。这点很重要,很多 Hooks 组件的特殊性就因此而来。
- 其次,Hooks 组件和函数式组件的区别:Hooks 有状态,并且可以定义状态响应逻辑,Hooks 中叫副作用(Effect)。
- 然后,Hooks 组件没有生命周期钩子,不过我们可以通过状态响应去实现大部分钩子函数同等的效果(参阅官方文档)。
- 最后,要注意 Hooks 组件中的闭包。这里容易掉坑!
Hooks 为什么香
Hooks 刚出来时,这个问题就是大家最关心的,官方也有两点说明,不过这两点也需要大量实践和总结才会深有感受。
在组件之间复用状态逻辑很难
引言中有说到复用:抽取类方法、抽取父类方法、抽取纯函数组件。
- 抽取类方法和父类方法,存在的问题是,只有这类组件或这类父子组件可以复用。而且,抽取父类方法还会面临子类继承时,错误覆盖的问题。
- 抽取纯函数组件,这种方式其实挺好的,不过只适合纯逻辑的抽取,因为它没有状态,只有 props, 很多场景满足不了需求。 如果我想写一个定时器,还得使用者来定义计数状态,这个就不符合解耦原则了,而且也没有生命周期钩子,我无法在组件卸载时把定时器关掉。
然而,Hooks 解决了纯函数组件的这些难题,同时还保持了纯暗示组件的优点。
类组件中也有解决方案:render props 和 高阶组件,不过使用起来很麻烦,且难以理解。
复杂组件变得难以理解
类组件的常规做法就是:在 didMount 中去做 数据请求、事件监听的绑定、定时器的初始化等操作,然后又要在 willUnmount 中去清除掉它们。这些不相关的逻辑被强行杂糅进生命周期钩子函数中了,这会让测试和阅读都有困难。
Hooks 中没有生命周期钩子函数,你完全可以自己去设计组织你的逻辑!
欢迎交流
个人读书公众号,欢迎交流!