dispatch作用 react_React学习之路-react hooks总结(上)

待我称王封你为后i 2023-01-02 04:19 273阅读 0赞

![d49dcd213cd9b7b70ad157c535e08a27.png][]

## 前言 ##

什么是react hooks

首先要清楚react组件分为两种，有状态组件（class组件）和无状态组件（函数组件）

函数组件：

function App(props){
       return (
           <div>hello world</div>
        )
    }

类组件

class App extends React.Component {
      render(){
        return (
             <div>hello world</div>
          )
      }
    }

这里举两个基本的例子，其中类组件还有很多的内容，包括生命周期，constructor，state等，这里不一一介绍，关于函数组件和类组件，将另外写一篇博客进行介绍

现在要抛出一个问题，类组件中的功能这么多，但是函数组件好像没有这些功能，比如生命周期，函数组件应该如何实现呢

react为函数组件提供了很多hooks api用来实现这些功能

--------------------

## 目录 ##

*  useState
 *  useReducer
 *  useContext
 *  useEffect
 *  useMemo

--------------------

## useState ##

先翻译，使用状态

一看这个状态，就知道了，useState是用来使用state的hooks api

*  使用方法：

const [n,setN]=React.useState(0)
    const [user,setUser]=React.useState({name:'F'})

useState传入一个初始值，返回一个state和一个操作state的函数

应用举例：实现加一操作

const App=()=>{
        const [n,setN]=React.useState(0)
        const onClick=()=>{
            setN(n+1)
        }
        return (
            <div>{n}
            <button onClick={onClick}>+1</button></div>
        )
    }

*  注意事项1：

如果state是一个对象，能否部分setState？

不行，setState不会帮我们合并属性

代码示例

function App() {
      const [user,setUser] = useState({name:'Frank', age: 18})
      const onClick = ()=>{
        setUser({
          name: 'Jack'
        })
      }
      return (
        <div className="App">
          <h1>{user.name}</h1>
          <h2>{user.age}</h2>
          <button onClick={onClick}>Click</button>
        </div>
      );
    }

![cac814210b7b59249a80a295f1f04124.gif][]

age属性被自动删掉了

*  注意事项2：

地址要变

setState（obj）如果obj地址不变，那么react就认为这个state没有变化

*  useState可以接受函数,这个函数返回初始的state，且只执行一次

const [state,setState]=useState(()=>{
      return initialState
    })

*  setState接受函数,这种形式一般是需要set多次，这种情况下我们传一个操作的方法，而不是直接去操作

setN（i=>i+1）

比如

const onClick = ()=>{
        setN(n+1)
        setN(n+1) // 你会发现 n 不能加 2
        // setN(i=>i+1)
        // setN(i=>i+1)
      }

--------------------

## **useReducer** ##

用来践行flux/redux的思想

*  使用方法：四步走 这次我们同样实现加一，乘以二操作

1.  创建初始值

const initial={
        n:0
    }

2.创建所有操作reducer

const reducer=(state,action)=>{
        if(action.type==='add'){
            return  {n:state.n+action.number}
        }else if(action.type==='mul'){
            return  {n:state.n*2}
        }else {
            throw new Error('unknown type')
        }
    }

3.传给useReducer hook

const [state,dispatch]=useReducer(reducer,initial)
    const {n}=state

4.调用写（\{type:'操作类型'\}）

const onClick=()=>{
            dispatch({type:'add',number:1})
        }
        const onClick2=()=>{
            dispatch({type:'add',number:2})
        }

useReducer可以说是useState的复杂版

*  什么时候用state，什么时候用reducer？

如果有几个变量应该放在一起，就可以使用useReducer 然后对这个对象进行整体的操作

*  如何用reducer代替redux呢

一，将数据集中在一个store对象

const store = {
        user: null,
        books: null,
        movies: null
    };

二,将所有操作集中在reducer里面

三，创建一个context

const Context = React.createContext(null);

四，创建读写的api

这些组件User等必须放在provider里面，因为要实现数据共享

