React Hooks

hooks

注：函数组件的每一次渲染或者更新，都是函数重新执行，产生一个新的 私有上下文【也就是内部的代码需要重新执行一次】

useState()

• 作用：在函数组件中使用状态，修改状态值，更新视图

  • 参数 1：initiaValue(初始值)
  • 参数 2：修改初始值的方法

• useState() 自带了性能优化，每一次修改状态值的时候会拿新的值和之前的值做对比【基于 Object. is()】。如果两个值是一样的就不会修改状态，也不会让页面更新【类似于 PureComponent 中的shouldComponentUpdate】

• 惰性处理：把父组件传递进来的值经过处理作为初始值，只有第一次渲染组件处理这些逻辑，这样就可以将这些逻辑写入 useState 为函数的参数中，并 return 出去。
  useState(()=>{... 写这里... return XXX})

useEffect()

• 作用：在函数组件中使用生命周期函数
  • useEffect(()=>{})；没设置依赖
    在第一次渲染完毕后执行回调函数，等价于componentDidMount，在组件每次更新的时也会执行回调函数，等价于componentDidUpdate
  • useEffect(()=>{},[])；设置了空依赖
    只有第一次渲染完毕后才会执行回调函数，每一次视图更新后，不再执行。类似于componentDidMount
  • useEffect(()=>{},[num,…])；设置一个或多个依赖
    第一次渲染完毕后会执行回调函数。
    当依赖的状态 (一个或多个) 发生变化，也会执行。
    依赖的状态没有变化, 在组件更新的时候，不会执行。

useEffect 和 useLayoutEffect 的区别?

• 在两者的 callback 回调函数中，都可以获取 DOM 元素；是因为真实的 DOM 对象已经创建了，区别是浏览器是否渲染。
  • useEffect 是异步执行的，需要等到浏览器将所有变化渲染后才会被执行，本次更新完成后再开启下一个任务。
  • useLayoutEffect 是同步，简单说是在浏览器将所有变化渲染到屏幕之前执行的。

REF？

• 作用：
  1. 赋值给标签：获取 DOM 元素
  2. 赋值给类子组件：可以获取子组件实例【基于实例调用子组件中的属性和方法】
  3. 赋值给函数子组件：报错【需要配合 React.forwardRef 实现 REF 转发，获取子组件中的某一个 DOM 元素】
• 方法：
  1. 在类组件和函数组件中都可以通过给 dom 添加 ref={ref=>this.curRef=ref} 来获取 DOM 元素，函数组件没有 this，所以在函数组件中需要删除 this 来使用(在函数组件中不推荐)
  2. 或者使用 React.createRef() 来获取 dom 元素
  3. 使用useRef()

     let boxRef = useRef(null)
     console.log(boxRef)
     

useRef()和 React.createRef()的区别?

• useRef在每一次组件更新, 再次执行 useRef 方法的时候，不会创建新的 ref 对象，获取到的还是第一次创建的 ref 对象 ( 函数组件推荐使用)
• createRef在每一次组件更新的时候，会创建一个新的 ref 对象，比较浪费性能 ( 类组件推荐使用)

useImperativeHandle(ref,()=>{]})

• 作用：基于 React.forwardRef() 实现转发的同时，获取函数子组件内部的状态或方法
  • 在回调函数的里面 return 出去要被父组件获取的方法和属性

useMemo(()=>{},[])

• 作用：回调函数执行的时候会返回一个结果，useMemo具备 ” 计算缓存”，在依赖的状态值没有变化、回调函数没有触发执行的时候，这个结果获取的是上一次计算的结果
  • 参数 1：回调函数
  • 参数 2：依赖

useCallback(()=>{},[])

• 作用：回调函数执行的时候会返回一个结果，之后每次组件更新，都判断依赖的状态是否改变。如果改变就重新创建函数，并返回新的返回值。如果没有更新就不会重新创建函数。【简单来说，useCallback可以始终拿到第一次回调函数返回的结果(不要乱用)】
• 常见于：父子组件嵌套，父组件修改状态，并不影响子组件，这个时候子组