概述
React的两套API
以前,React API 只有一套,现在有两套:类(class)API
和基于函数的钩子(hooks) API
。
任何一个组件,可以用类来写,也可以用钩子来写。下面是类的写法。
class HelloReact extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
钩子(也就是函数)的写法如下
function HelloReact(props) {
return <h1>Hello, {props.name}</h1>;
}
官方推荐使用钩子(函数),而不是类。因为钩子更简洁,代码量少,用起来比较"轻",而类比较"重"。而且,钩子是函数,更符合 React 函数式的本质。
下面是类组件(左)和函数组件(右)代码量的比较
类和函数的差异
-
类(class)是数据和逻辑的封装。 也就是说,组件的状态和操作方法是封装在一起的。如果选择了类的写法,就应该把相关的数据和操作,都写在同一个 class 里面。
-
函数一般来说,只应该做一件事,就是返回一个值。 如果有多个操作,每个操作应该写成一个单独的函数。而且,数据的状态应该与操作方法分离。根据这种理念,React 的函数组件只应该做一件事情:返回组件的 HTML 代码,而没有其他的功能。
-
这个函数只做一件事,就是根据输入的参数,返回组件的 HTML 代码。这种只进行单纯的数据计算(换算)的函数,在函数式编程里面称为 “纯函数”(pure function)
副效应(副作用)是什么?
-
如果纯函数只能进行数据计算,那些不涉及计算的操作(比如:生成日志、储存数据、改变应用状态等等)应该写在哪里呢?
-
函数式编程将那些跟数据计算无关的操作,都称为 “副效应” 或者“副作用”(side effect) 。如果函数内部直接包含产生副效应的操作,就不再是纯函数了,我们称之为不纯的函数。
- 纯函数内部只有通过间接的手段(即通过其他函数调用),才能包含副效应
钩子(hook)出现的意义
钩子(hook)就是 React 函数组件的副效应解决方案,用来为函数组件引入副效应。 函数组件的主体只应该用来返回组件的 HTML 代码,所有的其他操作(副效应)都必须通过钩子引入。
- hooks之间的状态是独立的,有自己独立的上下文,不会出现混淆状态的情况
- 让函数组件有了状态管理
- 解决了组件树不直观、类组件难维护、逻辑不易复用的问题
- 由于函数每次渲染都会执行,所以React中多了一个状态控制,传入第二个参数,这样就可以避免函数重复执行的副效应
React 为许多常见的操作(副效应),都提供了专用的钩子
序号 | 钩子(hook)名称 | 说明 |
---|---|---|
1 | useState | 保存状态 |
2 | useEffect | 解决副效应 |
3 | useLayoutEffect | 监测DOM |
4 | useMemo | 组件跟随状态更新 |
5 | useCallback | 组件跟随状态更新 |
6 | useRef | 长久保存数据 |
7 | useContext | 组件之间共享状态 |
8 | useReducer | 复杂逻辑简单化 |
9 | 自定义hooks |
上面这些钩子,都是引入某种特定的副效应,而 useEffect()
是通用的副效应钩子 。找不到对应的钩子时,就可以用它。
三大框架对比
框架名称 | 框架特性 |
---|---|
Angular | 1. 双向数据绑定 2.强大的、丰富的模板指令 3.模板能力非常强大 4.静态路由 5.代码自由度较低 |
Vue | 1.轻量、简洁易用 2.双向数据绑定 3.模板能力较强 4.动态路由 5.插件化 |
React | 1.自由度很高 2.一切都是JavaScript 3.可以与第三方类库很好的配合 4.单向数据流 |
为什么学习hooks
- 高效开发
- 提高组件复用性
- 提高逻辑复用性
- 提升性能
- 实现更复杂的功能
应用场景
- 利用hooks取代生命周期函数
- 让函数组件加上状态
- 组件辅助函数
- 处理发送请求
- 存取数据
- 做好性能优化
新版本特性解读
- render支持返回数组和字符串
- 错误边界
- 提升SSR渲染速度,支持流式渲染
- 减少文件体积
- 生命周期函数更新
- 由于异步渲染的改动,有可能导致
componentWillMount
,componentWillReceiveProps
,componentWillUpdate
,所以抛弃三个生命周期函数
- 由于异步渲染的改动,有可能导致
createContext
——不必一层层传递,可使用此方法指定生效范围createRef
hooks
:开发方式大更新
Hook使用规则
- 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
- 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。
- 自定义的 Hook 中调用