Hook

case

case

生命周期

Hooks 带来的全新机制让人耳目一新,因为它拓展了 React 的开发思路,为 React 开发者提供了一种更方便、更简洁的选择。
在引入 Hooks 的概念后,函数组件既保留了原本的简洁,也具备了状态管理、生命周期管理等能力,在原来 Class 组件所具备的能力基础上,还解决了 Class 组件存在的一些代码冗余、逻辑难以复用等问题。因此,在如今的 React 中,Hooks 已经逐渐取代了 Class 的地位,成了主导。
而且,Hooks 相对于 Class 而言,更容易上手,其简洁性、逻辑复用性等特性深受开发者喜爱,可谓是前端界的"流量明星",不止 React,Vue 3.0 、Preact、Solid.js 等框架也都选择加入 Hooks 的大家庭,前端的日常工作也在趋向于 Hooks 开发。

和生命周期关系

React的函数组件可以使用Hooks和生命周期方法来管理组件的状态和副作用。Hooks是React 16.8版本引入的新特性,它们允许您在函数组件中使用状态和其他React特性,而无需使用类组件。生命周期方法是类组件中的一部分,用于管理组件的生命周期事件。
如果您正在使用React的新版本(16.8及以上),推荐使用Hooks来管理组件的状态和副作用,因为Hooks更加简洁和灵活,使代码更易维护。常用的Hooks包括useState用于管理状态,useEffect用于处理副作用等。
如果您的项目使用的是较旧版本的React,或者您正在维护一个使用类组件的项目,那么您需要使用生命周期方法来管理组件的状态和副作用。在这种情况下,您可以使用生命周期方法如componentDidMount、componentDidUpdate和componentWillUnmount等来处理不同的生命周期事件。
总的来说,对于新项目和React的较新版本,建议使用Hooks来管理组件。如果您在维护一个旧项目或者需要与类组件一起工作,那么生命周期方法仍然是有效的选项。根据您的具体项目需求和React版本,您可以选择使用Hooks或生命周期方法。

常用

React常见的Hook包括:
  1. useState:用于在函数组件中添加状态管理。
  1. useEffect:用于处理副作用操作,比如数据获取、订阅和手动DOM操作。
  1. useContext:用于在组件树中传递和访问上下文信息。
  1. useRef:用于在函数组件中创建可变的ref引用。
  1. useMemo:用于记忆计算结果,以提高性能。
  1. useCallback:用于记忆回调函数,以优化性能。
  1. useReducer:用于管理复杂的状态逻辑。
  1. useLayoutEffect:类似于useEffect,但在浏览器布局更新之前同步触发。
  1. useImperativeHandle:用于自定义父组件访问子组件的方法和属性。
 
四个最常见Hooks:. useState; useEffect; useContext; useReducer. useState
 

UseState修改对象

返回一个新的对象就会产生变更了
和生命周期对应
 
Loading...
目录
文章列表
王小扬博客
产品
Think
Git
软件开发
计算机网络
CI
DB
设计
缓存
Docker
Node
操作系统
Java
大前端
Nestjs
其他
PHP