useReduce 整合钩子

useReduce是一个函数接收三个参数，第一个参数是一个函数，第二个参数是一初始值。可以把他理解为是一个整合走hooks,可以把同一部分的逻辑整合在一起以更好的组织代码

   import React,{ useReducer } from "react";
   const contuReducer = (state,action)=> {
    switch (action) {
        case 'add':
            return state+= 1;
        case 'sub':
            return state-= 1;
        default :
            return state
     }
   }
   function Componts(){
     const [conut,dispathCount] = useReducer(contuReducer,10)
     return <>
         <h2>useReduce</h2>
         <p>目前是：{conut}</p>
         <button onClick={()=>{dispathCount('add')}}>add</button>
         <button onClick={()=>{dispathCount('sub')}}>sub</button>
     </>
   }

React.memo 缓存组件

   import React,{ useReducer } from "react";
   function Componts(){
     return <>......</>
   }
   export default React.memo(Componts)

useCallback 缓存函数

前提：当父组件把一个函数作为props传递给子组件时，当父组件状态更新时也会引起子组件的重新渲染 优化：父组件中使用useCallback函数定义函数，子组件返回时用 React.memo(CompontsName)包裹一下

// part
import { useCallback, useState } from "react"
import Home from "../Home"
export default function Login(props){
    console.log('Login 组件重新渲染');
    const [num,setNum] = useState(0);
    const handelClick = useCallback(()=>{
        console.log('xxxxxx')
     },[num])
    return (
        <div>
            <h1>Login 组件</h1>
            <button onClick={()=>{setNum({num: num+1})}}>Login 组件的值加</button>
            // 父组件定义的方法通过props传递给子组件
            <Home  handelClick={handelClick}></Home>
        </div>
    )
}
// children
import React,{ useReducer } from "react";
function  Home (props){
    console.log('Home 组件重新渲染');
    return (
        <>
            <h2 onClick={props.handelClick}>useCallback</h2>
        </>
    )
}
export default  React.memo(Home)

useMemo 缓存结果函数 也可以当vue中的watch使用

import { useCallback, useMemo, useState } from "react"
export default function Login(props){
    console.log('Login 组件重新渲染');
    const [pInfo,setInfo] = useState({name:'cjb', age: 18})
    const handelClick = useCallback( ()=>{
        console.log('xxxxxx')
        setInfo({
            name: pInfo.name+='??'
        })
     },[])
     
     function formatGender(age) {
        console.log('---调用了翻译性别的方法---')
        return age === 18 ? '成年' : '未成年'
     }

     const test = useMemo(()=>{ // 使用useMemo之后只有修改pInfo.age 时才会引起formatGender的调用
        return formatGender(pInfo.age)
     },[])
    
    return (
        <div>
            <h1>Login 组件</h1>
            <p>{pInfo.name}-{test}</p>
            <button onClick={handelClick}></button>
            
        </div>
    )
}