const [state, dispatch] = useReducer(reducer, store);
    const api = { state, dispatch };
    return (
            <Context.Provider value={api}>
                <User />
                <hr />
                <Books />
                <Movies />
            </Context.Provider>
        );

五，在各个组件就可以使用读写api了

--------------------

## **useContext** ##

上下文

全局变量是全局的上下文

上下文是局部的全局变量

*  使用方法

使用c=createContext(initial) 创建上下文

const Context = React.createContext(null);

使用<C.provider>圈定作用域

const [state, dispatch] = useReducer(reducer, store);
          const api = { state, dispatch };  
           <Context.Provider value={api}>
                <User />
                <hr />
                <Books />
                <Movies />
            </Context.Provider>

使用useContext（C）来使用上下文

通过useContext拿到了state和dispatch
    const { state, dispatch } = useContext(Context);

具体的使用例子在用reducer代替redux中已经介绍了

--------------------

## **useEffect** ##

副作用，这个名字不行，我们一般叫afterRender，每次render后运行

用途

*  作为componentDidMount使用，【】做第二个参数
 *  作为compontDidUpdate使用，可指定依赖
 *  作为componentWillUnmount使用，通过return

如果同时存在多个useEffect，会按照出现次序执行

同样实现一个加一操作

function App(){
       ....set部分省略
       const afterRender=useEffect
       afterRender(()=>{
         console.log('第一次渲染之后执行') 
       }，[])
       afterRender(()=>{
         console.log('n变化了') 
       }，[n])
    }

数组是空，表示空数组里面的变量变化的时候再次执行

写个n表示，n变化时执行这个函数

*  useLayoutEffect

布局副作用，啥玩意？

useEffect在浏览器渲染完成之后执行

useLayoutEffect在浏览器渲染前执行

![3f90c2ab98018cfb8e7034f887c2476b.png][]

圆圈部分为useLayoutEffect执行时机

使用场景：改变dom的时候，useEffect在渲染完毕之后才执行，这样会有一个闪烁的过程

如果我们将useEffect放在render之前，就没有了

useLayoutEffect就可以在render之前执行

那么useLayoutEffect是不是更好呢，不是的，因为大部分的时候我们都不会改变dom

--------------------

## **useMemo** ##

首先介绍React.memo

react默认有多余的render

比如我们有两个state：n和m 组件Child只负责接收m，然后我们去更新n的值，讲道理组件Child是不应该去更新的

结果运行了之后发现child执行了

![a052ecacc38d0a3c8a375fbcaf157d4c.png][]

这样就造成了性能的浪费，我们使用React.memo来解决这个问题

const Child2 = React.memo(Child);
    return (
      ....
      <Child2 data={m}/> 
    )

这样只有m变化的时候，child才会执行

**但是**

**这玩意有一个bug**

添加了监听函数之后，又开始执行child了

一秒破功

因为App运行时会再次执行const onClickChild，生成新的函数，新旧函数功能虽然一样，但是地址不一样！

咋整？

使用useMemo

单独吧useMemo的部分提出来

const onClickChild = useMemo(() => {
        const fn = div => {
          console.log("on click child, m: " + m);
          console.log(div);
        };
        return fn;
      }, [m]);

第一个参数是一个函数（）=>value

第二个参数是依赖 \[m,n\]

只有当依赖变化的时候，才会计算出新的value

如果依赖不变，就重用之前的value

如果你的value是一个函数，那么你就要写成useMemo(()=>(x)=>console.log(x))

是不是很难看

于是就有了useCallback

用法useCallback(x=>log(x),\[m\])等价于 useMemo(()=>x=>log(x))

[d49dcd213cd9b7b70ad157c535e08a27.png]: /images/20221120/af33f3a961dc4b6c8a779047c52ee015.png
[cac814210b7b59249a80a295f1f04124.gif]: /images/20221120/e02b851d051a4c6b89c67ad9a597c5f9.png
[3f90c2ab98018cfb8e7034f887c2476b.png]: /images/20221120/9d63bbf0fff14460b338bad4369d8617.png
[a052ecacc38d0a3c8a375fbcaf157d4c.png]: /images/20221120/15fe71d14ac142fc879f06083e799f24.png