一.useReducer
function ReducerDemo(){
const [count,dispatch] = useReducer((state,action) => {
switch(action){
case 'add':
return state + 1
case 'sub'
return state - 1
default:
return state
}
},0)
return (
<>
<h2>现在的分数是{count}</h2>
<button onClick={() => {dispatch('add')}}>Increment</button>
<button onClick={() => {dispatch('sub')}}>Decrement</button>
)
}
二.useMemo
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
可以将useMemo作为性能优化的方法,它仅会在某个依赖项改变时才重新计算 memoized 值,如果没有提供依赖项数组,useMemo 在每次渲染时都会计算新的值。
三.useRef
useRef可以用来获取当前ref所在的DOM节点
function Example(){
const inputEle = useRef(null);
const onButtonClick = () => {
inputEle.current.value = "hahahaha"
}
return (
<>
<input ref={inputELe} type="text"/>
<button onClick={onButtonClick}>在input中显示</button>
</>
)
}
与createRef相似,在xxx.current.value
中获取值
useRef和ref相比,useRef可以很方便的保存任何可变值,也可以在如effect等很多地方使用