react中hooks的使用

1 useState()

通过setF触发页面渲染，几个setFn，页面就会刷新几次（同一代码块中，对于多个setFn，会进行合并处理
PS：这里的合并仅针对同一代码块中的setFn）

const [argumA, setFnA] = useState()

2 useEffect()

发生在页面渲染之后

useEffect(() => { xxx }, []) // 第二个参数为空数组，表示仅执行一次

3 useMemo()

发生在页面渲染之前，对数据进行缓存。

const argumA = useMemo(fnB, [])  // fnB执行，返回是fnB的执行结果

4 memo()

类似于PureComponent，用来优化组件，防止组件重复渲染。不同处在于，memo是function组件，PureComponent是class组件。
原理：通过浅比较，如果ComponentB中的props没有发生改变时，则不用重新渲染B

const ComponentA = memo(ComponentB)

5 useCallback()

与useMemo类似，对函数进行缓存，函数并没有执行。

const fnA = useCallback(fnB, [])  // fnB未执行

6 useReducer

useState会导致页面刷新，几个setFn页面就会刷几次，造成性能浪费，解决方法
合并state

const [argums, setArgums] = useState({})
...
setArgums({  // 这种处理页面仅刷新一次
	key1: 'argum1',
	key2: 'argum2',
	...
})

useReducer
当state逻辑较复杂且包含多个子值，或者下一个state依赖于之前的state时，推荐useReudcer

const [count, dispath] = useReducer((state, action) => {
	switch(action) {
		case: 'add':
		  return state + 1
		case: 'sub':
		  return state - 1
		default:
		  return state
    }
}, 0)

<div onClick={() => dispath('add')}></div>
<div onClick={() => dispath('sub')}></div>

FROM
https://blog.csdn.net/weixin_42450794/article/details/97906444?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control

https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect