React学习（day6)

useReducer

作用：和useState的作用类似，用来管理相对复杂的状态数据。

基础用法：

1.定义一个reducer函数（根据不同的action返回不同的新状态）

2.在组件中调用useReducer,并传入reducer函数和状态的初始值

3.事件发生时，通过dispatch函数分配一个action对象（通知reducer要返回哪个新状态并渲染UI）

//useReducer

import { useReducer } from "react";

//1.定义reducer函数 根据不同的action 返回不同的状态

function reducer (state,action){
  switch (action.type){
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    case 'SET':
      return action.payload
    default:
      return action.payload
  }
}

//2.组件中使用useReducer（reducer,0) => [state,dispatch]
//3.调用dispatch({type:'INC}) => 通知reducer产生了一个新的状态 使用这个新状态跟新UI

function App() {
  const [state,dispatch] = useReducer(reducer,0)
  return (
    <div>
      <button onClick={()=>dispatch({type: 'RERE',payload:0})}>重置</button>
      <button onClick={()=>dispatch({type: 'DEC'})}>-</button>
            {state}
      <button onClick={()=>dispatch({type: 'INC'})}>+</button>
      <button onClick={()=>dispatch({type: 'SET',payload:100})}>更新</button>
    </div>
  );
}

export default App;

useMemo

作用：在组件每次重新渲染的时候缓存计算的结果

基础语法：

useMemo(() => {
  //根据count1返回计算的结果
}，[count1])

###缓存：消费非常大的计算

使用useMemo做缓存之后可以保存只有count1依赖项发生变化时才会重新计算

// useMemo

import { useMemo, useState } from "react";

//计算斐波那契数列之和
function fib(n) {
  console.log('计算函数执行')
  if(n<3){
    return 1
  }
  return fib(n-2) + fib(n-1)
}

function PreUseMemo(){
  const [count1, setCount1] = useState(0)

  const result = useMemo(()=>{
    //返回计算得到的结果
    return fib(count1)
  },[count1])

  //const result = fib(coount1)

  const [count2, setCount2] = useState(0)
  console.log('组件重新渲染了')
  return(
    <div>

      <button onClick={()=>setCount1(count1 + 1)}> change count1: {count1} </button>
      <button onClick={()=>setCount2(count2 +1)}> change count2: {count2} </button>
      <div>
        {result}
      </div>
    </div>
  )
}

export default PreUseMemo

React.memo

作用：允许组件在Props没有改变的情况下跳过渲染

React组件默认的渲染机制：只要父组件重新渲染子组件就会重新渲染

基础语法：

const MemoComponent = memo(function SomeComponent (props){
  //...
}

说明：经过memo函数包裹生成的缓存组件只有在props发生变化的时候才会重新渲染

//React.memo

import { memo, useState } from "react"

//1. 默认的渲染机制  子跟着父一起渲染

//2. memo进行缓存 只有props发生变化的时候才会重新渲染 （context）
const MemoSon = memo(function Son(){
  console.log('我是子组件，我重新渲染了')
  return <div>this is son</div>
})

// function Son(){
//   console.log('我是子组件，我重新渲染了')
//   return <div>this is son</div>
// }

function PreReactMemo(){
  const [count,setCount] = useState(0)
  return (
    <div>
      <button onClick={()=>setCount(count+1)}> +{count} </button>
      {/* <Son /> */}
      <MemoSon />
    </div>
  )
}

export default PreReactMemo

React.memo - props的比较机制

机制： 在使用memo缓存组件之后，React会对每一个prop使用Object.is比较新值和老值，返回true，表示没有变化

①：prop是简单类型 prop变化时组件重新渲染

Object.is(3,3) => true 没有变化

②：prop是引用类型（对象/数组） 比较的是新值和旧值得引用是否相同 当父组件得函数重新执行时，实际上形成的是新的数组引用

Object([], []) => false 有变化，React只关心引用是否变化