react中hooks使用，主打一个细节

React Hooks 是 React 在16.8版本中更新的新特性，在 React 中一直提倡使用函数组件，老版本中函数组件没有组件实例，没有 state，没有生命周期函数，导致很多情况不得不使用类组件，但是 Hooks 出来后我们可以在不使用类组件的情况下使用state及其他React特性！

一. useState

1. useState基本使用

import React, { useState } from 'react';
function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

这是官方的一个基本使用示例，import引入useState函数

调用函数时传入初始化的值

函数返回一个数组：一个为初始化的state，一个为更新state的函数

最后在其他地方使用state，或者调用更新state的函数

注意：更新state的函数会直接替换state，而不是像以前setState会合并新老state

坑：在 1s 内频繁点击10次按钮，下面两组代码的执行表现是什么？

//class组件
class App extends component{
    state：{count：0}
    increment =()=>{
        setTimeout(
           ()=>{this.setState({count:this.state.count+1})}
        ,1000)
    }
    render(){
        return <h1 onClick={this.increment}>{this.state.count}</h1>
    }
}
//count的展示会从0展示到10

//function组件
function App(){
    conts[count,setCount]=useState(0);
    const increment=()=>{
        setTimeout(()=>{setCount(count+1)},1000)
    }
    return <h1 onClick={increment}>{count}</h1>
}
//count每次点击 会从0展示到1

为什么会有不同的展示？因为是闭包和引用的问题

class组件中count每次获取都是引用state中的值就能获取最新的count更新后的值

而function组件每次更新都是重新执行当前函数，而count引用每次就是最新生成的0，并不是上一次执行完的值，所以是之加一次为1

2. 使用push，pop，splice等直接更改数组对象的坑

因为useState的更新函数会直接替换老的state，所以我们在对对象或者数组的state做增删的时候不能像以前直接对数组使用push，pop，splice等直接改变数组的方法

错误示例：

import React, { useState } from "react";
function Comment() {
  const [counts, setCounts] = useState([1, 2]);
  const handleAdd = () => {
    const randomCount = Math.round(Math.random()*100)
    // 在此地方我们使用push增加一个随机数，程序报错
    setCounts(counts.push(randomCount))
  }
  return (
    <div>
      {counts.map((count) => (
        <div key={count}>{count}</div>
      ))}
      <button onClick={handleAdd}>增加</button>
    </div>
  );
}
export default Comment;

正确的方法应该是使用数组解构生成一个新数组，在数组后面加上我们新增的随机数达成数组新增项，使用filter数组过滤方法来实现我们删除其中项的操作。

数组新增项：

import React, { useState } from "react";
function Comment() {
  const [counts, setCounts] = useState([1, 2]);
  const handleAdd = () => {
    const randomCount = Math.round(Math.random()*100)
    // 在此我们用数组结构生成新数组，并在后面加上我们要新增的随机数
    setCounts([
      ...counts,
      randomCount
    ])
  }
  return (
    <div>
      {counts.map((count) => (
        <div key={count}>{count}</div>
      ))}
      <button onClick={handleAdd}>增加</button>
    </div>
  );
}
export default Comment;

删除其中项：

import React, { useState } from "react";
function Comment() {
  const [counts, setCounts] = useState([1, 2, 3, 4]);
  const handleDel = () => {
    // 使用数组filter方法，过滤删除其中不需要的项
    setCounts(counts.filter((count, index) => index !== counts.length - 1))
  }
  return (
    <div>
      {counts.map((count) => (
        <div key={count}>{count}</div>
      ))}
      <button onClick={handleDel}>删除</button>
    </div>
  );
}
export default Comment;

此外还有一个方法是类似以前使用redux的reducer中对老的数组对象做深拷贝，然后做增删操作，最后返回

import React, { useState } from "react";
function Comment() {
  const [counts, setCounts] = useState([1, 2]);
  const handleAdd = () => {
    setCounts(counts => {
      const randomCount = Math.round(Math.random()*100)
      // 简单使用JSON.parse及JSON.stringify深拷贝一个新的数组和对象(实际项目中建议自己写递归深拷贝函数)，然后对其操作返回
      let newCounts = JSON.parse(JSON.stringify(counts))
      newCounts.push(randomCount)
      return newCounts
    })
  }
  return (
    <div>
      {counts.map((count) => (
        <div key={count}>{count}</div>
      ))}
      <button onClick={handleAdd}>增加</button>
    </div>
  );
}
export default Comment;

