react-9 函数式写法rsf，配合HOOKS基础钩子函数

函数组件和类组件区别：

1.函数组件中没有this

2.函数组件无需继承

3.函数组件默认没有状态，想要使用组件状态必须通过 HOOK 函数引入

4.函数组件默认没有生命周期函数

5.函数组件的渲染，只需要一次函数调用即可

useState ：用来管理组件的状态, 当下主要用来给函数式组件添加状态.

对于引用类型的组件状态，必须传入一个全新的状态值（地址也得是全新的），因此要浅拷贝或者深拷贝

注意：在set修改之后，比如log语句可能获取不到最新的值，解决：useEffect生命周期监听可解决

useEffect 和 useLayoutEffect：用来给函数式组件添加生命周期方法.  可监听，（很像Vue中的watch)

函数组件中没有生命周期，那么可以使用 useEffect 来替代。如果你熟悉 React class的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount， componentDidUpdate 和 componentWillUnmount 这三个函数的组合.

写法1. useEffect 的第一个参数回调函数，在组件初次渲染 和 依赖数组中监听的状态变量发生改变时都会执行

写法2. useEffect 的第一个参数回调函数，在组件初次渲染 和 后续每次更新时都会执行

写法3.useEffect 的第一个参数回调函数，只在组件初次渲染时执行一次（类似类组件componentDIdMount）：可以在这里发请求，创建定时器，监听事件

 记得卸载组件：销毁定时器，取消监听事件

useEffect 和 useLayoutEffect区别：（根据需求来）

useEffect 中的代码是异步执行的，而且是在组件渲染完成后执行的，（缺点：容易出现闪屏：执行了两次，初始值，渲染后值）优点：不会阻塞组件更新

解决：

useLayoutEffect 中的代码是同步执行的，而且是在组件渲染完成前执行（优点：没有闪屏）缺点：会阻塞组件更新，可能会导致页面长时间空白，得不到响应

 useRef 和 forwordRef,useImperativeHandle：创建 ref，方便访问操作 DOM 节点

useRef：定义ref引用，通过current属性获取dom节点

注意：需要在组件渲染完成后再获取dom节点

获取子组件方法：forwardRef对外暴露方法需要配合：useImperativeHandle

父组件：

子组件：

想暴露方法给父组件：通过高阶组件forwardRef对外暴露方法需要配合：useImperativeHandle钩子函数暴露

不想暴露方法给父组件：就无需配合useImperativeHandle钩子函数

 Hooks 的使用规则

只在顶层调用 Hooks :  Hooks 的调用尽量只在顶层作用域

不要在循环、条件或嵌套函数中调用 Hook，否则可能会无法确保每次组件渲染时都以相同的顺序调用 Hook

只在函数组件调用 Hooks：目前只支持函数式组件，未来版本 Hooks 会扩展到 class 类组件；

React Hooks 的应用场景：函数式组件、自定义 Hooks