react hooks api
react hooks api
hooks API是 React 16.8的"新增"功能（16.8更新于2年前）。官网是这么说的：
•你可用可不用•完全向后兼容•不打算移除旧有的class组件
借助hook，你可以抽离业务，写出更加“纯粹”的代码。但是坊间都说，hooks API是 React 的未来。
1.组件类的缺点
React 的核心是组件。v16.8 版本之前，组件的标准写法是类（class）。
如果让你写一个反映按钮点击状态的界面，用组件类来写是这样的：
import React, { Component } from "react";
export default class Button extends Component {
constructor() {
super();
this.state = { buttonText: "Click me, please" };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(() => {
return { buttonText: "Thanks, been clicked!" };
});
}
render() {
const { buttonText } = this.state;
return <button onClick={this.handleClick}>{buttonText}</button>;
}
}这个组件类仅仅是一个按钮，但可以看到，它的代码已经很"重"了。真实的 React App 由多个类按照层级，一层层构成，复杂度成倍增长。再加入 Redux，就变得更复杂。
Hooks的出现是为了解决 React 长久以来存在的一些问题：
•带组件状态的逻辑很难重用：为了解决这个问题，需要引入render props或higher-order components这样的设计模式，如react-redux提供的connect方法。这种方案不够直观，而且需要改变组件的层级结构，极端情况下会有多个wrapper嵌套调用的情况。——Hooks可以在不改变组件层级关系的前提下，方便的重用带状态的逻辑。•复杂组件难于理解：大量的业务逻辑需要放在componentDidMount和componentDidUpdate等生命周期函数中，而且往往一个生命周期函数中会包含多个不相关的业务逻辑，如日志记录和数据请求会同时放在componentDidMount中。另一方面，相关的业务逻辑也有可能会放在不同的生命周期函数中，如组件挂载的时候订阅事件，卸载的时候取消订阅，就需要同时在componentDidMount和componentWillUnmount中写相关逻辑。——Hooks可以封装相关联的业务逻辑，让代码结构更加清晰。•难于理解的 Class 组件：JS 中的this关键字让不少人吃过苦头，它的取值与其它面向对象语言都不一样，是在运行时决定的。为了解决这一痛点，才会有剪头函数的this绑定特性。另外 React 中还有Class Component和Function Component的概念，什么时候应该用什么组件也是一件纠结的事情。代码优化方面，对Class Component进行预编译和压缩会比普通函数困难得多，而且还容易出问题。
Hooks可以在不引入 Class 的前提下，使用 React 的各种特性。
Redux 的作者 Dan Abramov 总结了组件类的几个缺点。
•大型组件很难拆分和重构，也很难测试。•业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑。•组件类引入了复杂的编程模式，比如 render props 和高阶组件。
2、函数组件
React 团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。组件的最佳写法应该是函数，而不是类。
React 早就支持函数组件，下面就是一个例子。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}但是，这种写法有重大限制，必须是纯函数，不能包含状态，也不支持生命周期方法，因此无法取代类。
React Hooks 的设计目的，就是加强版函数组件，完全不使用"类"，就能写出一个全功能的组件。
3、Hook 的含义
Hook 这个单词的意思是"钩子"。
React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。React Hooks 就是那些钩子。
你需要什么功能，就使用什么钩子。React 默认提供了一些常用钩子，你也可以封装自己的钩子。
所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 usexxx。
下面介绍 React 默认提供的四个最常用的钩子。
•useState()•useContext()•useReducer()•useEffect()
3.1 useState()：状态钩子
useState()用于为函数组件引入状态（state）。纯函数不能有状态，所以把状态放在钩子里面。
本文前面那个组件类，用户点击按钮，会导致按钮的文字改变，文字取决于用户是否点击，这就是状态。使用useState()重写如下。
import React, { useState } from "react";
export default function Button() {
// 定义状态（useState的参数），以及改变状态的方法
const [buttonText, setButtonText] = useState("Click me, please");
// 调用`setButtonText`改变状态
function handleClick() {
return setButtonText("Thanks, been clicked!");
}
return <button onClick={handleClick}>{buttonText}</button>;
}上面代码中，Button 组件是一个函数，内部使用useState()钩子引入状态。
useState()这个函数接受状态的初始值，作为参数，上例的初始值为按钮的文字。该函数返回一个数组，数组的第一个成员是一个变量（上例是buttonText），指向状态的当前值。第二个成员是一个函数，用来更新状态，约定是set前缀加上状态的变量名（上例是setButtonText）。
3.2 useContext()：共享状态钩子
如果需要在组件之间共享状态，可以使用useContext()。useContext可以很方便的去订阅 context 的改变，并在合适的时候重新渲染组件。
现有两个组件 Navbar 和 Messages，我们希望它们之间共享状态。
<div className="App">
<Navbar/>
<Messages/>
</div>根据react的哲学，所有的状态应该从顶层传入——使用hooks也不例外，第一步就是使用 React Context API，在组件外部建立一个 Context。
// 创建状态容器：React.createContext
const AppContext = React.createContext({});组件封装代码如下。
// 容器组件：通过AppContext.Provider包裹
const App = function () {
return (<AppContext.Provider
value={{ username: 'djtao' }}>
<div className="App">
<Navbar />
<Messages />
</div>
</AppContext.Provider>);
}如果子组件要用username，只需在组件内解构声明即可：
const { useContext } = React;
const Navbar = function () {
// 获取状态
const { username } = useContext(AppContext);
return (<div>
<div>Nav:hello, <span style={{textDecoration:'underline'}}>{username}</span></div>
</div>)
}
// message子组件
const Messages = function () {
const { username } = useContext(AppContext);
return (<div>
<div>Messages:1 message for <span style={{textDecoration:'underline'}}>{username}</span></div>
</div>)
}3.3 useReducer()：action 钩子
React 本身不提供状态管理功能，通常需要使用外部库。这方面最常用的库是 Redux。
Redux 的核心概念是，组件发出 action 与状态管理器通信。状态管理器收到 action 以后，使用 Reducer 函数算出新的状态，Reducer 函数的形式是
(state, action) => newState。useReducers()钩子用来引入 Reducer 功能:
const [state, dispatch] = useReducer(reducer, initialState);上面是useReducer()的基本用法，它接受 Reducer 函数和状态的初始值作为参数，返回一个数组。数组的第一个成员是状态的当前值，第二个成员是发送 action 的dispatch函数。
凡是涉及到状态管理，都使用计数器为例子。
// 定义一个reducer
const reducer = function (state, action) {
switch (action.type) {
case 'increase':
return {
...state,
count: state.count + 1
};
case 'decrease':
return {
...state,
count: state.count - 1
};
default:
return state;
}
};组件代码如下。
const { useReducer } = React;
const App = function () {
const [state, dispatch] = useReducer(reducer, { count: 0 });
const decreaseAction = () => {
dispatch({ type: 'decrease' });
};
const increaseAction = () => {
dispatch({ type: 'increase' });
};
return (<div style={{ display: 'flex' }}>
<button onClick={decreaseAction}> - </button>
<p>{state.count}</p>
<button onClick={increaseAction}> + </button>
</div>)
}那么一个计数器就做好了。
由于 Hooks 可以提供共享状态和 Reducer 函数，所以它在这些方面可以取代 Redux。这对组件层级很深的场景特别有用，不需要一层一层的把 state 和 callback 往下传。
但是，它没法提供中间件（middleware）和时间旅行（time travel），如果你需要这两个功能，还是要用 Redux。
3.4 useEffect()：副作用钩子
useEffect()用来引入具有副作用的操作，副作用最常见的就是:网络请求、订阅某个模块或者 DOM 操作。useEffect会在每次 DOM 渲染后执行，不会阻塞页面渲染。它同时具备componentDidMount、componentDidUpdate和componentWillUnmount三个生命周期函数的执行时机。
useEffect()的用法如下。
useEffect(() => {
// Async Action
}, [dependencies]);上面用法中，useEffect()接受两个参数。第一个参数是一个函数，异步操作的代码放在里面。第二个参数是一个数组，用于给出 Effect 的依赖项，只要这个数组发生变化，useEffect()就会执行。第二个参数可以省略，这时每次组件渲染时，就会执行useEffect()。
当useEffect的返回值是一个函数的时候，React 会在下一次执行这个副作用之前执行一遍清理工作，整个组件的生命周期流程可以这么理解：
组件挂载 --> 执行副作用 --> 组件更新 --> 执行清理函数 --> 执行副作用 --> 组件更新 --> 执行清理函数 --> 组件卸载
下面看一个模拟请求数据的例子：页面加载进来，请求数据，替换loading状态，填充内容：
const fakeUserInfo = {
'1': {
name: 'djtao',
job: 'Frontend Programmer'
},
'2': {
name: 'dangjingtao',
job: 'coder'
}
}
const { useState, useEffect } = React;
const App = function ({ id }) {
const [userInfo, setUserInfo] = useState({ name: '', job: '' });
const [loading, setLoading] = useState(true);
const getData = (_id) => {
return fakeUserInfo[_id] ? fakeUserInfo[_id] : {};
}
useEffect(() => {
setLoading(true);
window.setTimeout(() => {
const data = getData('1');
setUserInfo(data);
setLoading(false);
}, 1000);
}, [id])
if (loading === true) {
return <p>Loading ...</p>
}
return (<ul>
<li>Name: {userInfo.name}</li>
<li>Job: {userInfo.job}</li>
</ul>);
}这个例子中，经过1s后切换到“请求到”的数据。
3.5 自定义hook
自定义 Hook 的命名有讲究，必须以use开头，在里面可以调用其它的 Hook。入参和返回值都可以根据需要自定义，没有特殊的约定。使用也像普通的函数调用一样，Hook 里面其它的 Hook（如useEffect）会自动在合适的时候调用：
在3.4的例子中，完全可以进一步封装。定义一个usePersonInfo，返回对应的loading状态。
const useUserInfo = ({id}) => {
const [userInfo, setUserInfo] = useState({ name: '', job: '' });
const [loading, setLoading] = useState(true);
const getData = (_id) => {
return fakeUserInfo[_id] ? fakeUserInfo[_id] : {};
}
useEffect(() => {
setLoading(true);
window.setTimeout(() => {
const data = getData(id);
setUserInfo(data);
setLoading(false);
}, 1000);
}, [id]);
return {userInfo,loading};
}然后App组件就可以很轻松地使用这些组件了。
const App = function () {
const {userInfo,loading}=useUserInfo({id:'1'});
if (loading === true) {
return <p>Loading ...</p>
}
return (<ul>
<li>Name: {userInfo.name}</li>
<li>Job: {userInfo.job}</li>
</ul>);
}使用 Hooks 的时候必须遵守 2 条规则：
只能在代码的第一层调用 Hooks，不能在循环、条件分支或者嵌套函数中调用 Hooks。
只能在Function Component或者自定义 Hook 中调用 Hooks，不能在普通的 JS 函数中调用。
Hooks 的设计极度依赖其定义时候的顺序，如果在后序的 render 中 Hooks 的调用顺序发生变化，就会出现不可预知的问题。上面 2 条规则都是为了保证 Hooks 调用顺序的稳定性。为了贯彻这 2 条规则，React 提供一个 ESLint plugin 来做静态代码检测：eslint-plugin-react-hooks。
腾讯云开发者
