认识 React Hooks

回顾函数组件

函数组件

  • 没有组件实例

  • 不能监听各个生命周期

  • 无法扩展属性和方法

  • 没有 state 和 setState

  • 只是输入 props ,输出 jsx ,纯函数

javascript 复制代码
 // class 组件
 class List extends React.Component {
     constructor(props) {
         super(props)
     }
     render() {
         const { list } = this.props
 ​
         return <ul>{list.map((item, index) => {
             return <li key={item.id}>
                 <span>{item.title}</span>
             </li>
         })}</ul>
     }
 }
 ​
 // 函数组件
 function List(props) {
     const { list } = props
 ​
     return <ul>{list.map((item, index) => {
         return <li key={item.id}>
             <span>{item.title}</span>
         </li>
     })}</ul>
 }

class 组件 vs 函数组件

class 组件有如下问题

  • 大型组件很难拆分和重构 ,也很难测试

  • 业务逻辑分散在组件的各个方法之中,导致重复逻辑或关联逻辑

  • 组件类引入了 复杂的编程模式,比如 render props 和高阶组件。

按照 React 函数式编程的思维来说,一个组件更像一个函数,而不像一个 class ,即 view = fn(props) 所以,函数组件会看起来更简洁、符合逻辑。

但函数组件没有 state ,没有生命周期,还无法取代 class 组件。所以,才有了 React Hooks

state hook

函数组件,要求必需是纯函数,不能有副作用。因此,要在函数组件使用 state ,不能直接使用,而是要"钩"进来,这就是 Hooks

那如何把 state "钩"到函数组件呢?

代码总结

  • const [data, setData] = useState(0) 传入初始值,返回一个数组

  • 数组第一个元素,state 值

  • 数组第二个元素,setState 函数

注意命名规范

  • 规定所有 Hook 命名必须是 use 开头,如 useXxx

  • 自定义的 Hook ,也要 use 开头

  • 其他地方,不要乱用 useXxx 名字

effect hook

有了 state 之后,还差一个常用的功能 ------ 组件生命周期。例如,组件经常会在 didMount 里发请求

模拟声生命周期

  • 模拟 ComponentDidMount :useEffect 依赖 []

  • 模拟 ComponentDidUpdate :useEffect 无依赖,或者依赖 [a, b]

  • 模拟 ComponentWillUnMount :useEffect 中返回一个函数

  • 模拟 ComponentDidMount + ComponentDidUpdate :useEffect 无依赖

effect 实现的是副作用,解释一下这个词

  • 纯函数,输入参数,返回结果,不应该有副作用

  • 副作用:对函数之外的干扰,如设置一个定时任务

  • 而组件却需要副作用,所以用 effect hook 实现

模拟 ComponentWillUnMount 和 class 组件的 WillUnMount 还不一样。

以一个"监听好友在线状态(支持途中好友切换) "的组件为例子说明 ------ FriendStatusClass.jsFriendStatus.js ,对比着看。

  • 先用 class 组件:演示,光有 WillUnmount 满足不了需求,需要结合 Update 声明周期

  • 而用 effect Hook 一步就可以解决问题:

    • 使用 useEffect 无依赖,实现同时模拟 Update 生命周期
  • 所以这里的 "模拟 ComponentWillUnMount" 和 class 组件的 WillUnMount 不一样

    • 因为模拟 ComponentWillUnMount中 返回的函数 会在 下一次effect 执行之前被执行,无论是更新还是卸载

小结

有了 state ,有了最基本的 3 个生命周期,日常见的功能也就都能做了

相关推荐
我在北京coding1 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景2 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘2 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾2 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉2 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
乆夨(jiuze)3 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中3 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
小飞悟3 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
code_YuJun3 小时前
Promise 基础使用
前端·javascript·promise
Codebee3 小时前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架