React全家桶 - React Hooks1. React Hooks 2. 解决的问题 3. 注意事项 4. use

1. React Hooks

Hooks是React 16.8新增的特性，它可以让你在不编写class的情况下使用state以及其他的React特性
如果你在编写函数组件并意识到需要向其添加一些state，以前的做法是必须将其转化为class，现在可以在现有的函数组件中使用Hooks实现

2. 解决的问题

在组件之间复用状态逻辑很难，可能要用到render props和高阶组件，React需要为共享状态逻辑提供更好的原生途径，Hooks是你在无需修改组件代码的情况下复用状态逻辑
复杂组件变得难以理解，Hooks将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据）
难以理解的class，包括难以琢磨的this

3. 注意事项

只能在函数最外层调用Hooks，不要再循环、条件判断或者子函数中调用
只能在React的函数组件中调用Hooks，不要在其他JavaScript函数中调用

4. useState

useState就是一个Hooks
通过在函数组件里调用它来给组件添加一些内部state，React会在重复渲染时保留这个state
useState会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或者其他一下地方调用这个函数。它类似class组件的this.setState，但是它不会把新的state和旧的state进行合并
useState唯一的参数就是初始state
返回一个state，以及更新state的函数
- 在初始渲染期间，返回的状态（state）与传入的第一个参数（initialState）值相同
- setState函数用于更新state，他接收一个新的state值并将组件的一次重新渲染加入队列

const [state, setState] = useState(initialState);

4.1 计数器

import React from 'react';

class Counter extends React.Component {
    state = { number: 0 }
    add = () => {
        this.setState({ number: this.state.number + 1 });
    }
    render() {
        return (
            <>
                <p>{this.state.number}</p>
                <button onClick={this.add}>+</button>
            </>
        )
    }
}

4.2 每次渲染都是独立的闭包

每次渲染都有自己的Props和State
每次渲染都有自己的事件处理函数
alert会捕获点击按钮时候的状态
组件函数每次渲染都会被调用，但是每次调用中number值都是常量，并且它被赋予了当前渲染中的状态值
在单次渲染的范围内，props和state始终保持不变

import React, { useState } from 'react';

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，并返回一个更新后的值

import React, { useState } from 'react';

function Counter4() {
    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，此函数只在初始渲染时被调用
与class组件中的setState方法不同，useState不会自动合并更新对象。你可以用函数式的setState结合扩展运算符来达到合并更新对象的效果

import React, { useState } from 'react';

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

调用State Hooks的更新函数并传入当前的state时，React将跳过子组件的渲染及effect的执行。（React使用Object.is比较算法来比较state。）

4.5.2 减少渲染次数

把内联回调函数及依赖项数组作为参数传入useCallback，它将返回该回调函数的memoized版本，该回调函数仅在某个依赖项改变时才会更新
把创建函数和依赖项数组作为参数传入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>
    )
}

//把此组件传递给memo之后，就会返回一个新的组件,新组件有了一个功能，如果属性不变，则不重新渲染
SubCounter = memo(SubCounter);

let oldData, oldAddClick;
function Counter6(props) {
    console.log('Counter6 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} />
        </>
    )
}

useCallback用在回调函数，useMemo用在组件的属性数据

5. useReducer

useState的替代方案。它接收一个类似(state, action)=>newState的reducer，并返回当前的state以及与其配套的dispatch方法。
在某些场景下，useReducer会比useState更适用，比如state逻辑较复杂且包含多个子值，或者下一个state依赖与之前state等

const [state, dispatch] = useReducer(reducer, initialArg, init);

6. useContext

接收一个context对象（React.createContext的返回值）并返回该context当前值
当前的context值是由上层组件中距离当前组价最近的<MyContext.Provide>的value决定的
当组件上层最近的<MyContext.Provide>更新时，该Hook会触发重新渲染，并使用最新传递给<MyContext.Provide>的context value值
useContext(MyContext)相当于class组件中的static contextType=MyContext或者<MyContext.Consumer>
useContext(MyContext)只是让你能够读取context的值以及订阅context的变化。你仍然需要在上层组件数中使用<MyContext.Provide>来为下层组件提供context

import React,{useReducer,createContext,useContext} from 'react';

const initialState = 0;