3. 每次渲染都是独立闭包的坑

当我们先执行异步增加函数(handleSyncAdd)，再执行同步函数(handleAdd)，同步执行完毕再执行异步时，异步函数里面的count为之前执行时闭包里面的值(0)，错误示例：

import React, { useState } from "react";
function Comment() {
  const [count, setCount] = useState(0);
  const handleAdd = () => setCount(count + 1);
  const handleSyncAdd = () => {
    setTimeout(() => {
    // 获取的是闭包中的state
      setCount(count + 1);
    }, 1000);
  };
  return (
    <div>
      <p>{count}</p>
      <button onClick={handleAdd}>增加</button>
      <button onClick={handleSyncAdd}>异步增加</button>
    </div>
  );
}
export default Comment;

这种情况我们要使用回调式函数更新

正确示例：

import React, { useState } from "react";
function Comment() {
  const [count, setCount] = useState(0);
  const handleAdd = () => setCount(count + 1);
  const handleSyncAdd = () => {
    setTimeout(() => {
    // 改成回调函数更新，每次回调函数执行时会接收之前的state，而不是闭包中的state
      setCount(count => count + 1);
    }, 1000);
  };
  return (
    <div>
      <p>{count}</p>
      <button onClick={handleAdd}>增加</button>
      <button onClick={handleSyncAdd}>异步增加</button>
    </div>
  );
}
export default Comment;

二、useEffect

effect（副作用），可以理解为我们在使用类组件时的生命周期函数

useEffect 可以实现我们在类组件中的componentDidMount、ComponentDidUpdate和componentWillUnmount的功能呢，只不过被合并成为一个API

与 componentDidMount 或 componentDidUpdate 不同的是，使用 useEffect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），有单独的 useLayoutEffect 供你使用，其 API 与 useEffect 相同。

1. useEffect 实现 componentDidMount及ComponentDidUpdate

直接使用useEffect传入一个回调函数，会在组件初次渲染及每次更新渲染时执行

import React, { useState, useEffect } from 'react'
function Parent() {
  const [count, setCount] = useState(0)
  const handleAdd = () => setCount(count + 1)
  // 使用useEffect传入一个回调函数使用类组件componentDidMount和componentDidUpdate功能
  useEffect(() => {
    console.log('parent effect');
  })
  return (
    <div>
      parent, {count}
      <button onClick={handleAdd}>增加</button>
    </div>
  )
}
export default Parent

2. 使用useEffect 实现componentDidMount功能

很多时候我们只需要组件初次加载做一些事，如ajax获取数据等，我们只需要在useEfffect的第二个参数传入一个空数组，这个数组的意思是数组里面监听的值发生更新update时执行effect

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

function Parent() {

const [count, setCount] = useState(0)

const handleAdd = () => setCount(count + 1)

// 第二个参数传入空数组，不需要根据其他值执行effect，只会在组件初次加载执行

  useEffect(() => {
    console.log('parent didMount');
  }, [])
  return (
    <div>
      parent, {count}
      <button onClick={handleAdd}>增加</button>
    </div>
  )
}
export default Parent

也可以在第二个数组中传入值，表明根据这个值update时执行effect

import React, { useState, useEffect } from 'react'
function Parent() {
  const [count, setCount] = useState(0)
  const handleAdd = () => setCount(count + 1)
  // 第二个参数传入含有count的数组，count更新时执行effect
  useEffect(() => {
    console.log('count update');
  }, [count])
  return (
    <div>
      parent, {count}
      <button onClick={handleAdd}>增加</button>
    </div>
  )
}
export default Parent

3.使用useEffect实现componentWillUnmout功能

在项目中我们需要在组件卸载时清除定时器、监听等，使用useEffect返回一个函数，这个函数会在组件卸载时调用完成componentWillUnmout的功能

import React, { useState, useEffect } from 'react'
function Parent() {
  const [count, setCount] = useState(0)
  const handleAdd = () => setCount(count + 1)
  // 在useEffect中返回一个函数完成componentWillUnmoun的功能
  useEffect(() => {
    console.log('component mount');
    return () => {
      console.log('component unmount');
    }
  })
  return (
    <div>
      parent, {count}
      <button onClick={handleAdd}>增加</button>
    </div>
  )
}
export default Parent

