一、什么是 Hooks
React 一直都提倡使用
函数组件
，但是有时候需要使用 state 或者其他一些功能时，只能使用
类组件
，因为函数组件没有实例，没有生命周期函数，只有类组件才有
Hooks 是 React 16.8 新增的特性，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性
如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以直接在现有的函数组件中使用 Hooks
凡是 use 开头的 React API 都是 Hooks
二、Hooks 解决的问题
1. 类组件的不足
状态逻辑难复用：
在组件之间复用状态逻辑很难，可能要用到
render props
（
渲染属性
）或者
HOC
（
高阶组件
），但无论是渲染属性，还是高阶组件，都会在原先的组件外包裹一层父容器（一般都是 div 元素），
导致层级冗余
趋向复杂难以维护：
在生命周期函数中混杂不相干的逻辑（如：在
componentDidMount
中注册事件以及其他的逻辑，在
componentWillUnmount
中卸载事件，这样分散不集中的写法，很容易写出 bug ）
类组件中到处都是对状态的访问和处理，导致组件难以拆分成更小的组件
this 指向问题
：父组件给子组件传递函数时，必须绑定 this
react 中的组件四种绑定 this 方法的区别
class App extends React.Component<any, any> {
handleClick2;
constructor(props) {
super(props);
this.state = {
num: 1,
title: ' react study'
this.handleClick2 = this.handleClick1.bind(this);
handleClick1() {
this.setState({
num: this.state.num + 1,
handleClick3 = () => {
this.setState({
num: this.state.num + 1,
render() {
return (<div>
<h2>Ann, {this.state.num}</h2>
<button onClick={this.handleClick2}>btn1</button>
<button onClick={this.handleClick1.bind(this)}>btn2</button>
<button onClick={() => this.handleClick1()}>btn3</button>
<button onClick={this.handleClick3}>btn4</button>
</div>)
前提：子组件内部做了性能优化，如（
React.PureComponent
）
第一种是
在构造函数中绑定 this
：那么每次父组件刷新的时候，如果传递给子组件其他的 props 值不变，那么子组件就不会刷新；
第二种是
在 render() 函数里面绑定 this
：因为
bind 函数会返回一个新的函数
，所以每次父组件刷新时，都会重新生成一个函数，即使父组件传递给子组件其他的 props 值不变，子组件每次都会刷新；
第三种是
使用箭头函数
：父组件刷新的时候，即使两个箭头函数的函数体是一样的，都会生成一个新的箭头函数，所以子组件每次都会刷新；
第四种是
使用类的静态属性：原理和第一种方法差不多，比第一种更简洁
综上所述，如果不注意的话，很容易写成第三种写法，导致性能上有所损耗。
2. Hooks 优势
能优化类组件的三大问题
能在无需修改组件结构的情况下复用状态逻辑（自定义 Hooks ）
能将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据）
副作用的关注点分离
：
副作用指那些没有发生在数据向视图转换过程中的逻辑，如
ajax
请求、访问原生
dom
元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等
。以往这些副作用都是写在类组件生命周期函数中的。而
useEffect
在全部渲染完毕后才会执行，
useLayoutEffect
会在浏览器
layout
之后，
painting
之前执行。
三、注意事项
只能在
函数内部的最外层
调用 Hook，不要在循环、条件判断或者子函数中调用
只能在 React 的
函数组件
中调用 Hook，不要在其他 JavaScript 函数中调用
https://reactjs.org/warnings/invalid-hook-call-warning.html
四、useState & useMemo & useCallback
React 假设当你多次调用 useState 的时候，你能保证每次渲染时它们的
调用顺序
是不变的。
通过在函数组件里调用它来给组件添加一些内部 state，React会
在重复渲染时保留这个 state
useState 唯一的参数就是初始 state
useState 会返回一个数组
：
一个 state，一个更新 state 的函数
在初始化渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同
你可以在事件处理函数中或其他一些地方调用这个函数。它类似 class 组件的 this.setState，但是它
不会把新的 state 和旧的 state 进行合并，而是直接替换
const [state, setState] = useState(initialState);
4.1 使用例子
import React, { useState } from "react";
import ReactDOM from "react-dom";
function Child1(porps) {
console.log(porps);
const { num, handleClick } = porps;
return (
onClick={() => {
handleClick(num + 1);
child
</div>
function Child2(porps) {
const { text, handleClick } = porps;
return (
child2
<Grandson text={text} handleClick={handleClick} />
function Grandson(porps) {
console.log(porps);
const { text, handleClick } = porps;
return (
onClick={() => {
handleClick(text + 1);
grandson
function Parent() {
let [num, setNum] = useState(0);
let [text, setText] = useState(1);
return (
<Child1 num={num} handleClick={setNum} />
<Child2 text={text} handleClick={setText} />
const rootElement = document.getElementById("root");
ReactDOM.render(<Parent />, rootElement);
4.2 每次渲染都是独立的闭包
每一次渲染都有它自己的 Props 和 State
每一次渲染都有它自己的事件处理函数
当点击更新状态的时候，函数组件都会重新被调用，那么每次渲染都是独立的，取到的值不会受后面操作的影响
function Counter2(){
let [number,setNumber] = useState(0);
function alertNumber(){
setTimeout(()=>{
alert(number);
},3000);
return (
<p>{number}</p>
<button onClick={()=>setNumber(number+1)}>+</button>
<button onClick={alertNumber}>alertNumber</button>
4.3 函数式更新
如果新的 state 需要通过使用先前的 state 计算得出，那么可以将回调函数当做参数传递给 setState。该回调函数将接收先前的 state，并返回一个更新后的值。
function Counter(){
let [number,setNumber] = useState(0);
function lazy(){
setTimeout(() => {
setNumber(number=>number+1);
}, 3000);
return (
<p>{number}</p>
<button onClick={()=>setNumber(number+1)}>+</button>
<button onClick={lazy}>lazy</button>
4.4 惰性初始化 state
initialState 参数只会在组件的初始化渲染中起作用，后续渲染时会被忽略
如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用
function Counter5(props){
console.log('Counter5 render');
function getInitState(){
return {number:props.number};
let [counter,setCounter] = useState(getInitState);
return (
<p>{counter.number}</p>
<button onClick={()=>setCounter({number:counter.number+1})}>+</button>
<button onClick={()=>setCounter(counter)}>setCounter</button>
4.5 性能优化
4.5.1 Object.is （浅比较）
Hook 内部使用 Object.is 来比较新/旧 state 是否相等
与 class 组件中的 setState 方法不同，如果你修改状态的时候，传的状态值没有变化，则不重新渲染
与 class 组件中的 setState 方法不同，useState 不会自动合并更新对象。你可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果
function Counter(){
const [counter,setCounter] = useState({name:'计数器',number:0});
console.log('render Counter')
return (
<p>{counter.name}:{counter.number}</p>
<button onClick={()=>setCounter({...counter,number:counter.number+1})}>+</button>
<button onClick={()=>setCounter(counter)}>++</button>
4.5.2 减少渲染次数
默认情况，只要父组件状态变了（不管子组件依不依赖该状态），子组件也会重新渲染
一般的优化：
类组件：可以使用 pureComponent ；
函数组件：使用 React.memo ，将函数组件传递给 memo 之后，就会返回一个新的组件，新组件的功能：如果接受到的属性不变，则不重新渲染函数；
但是怎么保证属性不会变尼？这里使用 useState ，每次更新都是独立的，const [number,setNumber] = useState(0) 也就是说每次都会生成一个新的值（哪怕这个值没有变化），即使使用了 React.memo ，也还是会重新渲染
import React,{useState,memo,useMemo,useCallback} from 'react';
function SubCounter({onClick,data}){
console.log('SubCounter render');
return (
<button onClick={onClick}>{data.number}</button>
SubCounter = memo(SubCounter);
export default function Counter6(){
console.log('Counter render');
const [name,setName]= useState('计数器');
const [number,setNumber] = useState(0);
const data ={number};
const addClick = ()=>{
setNumber(number+1);
return (
<input type="text" value={name} onChange={(e)=>setName(e.target.value)}/>
<SubCounter data={data} onClick={addClick}/>
更深入的优化：
useCallback：接收一个内联回调函数参数和一个依赖项数组（子组件依赖父组件的状态，即子组件会使用到父组件的值） ，useCallback 会返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新
useMemo：把创建函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算
import React,{useState,memo,useMemo,useCallback} from 'react';
function SubCounter({onClick,data}){
console.log('SubCounter render');
return (
<button onClick={onClick}>{data.number}</button>
SubCounter = memo(SubCounter);
let oldData,oldAddClick;
export default function Counter2(){
console.log('Counter render');
const [name,setName]= useState('计数器');
const [number,setNumber] = useState(0);
const data = useMemo(()=>({number}),[number]);
console.log('data===oldData ',data===oldData);
oldData = data;
const addClick = useCallback(()=>{
setNumber(number+1);
},[number]);
console.log('addClick===oldAddClick ',addClick===oldAddClick);
oldAddClick=addClick;
return (
<input type="text" value={name} onChange={(e)=>setName(e.target.value)}/>
<SubCounter data={data} onClick={addClick}/>
4.6 useState 源码中的链表实现
import React from 'react';
import ReactDOM from 'react-dom';
let firstWorkInProgressHook = {memoizedState: null, next: null};
let workInProgressHook;
function useState(initState) {
let currentHook = workInProgressHook.next ? workInProgressHook.next : {memoizedState: initState, next: null};
function setState(newState) {
currentHook.memoizedState = newState;
render();
if (workInProgressHook.next) {
workInProgressHook = workInProgressHook.next;
} else {
workInProgressHook.next = currentHook;
workInProgressHook = currentHook;
return [currentHook.memoizedState, setState];
function Counter() {
const [name, setName] = useState('计数器');
const [number, setNumber] = useState(0);
return (
<p>{name}:{number}</p>
<button onClick={() => setName('新计数器' + Date.now())}>新计数器</button>
<button onClick={() => setNumber(number + 1)}>+</button>
function render() {
// 每次重新渲染的时候，都将 workInProgressHook 指向 firstWorkInProgressHook
workInProgressHook = firstWorkInProgressHook;
ReactDOM.render(<Counter/>, document.getElementById('root'));
render();
五、useReducer
useReducer 和 redux 中 reducer 很像
useState 内部就是靠 useReducer 来实现的
useState 的替代方案，它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法
在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等
let initialState = 0;
const [state, dispatch] = useReducer(reducer, initialState, init);
const initialState = 0;
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {number: state.number + 1};
case 'decrement':
return {number: state.number - 1};
default:
throw new Error();
function init(initialState){
return {number:initialState};
function Counter(){
const [state, dispatch] = useReducer(reducer, initialState,init);
return (
Count: {state.number}
<button onClick={() => dispatch({type: 'increment'})}>+</button>
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
六、useContext
接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值
当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定
当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值
useContext(MyContext) 相当于 class 组件中的 static contextType = MyContext 或者 <MyContext.Consumer>
useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化。你仍然需要在上层组件树中使用 <MyContext.Provider> 来为下层组件提供 context
import React,{useState,memo,useMemo,useCallback,useReducer,createContext,useContext} from 'react';
import ReactDOM from 'react-dom';
const initialState = 0;
function reducer(state=initialState,action){
switch(action.type){
case 'ADD':
return {number:state.number+1};
default:
break;
const CounterContext = createContext();
function SubCounter_one(){
return (
<CounterContext.Consumer>
value=>(
<p>{value.state.number}</p>
<button onClick={()=>value.dispatch({type:'ADD'})}>+</button>
</CounterContext.Consumer>
// 第二种获取 CounterContext 方法：使用 hook ，更简洁
function SubCounter(){
const {state, dispatch} = useContext(CounterContext);
return (
<p>{state.number}</p>
<button onClick={()=>dispatch({type:'ADD'})}>+</button>
/* class SubCounter extends React.Component{
static contextTypes = CounterContext
this.context = {state, dispatch}
function Counter(){
const [state, dispatch] = useReducer((reducer), initialState, ()=>({number:initialState}));
return (
<CounterContext.Provider value={{state, dispatch}}>
<SubCounter/>
</CounterContext.Provider>
ReactDOM.render(<Counter />, document.getElementById('root'));
七、useEffect
effect（副作用）：指那些没有发生在数据向视图转换过程中的逻辑，如 ajax 请求、访问原生dom 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。
副作用操作可以分两类：需要清除的和不需要清除的。
原先在函数组件内（这里指在 React 渲染阶段）改变 dom 、发送 ajax 请求以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性
useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API
useEffect 接收一个函数，该函数会在组件渲染到屏幕之后才执行，该函数有要求：要么返回一个能清除副作用的函数，要么就不返回任何内容
与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），有单独的 useLayoutEffect Hook 供你使用，其 API 与 useEffect 相同。
7.1 使用 class 组件实现修改标题
在这个 class 中，我们需要在两个生命周期函数中编写重复的代码，这是因为很多情况下，我们希望在组件加载和更新时执行同样的操作。我们希望它在每次渲染之后执行，但 React 的 class 组件没有提供这样的方法。即使我们提取出一个方法，我们还是要在两个地方调用它。而 useEffect 会在第一次渲染之后和每次更新之后都会执行
class Counter extends React.Component{
state = {number:0};
add = ()=>{
this.setState({number:this.state.number+1});
componentDidMount(){
this.changeTitle();
componentDidUpdate(){
this.changeTitle();
changeTitle = ()=>{
document.title = `你已经点击了${this.state.number}次`;
render(){
return (
<p>{this.state.number}</p>
<button onClick={this.add}>+</button>
7.2 使用 useEffect 来实现修改标题
每次我们重新渲染，都会生成新的 effect，替换掉之前的。某种意义上讲，effect 更像是渲染结果的一部分 —— 每个 effect 属于一次特定的渲染。
import React,{Component,useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
function Counter(){
const [number,setNumber] = useState(0);
useEffect(() => {
document.title = `你点击了${number}次`;
return (
<p>{number}</p>
<button onClick={()=>setNumber(number+1)}>+</button>
ReactDOM.render(<Counter />, document.getElementById('root'));
7.3 清除副作用
副作用函数还可以通过返回一个函数来指定如何清除副作用，为防止内存泄漏，清除函数会在组件卸载前执行。如果组件多次渲染，则在执行下一个 effect 之前，上一个 effect 就已被清除。
function Counter(){
let [number,setNumber] = useState(0);
let [text,setText] = useState('');
useEffect(()=>{
console.log('开启一个新的定时器')
let $timer = setInterval(()=>{
setNumber(number=>number+1);
},1000);