function reducer(state=initialState,action){
    switch(action.type){
        case 'ADD':
            return {number:state.number+1};
        default:
            break; 
    }
}

let CounterContext = createContext();

// context在函数组件的用法
function SubCounter_func(){
    return (
        <CounterContext.Consumer>
            {
                value=>(
                    <>
                    <p>{value.state.number}</p>
                    <button onClick={()=>value.dispatch({type:'ADD'})}>+</button>
                    </>
                )
            }
         
        </CounterContext.Consumer>
    )
}

// context在类组件的用法
class SubCounter_class extends React.Component{
    static contextTypes = CounterContext
    this.context =  {state, dispatch}
}

// useContext的用法
function SubCounter(){
    const {state, dispatch} = useContext(CounterContext);
    return (
        <>
            <p>{state.number}</p>
            <button onClick={()=>dispatch({type:'ADD'})}>+</button>
        </>
    )
}

function Counter(){
    const [state, dispatch] = useReducer(reducer, initialState, ()=>({number:initialState}));
    return (
        <CounterContext.Provider value={{state, dispatch}}>
            <SubCounter/>
        </CounterContext.Provider>
    )
}

7. effect

在函数组件主体内（这里指在React渲染阶段）改变DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的bug并破坏UI的一致性
使用useEffect完成副作用操作。赋值给useEffect的函数会在组件渲染到屏幕之后执行。你可以把effect看做从React的纯函数式世界通往命令式世界的逃生通道
useEffect就是一个Effect Hook，给函数组件增加了操作副作用的能力。它跟class组件中的componentDidMount、componentDdUpdate和componentWillUnmount具有相同的用途，只不过被合并成了一个API
该Hook接受一个包含命令式，且可能有副作用代码的函数

useEffect(didUpdate);

7.1 通过class实现修改标题

import React from 'react';

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>
            </>
        )
    }
}

在这个class中，我们需要在两个生命周期函数中编写重复的代码。这是因为很多情况下，我们希望在组件加载和更新时执行同样的操作。我们希望它在每次渲染之后执行，但React的class组件没有提供这样的方法，及时我们提取出一个方法，还是要在两个地方调用它。useEffect会在第一次渲染之后和每次更新之后都会执行

7.2 通过effect实现

import React,{useState,useEffect} from 'react';

function Counter2(){
    let [number,setNumber] = useState(0);
    function add(){
        setNumber(number+1);
    }
    useEffect(()=>{
        document.title = `你已经点击了${number}次`;
    });
    return (
        <>
          <p>{number}</p>
          <button onClick={add}>+</button>
        </>
    )
}

每次我们重新渲染，都会生成新的effect替换掉之前的。某种意义上讲，effect更像是渲染结果的一部分，每个effect属于一次特定的渲染。

7.3 消除副作用

副作用函数还可以通过返回一个函数来指定如何消除副作用
为防止内存泄漏，清除函数会在组件卸载前执行。另外如果组件多次渲染，则在执行下一个effect之前，上一个effect就已被消除

import React,{useState,useEffect} from 'react';

function Counter3(){
    let [number,setNumber] = useState(0);
    let [text,setText] = useState('');
    useEffect(()=>{
        console.log('useEffect');
        let $timer = setInterval(()=>{
            setNumber(number=>number+1);
        },1000);
       	return ()=>{
            console.log('destroy effect');
            clearInterval($timer);
        }
    });
    return (
        <>
          <input value={text} onChange={(event)=>setText(event.target.value)}/>
          <p>{number}</p>
          <button>+</button>
        </>
    )
}

7.4 跳过Effect进行性能优化

如果某些特定值在两次重渲染之间没有发生变化，你可以通知React跳过对effect的调用，只要传递数组作为useEffect的第二个可选参数即可
如果想只运行一次的effect（仅在组件挂载和卸载时执行），可以传递一个空数组作为第二个参数，这就告诉React你的effect不依赖于props或者state中的任何值，所以它永远不需要重复执行

import React,{useState,useEffect} from 'react';