三、useMemo

useMemo可以初略理解为Vue中的计算属性，在依赖的某一属性改变的时候自动执行里面的计算并返回最终的值(并缓存，依赖性改变时才重新计算)，对于性能消耗比较大的一定要使用useMemo不然每次更新都会重新计算。

示例：

import React, { useState, useMemo } from 'react'
function Parent() {
  const [count, setCount] = useState(0)
  const [price, setPrice] = useState(1)
  const handleCountAdd = () => setCount(count + 1)
  const handlePriceAdd = () => setPrice(price + 1)
  // 使用useMemo在count和price改变时自动计算总价
  const all = useMemo(() => count * price, [count, price])
  return (
    <div>
      parent, {count}
      <button onClick={handleCountAdd}>增加数量</button>
      <button onClick={handlePriceAdd}>增加价格</button>
      <p>count: {count}, price: {price} all: {all}</p>
    </div>
  )
}
export default Parent

四、useCallback

useCallback不同于useMemo的是，useMemo是缓存的值，useCallback是缓存的函数，父组件给子组件传递参数为普通函数时，父组件每次更新子组件都会更新，但是大部分情况子组件更新是没必要的，这时候我们用useCallback来定义函数，并把这个函数传递给子组件，子组件就会根据依赖项再更新了

示例：

import React, { useState, useCallback, useEffect } from 'react';
function Parent() {
    const [count, setCount] = useState(1);
    const [val, setVal] = useState('');
 
    const callback = useCallback(() => {
        return count;
    }, [count]);
    return <div>
        <h4>{count}</h4>
        <Child callback={callback}/>
        <div>
            <button onClick={() => setCount(count + 1)}>+</button>
            <input value={val} onChange={event => setVal(event.target.value)}/>
        </div>
    </div>;
}
 
function Child({ callback }) {
    const [count, setCount] = useState(() => callback());
    useEffect(() => {
      console.log(123);
        setCount(callback());
    }, [callback]);
    return <div>
        {count}
    </div>
}
export default Parent

五、useReducer

useReducer和redux中reducer类似，useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。）

在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。并且，使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数 。

import React, { useReducer } from 'react'
function Parent() {
  const reducer = (state, action) => {
    switch (action.type) {
      case 'add':
        return {count: state.count + 1}
      case 'reduce':
        return {count: state.count - 1}
      default:
        throw new Error()
    }
  }
  let initialState = 0
  const init = (initialState) => ({
    count: initialState
  })

// 第三个参数为惰性初始化函数，可以用来进行复杂计算返回最终的initialState，如果initialState较简单可以忽略此参数

  const [state, dispatch] = useReducer(reducer, initialState, init)
  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({type: 'add'})}>add</button>
      <button onClick={() => dispatch({type: 'reduce'})}>reduce</button>
    </div>
  )
}
export default Parent

六、useContext

useContext可以实现类似react-redux插件的功能，上层组件使用createContext创建一个context，并使用<MyContext.Provider>来传递context，下层组件使用useContext来接收context。

示例：

import React, { useState, createContext, useContext } from "react";
// 使用createContext来创建一个context
const CounterContext = createContext();
function Parent() {
  const [count, setCount] = useState(0);
  return (
    // 父组件使用<MyContext.Provider>传递context
    <CounterContext.Provider value={{ count, setCount }}>
      {count}
      <Child />
    </CounterContext.Provider>
  );
}
function Child() {
  // 子组件使用useContext来接收context
  const { count, setCount } = useContext(CounterContext);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>add</button>
    </div>
  );
}
export default Parent;

坑：使用provide包裹多个组件时

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

const ContainerContext = createContext({ count: 0 });
const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const { state, dispatch } = useContext(ContainerContext);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
}

function Tip() {
  return <span>计数器</span>;
}

function Container() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <ContainerContext.Provider value={{ state, dispatch }}>
      <Counter />
      <Tip />
    </ContainerContext.Provider>
  );
}

export default Container;

1. Provider 单独封装

在上面的 demo 中我们应该看到了在 Provider 中有两个组件，Counter 组件在 state 发生变化的时候需要重新渲染这个没什么问题，那 Tip 组件呢，在 Tip 组件里面显然没有用到 Context 实际上是没有必要进行重新渲染的。但是现在这种写法每次state变化都会导致 Provider 中所有的子组件都跟着渲染。有没有什么办法解决呢，实际上也很简单，我们把状态管理单独封装到一个 Provider 组件里面，然后把子组件通过 props.children 的方式传进去

...
function Provider(props) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <ContainerContext.Provider value={{ state, dispatch }}>
      {props.children}
    </ContainerContext.Provider>
  );
}

const App = () => {
  return (
    <Provider>
      <Counter />
      <Tip />
    </Provider>
  );
};
...

这个时候 APP 组件就成为了无状态组件，state 变化的时候 props.children 不会改变，不会被重新渲染，这个时候再看 Tip 组件，状态更新的时候就不会跟着重新渲染了。

那这样是不是就万事大吉呢，对不起没有，还有坑，接着看第二点。

2. 缓存 Provider value

在官方文档里面也提到了这个坑，简单说就是，如果 Provider 组件还有父组件，当 Provider 的父组件进行重渲染时，Provider 的value 属性每次渲染都会重新创建，原理和上面 useMemo useCallback 中提到的一样，所以最好的办法是对 value 进行缓存：

...
function Provider(props) {
const [state, dispatch] = useReducer(reducer, initialState);
const value = useMemo(() => ({ state, dispatch }), [state]);
  return (
    <ContainerContext.Provider value={value}>
      {props.children}
    </ContainerContext.Provider>
  );
}
...

3. memo 优化直接被穿透，不再起作用

在开发中我们会使用 memo 来对组件进行优化，如上文中提到的，但是很多时候我们又会在使用 memo 的组件中使用 context，用 context 的地方在context发生变化的时候无论如何都会发生重新渲染，所以很多时候会导致 memo 优化失效，具体可以看这里的讨论，react 官方解释说设计如此，同时也给出了相应的建议，我们项目中主要解决方案是把 context 往上提，然后通过属性传递，就是说我们的组件一开始是这样写的：

React.memo(()=> {
 const {count} = useContext(ContainerContext);
 return <span>{count}</span>
})

这个时候context更新了，memo 属于是白给，我们把 context 往上提一层，其实就可以解决这个问题：

const Child = React.memo((props)=>{
    ....
})
function Parent() {
  const {count} = useContext(ContainerContext);
  return <Child count={count} />;
}

这样保证了 Child 组件的外部状态的变化只会来自于 props，这样当然 memo 可以完美工作了。

4. 对 context 进行拆分整合

context 的使用场景应该是为一组享有公共状态的组件提供便利来获取状态的变化。但是随着业务代码越来越复杂，在不经意间我们就会把一些不相关的数据放在同一个context 里面。这样就导致了context 中任何数据的变化都会导致使用这个 context 的组件重新 render。这显然不是我们想看到的。这种情况下我们应该要对contex 进行更细粒度的拆分，把真正相关的数据整合在一起，然后再提供给组件，至少这样不相关组件的状态变化不会相互影响，也就不会导致多余的重复渲染。

七、useLayoutEffect

其使用方法与useEffect一样，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。useEffect为异步，useLayoutEffect为同步，推荐你一开始先用 useEffect，只有当它出问题的时候再尝试使用 useLayoutEffect

八、useRef

React Hooks中用来获取DOM节点

示例：

import React, { useRef } from 'react'
function Parent() {
  // 使用useRef创建一个ref，并在标签中绑定到ref属性上
  const pRef = useRef(null)
  return (
    <div>
      <p ref={pRef}>content</p>
    </div>
  )
}
export default Parent

九、自定义Hooks

自定义Hooks可以实现逻辑复用等，在多个组件中可以复用我们自定义的Hooks，并且里面的状态是独立的，自定义Hooks我们一般按照规则以use开头定义

示例：

import React, { useState } from "react";
// 自定义useCount的Hooks
function useCount() {
  const [count, setCount] = useState(0);
  return { count, setCount };
}
function Parent() {
  // 父组件使用，状态独立
  const { count, setCount } = useCount()
  return (
    <div>
      <p>parent</p>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>add</button>
      <Child />
    </div>
  );
}
function Child() {
  // 子组件使用，状态独立
  const { count, setCount } = useCount()
  return (
    <div>
      <p>child</p>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 2)}>add</button>
    </div>
  );
}
export default Parent;