react hooks

usestate

设置和改变state，代替原来的state和setState

const [user, setUser] = useState({name: 'Jack', age: 18})

useref

传统用法

const couterRef = useRef();
<button ref={couterRef}> </button>

usecontext

useContext 的参数必须是 context 对象本身

// 创建一个 context
const Context = createContext(0)
const count = useContext(Context);
<Context.Provider value={count}>
 <Item3></Item3>
</Context.Provider>

useeffect与uselayouteffect

useEffect 是异步执行的，而useLayoutEffect是同步执行的。
useEffect 的执行时机是浏览器完成渲染之后，而 useLayoutEffect 的执行时机是浏览器把内容真正渲染到界面之前，和 componentDidMount 等价。
当你的useEffect里面的操作需要处理DOM,并且会改变页面的样式,就需要用uselayouteffect,否则可能会出现出现闪屏问题,
useEffect接受两个参数：
第一个参数是函数（这里叫effect函数），它的作用是，在页面渲染后执行这个函数。因此你可以把ajax请求等放在这里执行；
第二个参数是一个数组，这里注意：
不传 每次渲染后都执行清理或者执行effect 这可能会导致性能问题，比如两次渲染的数据完全一样
传空数组 只运行一次的 effect（仅在组件挂载和卸载时执行） 这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行
传 React 将对前一次渲染的count和后一次渲染的count进行比较。若相等React 会跳过这个 effect， 实现了性能的优化
在JavaScript中，{} === {}结果是false，{a:1} === {a:1}同样，由此造成了react以为两个值不同，就一直的渲染最终页面死循环。
useeffect监听对象。可以把写一个回调函数来实现监听或者使用json

usememo与usecallback

useMemo 和 useCallback 接收的参数都是一样,第一个参数为回调 第二个参数为要依赖的数据
共同作用：
1.仅仅 依赖数据 发生变化, 才会重新计算结果，也就是起到缓存的作用。
两者区别：
1.useMemo 计算结果是 return 回来的值, 主要用于 缓存计算结果的值 ，仅会在某个依赖项改变时才重新计算。这种优化有助于避免在每次渲染时都进行高开销的计算。
举例：一个函数两个state变化都会触发，可以用usememo来单独监听
2.useCallback 计算结果是 函数, 主要用于 缓存函数，
举例：父组件传递一个函数组件给子组件的时候，由于父组件的更新会导致该函数重新生成从而传递给子组件的函数组件引用发生了变化，这就会导致子组件也会更新，而很多时候子组件的更新是没必要的，所以我们可以通过useCallback来缓存该函数，然后传递给子组件

usereducer

useReducer 接受一个 reducer 函数作为参数，reducer 接受两个参数一个是 state 另一个是 action 。然后返回一个状态 count 和 dispath，count 是返回状态中的值，而 dispatch 是一个可以发布事件来更新 state 的。

import React,{useReducer} from 'react'
export default function ReducerDemo() {
    const [count, dispath] = useReducer((state,action)=> {
        //...
    }, 0);
    return (
        <div>
             <button className="btn is-primary"
                onClick={()=> dispath('add')}
                >Increment</button>
        </div>
    )
}