React-Hooks

hooks相比较于class的优势：

1，学习成本低，不涉及生命周期。useState，useEffect

2，业务逻辑聚合。useEffect

3，闭包问题。

七大hooks：

1，useState改变状态

　　const [x, setx] = react.useState(x的初始值);

　　react在数据变化时会创建虚拟dom对象，diff对比，不存在的对象属性会被删除

　　注意：1，setState不会自动合并之前的值。想要原来的值，先复制，类似这样setUser({...user, name: 'cmt'});

　　　　　2，setX(obj)的时候obj的地址必须改变。地址不变的话不会更新视图

2，useEffect解决函数组件如何像类组件一样使用生命周期钩子的问题

　　三个使用场景：1，作为componentDidMount使用，第二个参数为空数组[ ]

　　　　　　　　　2，作为componentDidUpdate使用，第二个参数为制定依赖

　　　　　　　　　3，作为componentWillUnMount使用，通过return

　　useEffect在浏览器渲染完成后执行，uselayoutEffect在渲染前执行，uselayoutEffect比useEffect先执行

3，useMemo  类似于vue的计算属性computed

　　useMemo（回调函数，[依赖])

　　useMemo可以缓存所有对象，useCallback只能缓存函数

　　useCallback（x => log(x)，[m]）等价于useMemo（() => x => log(x), [m]）

4，useRef 创建一个数据的引用，并且这个数据在render过程中保持不变

　　const count = useRef(0)，读取count.current

　　ref：对组件实例的引用。ref可以设置回调函数，组件被挂载后，回调函数会立即执行

　　useRef：可以跨越渲染周期存储数据，对他修改不会引起组件重新渲染