useState
实现原理 定义一个外侧的变量 用来储存返回的值 相对与类组件中的this.state与this.setState()方法 setState使用的时候需要把需要之前的没有修改的参数解构到值中， 加上修改的数，而类组件中则不需要 因为类组件没有改变stata的内存地址 所以【类组件支持部分组件】， 【useState不支持部分修改】，内存地址发生了改变 直接是替换操作 每一次都将全局定义的变量都进行了修改
类组件与函数组件在修改中的更新机制基本一样 react18 中useState创建的修改状态的方法 他们执行方式都是异步的 任何时候都表现异步行为 与类组件中的this.setState()方法相同 基于updater 更新队列收集改变的状态 并在批处理后 进行一次渲染视图行为 如果想获取立即执行结果 就调用 react-dom 提供的 flushSync函数 调用该函数后续代码则输出改变后的代码 在react 16.8中 在其他异步行为中如定时器，则表现为同步行为，会更新调用useState中的setState就会更新一次视图
useEffect
组件渲染流程【组件进入渲染阶段】
- 基于react-app 编译 把JSX语法编译为createElement格式
- 执行createElement，生成virtualDOM
- 使用root.render方法把虚拟DOM变成真实的DOM，/更新阶段会进行DOM-DIFF【更新】渲染为真实的DOM useLayoutEffect 加入链表中的方法执行[此时发生视图的渲染，在浏览器渲染之前进行DIFF比较，生成的真实DOM，在浏览器解析渲染的时候只执行一次]
- 在浏览器中解析真实的DOM树，并且进行重排，重绘 渲染到页面 useEffect 加入链表中的方法执行 [此时发生视图渲染，在浏览器渲染之后进行DIFF比较，生成新的真实DOM，在浏览器中会解析渲染两次] 会出现浏览器频繁渲染解析，出现闪烁现象
类生命周期函数： 主要目的在函数组件中使用生命周期函数
在浏览器视图渲染之后执行 异步执行
- 第一次渲染完毕后 执行callback 等价于 componentDidMount
- 在组件每一次更新完毕后 也会执行callback 等价于componentDidUpdate
所以可以在useEffect中拿到最新的state状态值
-
四种写法
- 第二个参数只是 [] 空数组 只在第一次执行完毕之后执行 此时等价于 componentDidMount
- 第二个参数 [x,y] 首次渲染与在依赖项x或y的变化时执行 等价于componentDidUpdate
- 没有第二个参数 每次渲染/更新 页面的时候都会执行
- 返回一个小函数 会返回上一次函数组件执行后产生的闭包 设置返回值有且只能返回一个函数
useRef
hook组件实现非受控组件
基于 声明let box 绑定ref={x=>box=x}
函数的形式获取到创建的DOM元素 提前声明box【不推荐】 获取ref直接使用box 使用 声明let box=React.createRef()对象声明 绑定ref={box} 获取box.current 使用useRef hook组件 声明box=useRef(null)` 绑定 ref={box} 获取 box.current [推荐]
- useRef与React.createRef在hook组件执行时创建的ref实例 使用基本一样 都创建了ref实例 通过相同的方式绑定到DOM元素身上 获取到的DOM也是一样 useRef与React.createRef在hook组件执行时的区别 创建渲染函数组件的时候调用一次useRef，更新的时候不会重复创建Ref实例 一直都是使用的上一次 没有变化 React.createRef 创建的ref实例 不管是创建还是更新都会重新创建ref实例 发生变化 浪费性能 类组件中执行React.createRef一次后则不会重复执行 第一次就会创建在类组件的实例身上 所以更新的时候不会重新执行 类组件更新只是调用render 不会重新执行 constructor
