前端学习--React(5)

一、useReducer

管理相对复杂的状态数据

定义一个reducer函数，根据action值的不同返回不同的状态

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

事件发生时，通过dispatch函数分派一个对象，即通知reducer具体返回哪个状态对应的操作

javascript 复制代码

import { useReducer } from "react";

function reducer(state, action){
  switch(action.type){
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    case 'SET':
      return action.payload
    default:
      return state
  }
}
function App() {
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <div className="App">
        <button onClick={()=>dispatch({type:'DEC'})}>-1</button>
        {state}
        <button onClick={()=>dispatch({type:'INC'})}>+1</button>
        {/* 自定义参数 */}
        <button onClick={()=>dispatch({type:'SET', payload:100})}>set 100</button>
    </div>
  );
}

export default App;

二、useMemo

组件重新渲染时缓存计算的结果

应用场景：消耗比较大的计算

javascript 复制代码

import { useMemo, useState } from "react"
function fib(num){
  console.log('计算函数执行了')
  if ( num < 3 )return 1
  return fib(num - 1) + fib(num - 2)

}
function App() {
  const [count1, setCount1] = useState(0)
  const [count2, setCount2] = useState(0)
  // 如果执行下面注释的代码 即使只有count2变化 计算函数也会执行
  // const result = fib(count1)
  const result = useMemo(() => {
    return fib(count1)
  },[count1])
  console.log('组件重新渲染')
  return (
    <div className="App">
      <button onClick={()=> setCount1(count1 + 1)}>count1:{count1}</button>
      <button onClick={()=> setCount2(count2 + 1)}>count2:{count2}</button>
      {result}
    </div>
  );
}

export default App;

三、React.memo

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

用法

javascript 复制代码

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

只有props发生变化时，memo包裹的缓存组件才会重新渲染

javascript 复制代码

import { useState, memo } from "react";
const MemoSon = memo(function Son(props){
  console.log('子组件渲染了')
  return <div>Son</div>
})
function App() {
  const [count, setCount] = useState(0)
  console.log('父组件渲染了')
  return (
    <div className="App">
      <button onClick={() => setCount(count+1)}>+1</button>
      <MemoSon/>
    </div>
  );
}

export default App;

props的比较机制

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

传递一个简单类型的prop prop变化时组件重新渲染

传递一个引用类型的prop 比较的是新值和旧值的引用是否相等当父组件的函数重新执行时实际上形成的是新的数组引用

保证引用稳定 -> useMemo 组件渲染的过程中缓存一个值

javascript 复制代码

//情况1 传递简单数据
//点击按钮 子组件会发生变化
import { useState, memo } from "react";
const MemoSon = memo(function Son(props){
  console.log('子组件渲染了')
  return <div>Son{props.count}</div>
})
function App() {
  const [count, setCount] = useState(0)
  console.log('父组件渲染了')
  return (
    <div className="App">
      <button onClick={() => setCount(count+1)}>+1</button>
      <MemoSon count={count}/>
    </div>
  );
}

export default App;

javascript 复制代码

//情况2 传递引用数据
//点击按钮 子组件会发生变化
import { useState, memo } from "react";
const MemoSon = memo(function Son(props){
  console.log('子组件渲染了')
  return <div>Son{props.list}</div>
})
function App() {
  const [count, setCount] = useState(0)
  console.log('父组件渲染了')
  const list = [1,2,3]
  return (
    <div className="App">
      <button onClick={() => setCount(count+1)}>+1</button>
      <MemoSon list={list}/>
    </div>
  );
}

export default App;

javascript 复制代码

//情况3 使用useMemo进行缓存
//子组件不再重新渲染
import { useState, memo, useMemo } from "react";
const MemoSon = memo(function Son(props){
  console.log('子组件渲染了')
  return <div>Son{props.list}</div>
})
function App() {
  const [count, setCount] = useState(0)
  console.log('父组件渲染了')
  const list = useMemo(()=>{
    return [1,2,3]
  }, [])
  return (
    <div className="App">
      <button onClick={() => setCount(count+1)}>+1</button>
      <MemoSon list={list}/>
    </div>
  );
}

export default App;

useCallback

给子组件传递函数

React.memo检测的是props中数据的栈地址是否改变。而父组件重新构建的时候，会重新构建父组件中的所有函数（旧函数销毁，新函数创建，等于更新了函数地址）,新的函数地址传入到子组件中被props检测到栈地址更新。也就引发了子组件的重新渲染。

在组件多次渲染的时候缓存函数

使用场景：在往子组件传入了一个函数并且子组件被React.momo缓存了的时候使用

javascript 复制代码

//情况4 传入函数
//点击按钮子组件不会重新渲染 因为使用useCallback缓存
import { useState, memo, useMemo, useCallback } from "react";
const Input = memo(function Input({onChange}){
  console.log('子组件重新渲染')
  return <input type="text" onChange={(e) => onChange(e.target.value)} />
})
function App() {
  const [count, setCount] = useState(0)
  const changeHandler = useCallback((value)=> console.log(value), [])

  return (
    <div className="App">
      <Input onChange={changeHandler}/>
      <button onClick={() => setCount(count+1)}>{count}</button>
      
    </div>
  );
}

export default App;

四、React.forwardRef

javascript 复制代码

import { useRef,forwardRef } from "react";

//如果用下面的函数 sonRef的值是null
// function Son(){
//   return <input type="text"/>
// }
const Son = forwardRef((props, ref)=> {
  return <input type="text" ref={ref}/>
})
function App() {
  const sonRef = useRef(null)
  const showRef = ()=>{
    console.log(sonRef)
  }
  return (
    <div className="App">
      <Son ref={sonRef}/>
      <button onClick={showRef}>focus</button>
    </div>
  );
}

export default App;