React Hooks学习--useReducer，useMemo和useRef

一.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等很多地方使用