function Counter3(){
    let [number,setNumber] = useState(0);
    let [text,setText] = useState('');
    useEffect(()=>{
        console.log('useEffect');
        let $timer = setInterval(()=>{
            setNumber(number=>number+1);
        },1000);
    },[text]); // 数组表示effect依赖的变量，只有当这个变量发生改变之后才会重新执行 effect函数
    return (
        <>
          <input value={text} onChange={(event)=>setText(event.target.value)}/>
          <p>{number}</p>
          <button>+</button>
        </>
    )
}

7.5 useRef

useRef返回一个可变的ref对象，其中.current属性被初始化为传入的参数（initialValue）
返回的ref对象在组件的整个生命周期内保持不变

const refContainer = useRef(initialValue);

7.5.1 useRef

import React,{useRef} from 'react';

function Parent(){
  const inputRef = useRef();
  function getFocus(){
    inputRef.current.focus();
  }
  return (
      <>
        <input ref={inputRef}/>
        <button onClick={getFocus}>获得焦点</button>
      </>
  )
}

7.5.2 forwardRef

将ref从父组件中转发到子组件中的dom元素上
子组件接受props和ref作为参数

import React,{useRef,forwardRef} from 'react';

function Child(props,parentRef){
    return <input ref={parentRef}/>

}

let ForwardChild = forwardRef(Child);

function Parent(){
  const parentRef = useRef();
  function getFocus(){
    parentRef.current.focus();
  }
  return (
      <>
        <ForwardChild ref={parentRef}/>
        <button onClick={getFocus}>获得焦点</button>
      </>
  )
}

7.5.3 useImperativeHandle

useImperativeHandle可以让你在使用ref时自定义暴露给父组件的实例值
在大多数情况下，应当避免使用ref这样的命令式代码，useImperativeHandle应当与forwardRef一起使用

import React,{useRef,forwardRef,useImperativeHandle} from 'react';

function Child(props,parentRef){
    let focusRef = useRef();
    let inputRef = useRef();
    useImperativeHandle(parentRef,()=>{
        return {
            focusRef,
            inputRef,
            name:'计数器',
            focus(){
                focusRef.current.focus();
            },
            changeText(text){
                inputRef.current.value = text;
            }
        }
    });
    return (
        <>
            <input ref={focusRef}/>
            <input ref={inputRef}/>
        </>
    )

}

let ForwardChild = forwardRef(Child);

function Parent(){
  const parentRef = useRef();
  function getFocus(){
    parentRef.current.focus();
    parentRef.current.changeText ('<script>alert(1)</script>');
    console.log(parentRef.current.name);
  }
  return (
      <>
        <ForwardChild ref={parentRef}/>
        <button onClick={getFocus}>获得焦点</button>
      </>
  )
}

8. useLayoutEffect

其函数签名与useEffect相同，但它会在所有的DOM变更之后同步调用effect
可以使用它来读取DOM布局并同步触发重新渲染
在浏览器执行绘制之前useLayoutEffect内部的更新计划将被同步刷新
尽可能使用标准的useEffect来避免阻塞视图更新

import React,{useLayoutEffect,useEffect,useState} from 'react';

function UseLayoutEffectComponent(){
    const [color,setColor] = useState('red');
    useLayoutEffect(()=>{
        console.log('useLayoutEffect color=',color);
        alert('useLayoutEffect color='+color);
    });
    useEffect(()=>{
        console.log('useEffect color=',color);
    });
    return (
        <>
           <div id="myDiv" style={{backgroundColor:color}}>颜色</div>
           <button onClick={()=>setColor('red')}>红</button>
           <button onClick={()=>setColor('yellow')}>黄</button>
           <button onClick={()=>setColor('blue')}>蓝</button>
        </>
    )
}

9. 自定义Hooks

有时候我们会想要在组件之间重用一些状态逻辑
自定义Hook可以让你在不增加组件的情况下达到同样的目的
Hook是一种复用状态逻辑的方式，他不复用state本身
事实上Hook的每次调用都有一个完全独立的state
自定义Hook更想是一种约定，而不是一种功能。如果函数的名字以use开头，并且调用了其他的Hook，那么可以将其称为自定义Hook

9.1 使用Hooks模拟的组件生命周期

9.1.1 useIsFirstRender

返回组件是否第一次渲染

import React from 'react'

export function useIsFirstRender() {
  const isFirstRender = React.useRef(true)
  if (isFirstRender.current) {
    isFirstRender.current = false
    return true
  }
  return isFirstRender.current
}

