前端学习--React(5)

一、useReducer

管理相对复杂的状态数据

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

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

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

import { useReducer } from "react";function reducer(state, action){switch(action.type){case 'INC':return state + 1case 'DEC':return state - 1case 'SET':return action.payloaddefault: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

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

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

import { useMemo, useState } from "react"
function fib(num){console.log('计算函数执行了')if ( num < 3 )return 1return 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组件默认的渲染机制：只要父组件重新渲染子组件就会重新渲染

用法

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

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

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表示没有变化

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

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

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

//情况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;

//情况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;

//情况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

4. 给子组件传递函数

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

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

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

//情况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

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;