美文网首页
Hooks概念理解

Hooks概念理解

作者: Jycoding | 来源:发表于2022-06-28 15:30 被阅读0次

本节任务: 能够理解hooks的概念及解决的问题

1. 什么是hooks

Hooks的本质:一套能够使函数组件更强大,更灵活的“钩子”

React体系里组件分为 类组件 和 函数组件

经过多年的实战,函数组件是一个更加匹配React的设计理念 UI = f(data),也更有利于逻辑拆分与重用的组件表达形式,而先前的函数组件是不可以有自己的状态的,为了能让函数组件可以拥有自己的状态,所以从react v16.8开始,Hooks应运而生

注意点:

有了hooks之后,为了兼容老版本,class类组件并没有被移除,俩者都可以使用

有了hooks之后,不能在把函数成为无状态组件了,因为hooks为函数组件提供了状态

hooks只能在函数组件中使用

2. Hooks解决了什么问题

Hooks的出现解决了俩个问题 1. 组件的状态逻辑复用 2.class组件自身的问题

组件的逻辑复用

在hooks出现之前,react先后尝试了 mixins混入,HOC高阶组件,render-props等模式

但是都有各自的问题,比如mixin的数据来源不清晰,高阶组件的嵌套问题等等

class组件自身的问题

class组件就像一个厚重的‘战舰’ 一样,大而全,提供了很多东西,有不可忽视的学习成本,比如各种生命周期,this指向问题等等,而我们更多时候需要的是一个轻快灵活的'快艇'

相关文章

  • Hooks概念理解

    本节任务: 能够理解hooks的概念及解决的问题 1. 什么是hooks Hooks的本质:一套能够使函数组件更强...

  • React-hooks API介绍

    react-hooks HOOKS hooks概念在React Conf 2018被提出来,并将在未来的版本中被...

  • React Hooks 入门

    React Hooks 是 React v16.8 版本引入了全新的 API。 React Hooks 基本概念 ...

  • React Hooks究竟是什么呢?

    摘要: React Hooks原理解析。 原文:快速了解 React Hooks 原理 译者:前端小智 我们大部分...

  • React Hooks 原理

    原文地址React Hooks实例教学 目前,Hooks 应该是 React 中最火的概念了,在阅读这篇文章之前,...

  • 关于 React Hooks

    研习 react hooks 文档后,一些个人认为值得理解和关注的内容。 useState react hooks...

  • 理解 React Hooks

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由志航发表于云+社区专栏 TL;DR 一句话总结 ...

  • 理解React Hooks

    useReducer 1. 组件初始化 在组件初始化的时候,调用useReducer会创建一个reducer ho...

  • React Hooks 深入系列

    本文基于近段时间对 hooks 碎片化的理解作一次简单梳理, 个人博客。同时欢迎关注基于 hooks 构建的 UI...

  • 完全理解React Hooks

    看完这篇文章,希望你可以从整体上对 Hooks 有个认识,并对其设计哲学有一些理解 React组件设计理论 Rea...

网友评论

      本文标题:Hooks概念理解

      本文链接:https://www.haomeiwen.com/subject/tyoavrtx.html