您的位置: 首页  >  文章  >  React Hook

React Hook

分类: 文章 • 2025-02-27 22:49:35

Hook简介

  1. Hook专门用于增强函数组件的功能（Hook在类组件中是不能使用的），使之理论上可以成为类组件的替代品
  2. 官方强调：没有必要更改已经完成的类组件，官方目前没有计划取消类组件，只是鼓励使用函数组件
  3. Hook（钩子）本质上是一个函数（命名上总以use开头），该函数可以挂载任何功能
  4. Hook的种类：useState、useEffect、useContext、useReducer、自定义Hook

state Hook

  1. state Hook是一个在函数组件中使用的函数（useSatte）,用于在函数组件中使用状态
  2. useState函数
  • 函数有一个参数，这个参数的值表示状态的默认值
  • 函数的返回值是一个数组，该数组一定包含两项：当前状态的值、改变状态的函数

  1. 一个函数组件中可以有多个状态，这种做法非常有利于横向切分关注点

  2. useState原理

  3. 注意细节

    1. useSatte最好写在函数的起始位置，便于阅读
    2. useState严禁出现在代码块（循环、判断）中
    3. useSate返回的函数（第二项），引用不变（节约内存空间）
    4. 使用函数改变数据，若数据和之前的数据完全相等（会使用Object.is比较）,不会导致重新渲染，以达到优化效率的目的
    5. 使用函数改变数据，传入的值不会和原来的数据合并，而是直接替换
    6. 如果要实现强制刷新组件：
    • 类组件：使用this.forceUpdate()强制刷新
    • 函数组件：使用一个空对象的useState
    1. 如果某些状态之间没有必然的联系，应该分化为不同的状态，而不要合并成一个对象
    2. 和类组件一样，函数组件中改变状态可能是异步的（在DOM事件中，状态改变后不会立即更改，而是等事件运行完之后一起改变），多个状态变化会合并并以提高效率，此时，不能信任之前的状态，而应该使用回调函数的方式改变状态。

effect Hook

effect Hook：用于在函数组件中处理副作用

副作用

  1. ajax请求
  2. 计时器
  3. 其它异步操作
  4. 更改真实Dom对象
  5. 本地存储
  6. 其它会对外部产生影响的操作

useEffect函数，该函数接受一个函数作为参数，接受的函数就是需要进行副作用操作的函数

注意细节

  1. 副作用函数运行的时间点，是在页面完成真实的UI渲染之后。因为副作用的执行是异步的，并且不会阻塞浏览器
    1. 与类组件中componentDidMount和componentDidUpdata的区别：
    • componentDidMount和componentDidUpdata，更改了真实Dom，但是用户还没有看到UI就更新，是同步的
    • useEffect中的副作用函数，更改了真实Dom，并且用户已经看到了UI更新后再执行副作用函数，是异步的
  2. 每个函数组件中，可以多次使用useEffect,但不要放入判断或者循环等代码块中
  3. useEffect中的副作用函数，可以有返回值，返回值必须是一个函数，该函数叫清理函数
    1. 该函数运行时间点，在每次运行副作用函数之前
    2. 组件首次渲染不会执行
    3. 组件被销毁是一定执行
  4. useEffect函数，可以传递第二个参数
    1. 第二个参数是一个数组，数组中记录该副作用的依赖数据
    2. 当组件重新渲染后，只有依赖数据与上一次不一样时，才会执行副作用
    3. 当传递了依赖数据后，如果数据没有发生变化((例只传一个空数组)：
    • 副作用函数仅在第一次渲染后执行
    • 清理函数仅在卸载组件后运行
  5. 副作用函数中，如果使用了函数上下文中的变量，则由于闭包的影响，会导致副作用函数中变量不会实时变化
  6. 副作用函数在每次注册时，会覆盖掉之前的副作用函数，因此，尽量保持副作用函数稳定，否则控制起来会比较复杂

useState原理

React Hook

相关推荐