9.1.2 useMountedStatus

返回组件挂载状态

import React from 'react'

export function useMountedStatus() {
  const isMount = React.useRef(true)
  useWillUnmount(() => {
    isMount.current = false
  })
  return isMount
}

9.1.3 useDidMount

组件挂载完成

import React from 'react'

export function useDidMount(effect: () => void | Promise<void>) {
  React.useEffect(() => {
    effect()
  }, [])
}

9.1.4 useWillUnmount

组件将要卸载

import React from 'react'

export function useWillUnmount(fn: () => void) {
  const fnRef = React.useRef(fn)
  fnRef.current = fn
  React.useEffect(() => () => fnRef.current(), [])
}

9.1.5 useDidUpdate

组件更新

import React from 'react'

export function useDidUpdate(callback: () => void, deps?: React.DependencyList) {
  const isFirstRender = useIsFirstRender()
  React.useEffect(() => {
    if (!isFirstRender) {
      callback()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps)
}

9.1.6 useForceUpdate

强制刷新组件

import React from 'react'

export function useForceUpdate() {
  const [, setCount] = React.useState(0)
  const forceUpdate = React.useCallback(() => {
    setCount(prevCount => prevCount + 1)
  }, [])
  return forceUpdate
}

9.2 常用Hooks工具

9.2.1 useCache

缓存数据，并返回唯一引用
缓存的数据，可传入函数，将缓存函数返回值
setCache方法会更新缓存，不会触发组件重渲染, 当更新 cache 后，可以使用getCache获取最新的缓存引用
React.useRef(getData()), getData 会在组件每次 render 时执行，无法传入函数计算出缓存值
useCache(getData), getData 将在组件第一次 render 时执行
生成缓存的数据消耗非常大的时候，可以用函数方式，优化性能，如：const [data] = useCache(() => new Data());

import React from 'react'
import { useIsFirstRender } from '../lifecycle'

export function useCache<T>(data: T | (() => T)) {
  const cacheRef = React.useRef<T>()
  const isFirstRender = useIsFirstRender()
  if (isFirstRender) {
    cacheRef.current = data instanceof Function ? data() : data
  }

  const getCache = React.useCallback(() => cacheRef.current as T, [])

  const setCache = React.useCallback((newData: T) => {
    cacheRef.current = newData
  }, [])

  return [cacheRef.current as T, setCache, getCache] as const
}

9.2.2 useInterval

计时器重复执行的方法

import React from 'react'

export function useInterval(handler: () => void, timeout?: number) {
  const timer = React.useRef<number | undefined>()
  const callback = React.useRef(handler)

  const stop = React.useCallback(() => {
    window.clearInterval(timer.current)
  }, [])

  const start = React.useCallback(() => {
    stop()
    timer.current = window.setInterval(callback.current, timeout)
  }, [stop, timeout])

  return { start, stop }
}

9.2.3 usePersistFn

在某些场景中，你可能会需要用 useCallback 记住一个回调，但由于内部函数必须经常重新创建，记忆效果不是很好，导致子组件重复 render。
对于超级复杂的子组件，重新渲染会对性能造成影响。通过 usePersistFn，可以保证函数地址永远不会变化。

import { useCallback, useRef } from 'react'

export type noop = (...args: any[]) => any

export function usePersistFn<T extends noop>(fn: T) {
  const ref = useRef<any>(() => {
    throw new Error('Cannot call function while rendering.')
  })

  ref.current = fn

  const persistFn = useCallback(((...args) => ref.current(...args)) as T, [ref])

  return persistFn
}

9.2.4 useSetState

扩展 React.useState,使得支持类似 this.setState 的合并原 state 的功能
setState 引用不变
setState 为函数时，返回 null 则不更新组件

import React from 'react'

export function useSetState<S extends AnyObject>(initialState: S | (() => S)) {
  const [state, updateState] = React.useState(initialState)
  const setState = React.useCallback<SetStateLikeMethod<S>>(inputState => {
    updateState(s => {
      const newState = inputState instanceof Function ? inputState(s) : inputState
      return newState ? { ...s, ...newState } : s
    })
  }, [])
  return [state, setState] as const
}