概述

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 中调用