Hooks are an upcoming feature that lets you use state and other React features without writing a class. They’re currently in React v16.7.0-alpha.
What
Hooks 是 React 函数组件内的一类特殊函数，使开发者能在 function component 里继续使用 state 和 lifecycle。通过 Custom Hooks 可以复用业务逻辑，从而避免添加额外的components。
Why
过去我们使用React时，component 基本分为两种：function component 和 class component 。其中function component就是一个 pure render component，不存在 state 和 lifecycle 。function component 使组件之间耦合度降低，但一旦需要 state 或 lifecycle ，就需要变成 class component 。而 class component 也会带来一些缺点：
- React 组件树过于臃肿
单向数据流使组件间的通信必须一层一层往下传，当有些状态不适合使用 Redux 这种 global store 的情况下，此时组件之间的逻辑复用和沟通就会变得十分困难。为此，过去我们会使用各种 HOC（高阶组件）来传递状态。这就导致了当应用规模越来越庞大的时候，会多了很多无关 UI 的 wrapper 组件，也就使得 React 组件树变得越来越臃肿，开发和调试效率随之变低。
Write
了解了Hooks的基本知识，接下来就是如何去使用 Hooks API 了。Hooks 主要分为三种：
- State Hook （在 function component 使用 state）
- Effect Hook （在 function component 使用 lifecycle 和 side effect ）
- Custom Hook （通过自定义Hook来复用逻辑）
State Hook
官方 Example:
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Hook 的本质实际上就是一个特殊的函数，通常以"use"开头。这里的 useState 就是一个Hook，通过它可以实现在组件内使用state。useState 会返回一个pair：分别是当前 state 的值和修改这个 state 的函数。用法有点类似 class component 里的 this.setState，只是这里不会合并 state 对象，而且注意到没，这里的 useState 的初始值是0，跟 this.state 不同在于它不需要是一个 Object。
官方有个例子对比 useState 与 this.state 的。（传送门：https://reactjs.org/docs/hooks-state.html）
多个 state 变量
function ExampleWithManyStates() {
// Declare multiple state variables!
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
// ...
}
你完全可以声明多个 useState，一点问题都木有！这种做法带来的好处是：我们的 state 将不会变得非常臃肿，每个 state 都非常直观，独立。
Effect Hook
我们经常在 React 组件中进行拉取数据、订阅或操作DOM，这种行为被称为 "side effects"（副作用），这种行为通常只能在生命周期中执行，而不能在 render 里。
React 通过 useEffect 来解决这样的问题，具体怎么用我们看看例子：
import { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
这种做法相当于把 React classes 里的 componentDidMount ，componentDidUpdate，componentWillUnmount 合并成了一个。
由于 Hooks 是定义在最外层函数的，所以这里是能访问到 props 和 state 的，它默认会在每一次 render 后都会被调用（包括第一次）。
同样的，官方有个例子对比了 useEffect 和 class lifecycle 的。（传送门：https://reactjs.org/docs/hooks-effect.html）
cleanup
通常我们的大部分 effect 行为都是不需要清理，比如网络请求、DOM操作或者日志记录等。但如果我们在 effects 进行了类似外部数据订阅这样的操作，那么我们就需要在 Unmount 前取消订阅。针对这种场景，可以通过在 useEffect 中返回一个函数的方式进行清理。此处应该有代码：
import { useState, useEffect } from 'react';
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
// Specify how to clean up after this effect:
return function cleanup() {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
乍一看，使用 Hook 的方式相对于 class component 只是代码写少点而已，但实际上它带来的好处可不止这些。如果用 class component 的话，我们需要在 componentDidMount 订阅 props.friend.id 的状态，然后在 componentWillUnmount 中取消订阅。
componentDidMount() {
ChatAPI.subscribeToFriendStatus(
this.props.friend.id,
this.handleStatusChange
);
}
componentWillUnmount() {
ChatAPI.unsubscribeFromFriendStatus(
this.props.friend.id,
this.handleStatusChange
);
}
但这种做法可能会引发bug（试想一下，如果 friend prop 变了会怎样？）。这种情况下，页面上显示的状态就不是当前这个 friend 的啦~ 所以这是一个bug，解决的方式就是在 componentDidUpdate 中先进行 unsubscribe，再重新 subscribe。
componentDidUpdate(prevProps) {
// Unsubscribe from the previous friend.id
ChatAPI.unsubscribeFromFriendStatus(
prevProps.friend.id,
this.handleStatusChange
);
// Subscribe to the next friend.id
ChatAPI.subscribeToFriendStatus(
this.props.friend.id,
this.handleStatusChange
);
}
在实际开发中，我们可能经常会没考虑到这种情况。那么现在有了 Hook，你可以不用担心了！
性能优化之 Skipping effects
每次 render 都会 cleanup 或执行 effect，这可能会导致性能问题。在 class component 中我们通常会在 componentDidUpdate 里进行对比判断。而在 Hook 里，我们可以通过给 useEffect 传递第二个参数（数组形式）来选择 Hook 的触发时机，
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes
同步的 useLayoutEffect
必须说明的是，useEffect 是异步的，即它不会阻塞浏览器渲染页面，因为大多数情况下，这些 effects 都不需要同步执行。在极少数的场景下，可以选择用 useLayoutEffect。它会在 re-render 后同步执行，阻塞浏览器进行渲染。
Custom Hook
过去我们在组件中复用逻辑的通常做法是使用高阶函数 ( high-order component ) 和 render props。如今有了 Hooks，我们可以避免添加更多的组件到我们的组件树中了。
我们把上面 FriendStatus 稍加改动。
import { useState, useEffect } from 'react';
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
它对外接受一个 friendId 作为参数，然后返回具体状态。而在其他组件里引用也非常简单：
function FriendStatus(props) {
const isOnline = useFriendStatus(props.friend.id);
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
这样，复用了逻辑而又不需要引入新的 state，简直完美！
其他 built-in Hooks
还好很多内置的 Hooks，如：
-
useContext（替代<Context.Consumer> 使用render props 的写法）
function Example() {
const locale = useContext(LocaleContext);
const theme = useContext(ThemeContext);
// ...
}
-
useReducer（相当于组件自带 redux reducer，负责 dispatch action 并更新 state）
function Todos() {
const [todos, dispatch] = useReducer(todosReducer);
// ...
注意事项
- 在最外层函数使用 Hooks ，不要在循环块、条件块或函数内调用 Hooks；
- 只在 React function component 里使用 Hooks（除非是Custom Hooks，否则不要在普通函数中使用 Hooks）
最后总结一下
在 React 里，Hooks 就是一系列的特殊函数，在 function component 内部“勾住” 组件的 state 和 lifecycle。Hook 是向后兼容的，但官方不推荐大家将旧代码的 class component 都改成 Hook，大家可以在新代码中体验一下这种写法。针对 Hooks 新特性的官方文档很详细，这里限于篇幅，就不过多讲了，推荐大家去看官方文档。
掰掰~
