react 进阶必学 hook (四):自定义hook

2024-04-17 20:32

本文主要是介绍react 进阶必学 hook (四):自定义hook,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

系列文章传送门:

react 进阶必学 hook (一):useState 来一碗大碗宽面

react 进阶必学 hook (二):useEffect 专治不吃宽面

react 进阶必学 hook (三):useContext 面馆分店开张了

react 进阶必学 hook (四):自定义hook

react 进阶必学 hook (五):额外的hook

什么是自定义hook

官网原话如下:

自定义 Hook 是一个函数,其名称以 “use” 开头,函数内部可以调用其他的 Hook,自定义 Hook 是一种自然遵循 Hook 设计的约定,而并不是 React 的特性

自定义hook有一下特性或是约定:

在这里插入图片描述

  • 自定义hook中可以调用其他hook
  • 必须以use开头,就像组件必须以大写字母开头一样
  • 自定义hook中管理state也是使用useState、useEffect,因为useState在调用的时候就是完全独立的

自定义hook解决了什么问题

想必开发人员对utils文件夹都很熟悉,在开发的时候我们会把经常使用的一些方法函数放到utils文件夹中,因为这些逻辑方法的复用率很高;同样自定义hook也是解决类似的问题。

React的组件思想其实就是一种将代码复用的做法,然而在编写组件的过程中又有一些逻辑是可以复用的,但是这些逻辑不需要在ui上展示或是有些组件不能在更细的拆分,因此我们可以将这些逻辑抽象成自定义hook,和组件的抽象不是一个纬度,就像抽象工厂模式;这种功能的抽象,严格控制输入输出,还有点函数式编程的思想,自定义的hook我们可以在不同的组件中使用,就像utils中的方法一样。

面馆例子

react 进阶必学 hook (三):useContext 面馆分店开张了中我们添加了一个统计一共卖出多少面的需求,每一个面馆卖出一碗面后都做了两个动作:

  1. 自己面馆的counter显式加一
  2. 面馆总计的counter显式加一

代码如下:

    const [count, setCount] = useState(0); const {counter, add} = useContext(context)useEffect(() => {            add()return window.alert(`一共卖出${counter}碗💪💪💪💪`)}, [count])

其中 const [count, setCount] = useState(0);是本面馆的counter,add()控制的是上下文中的总计的counter,两个是分开的,但是仔细想一下,这两个过程其实是严格绑定的,如果添加其他面的品类,添加新的逻辑就会分散导致不好维护,因此可以将这个逻辑写成一个hook。

1. 创建自定义hook

我们先创建一个自定义hook,命名为useCounter,因为要求必须以use开头:

export default function useCounter(initialState) {const [count,

这篇关于react 进阶必学 hook (四):自定义hook的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/912778

相关文章

HTML5 Mobile Upload

HTML5移动端图片上传并前端预览 用到了HTML5的FileReader对象,主要思想是由于移动端的网络不比PC快,故需要做上传前预览,采用base64编码目前是比较好的方法。前端用FileReader获取图片并转为base64编码并<img>预览,上传到服务器由后台解码生成图片并保存到磁盘。 核心代码: $('input[type=file]').change(function(){

html5 progress元素

progress元素是HTML5中新增的状态交互元素,用来表示页面中某个任务完成的进度,IDL定义如下: interface HTMLProgressElement : HTMLElement {attribute double value;attribute double max;readonly attribute double position;readonly attribut

HTML5上传图片base64编码显示缩略图

<li><label for="username">营业执照</label><a href="javascript:void(0);" class="cert-btn-blue-add"><span class="icon-add-white"></span><input type="file" capture="camera"/>添加图片</a><a class="cert-arrow-ri

jQuery插件 笔记

//闭包限定命名空间(function ($) {//默认参数var defaluts = {foreground: 'red',background: 'yellow'};$.fn.extend({"highLight": function (options) {var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖

uni-app获取手机通讯录(基于HTML5+)

官方API:https://www.html5plus.org/doc/zh_cn/contacts.html   话不多说,直接上代码 contacts.vue <template><view><button type="primary" @tap="getContacts">获取联系人</button><block v-for="(item,index) in list" :k

好用的vue富文本编辑器记录

vue-quill-editor https://github.com/surmon-china/vue-quill-editor https://www.npmjs.com/package/vue-quill-editor https://blog.csdn.net/nickroprak/article/details/86645519(自定义图片上传) *默认上传图片为base64编吗

vuex重点笔记

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 这个状态自管理应用包含以下几个部分: state,驱动应用的数据源;view,以声明方式将 state 映射到视图;actions,响应在 view 上的用户输入导致的状态变化。 但是,当我们的应用遇到多个组件共享状态时,单向数据流的简

vue 电脑端调摄像头拍照,canvas转base64,base64转图片文件并上传到服务器

VUE(用了iview):  <template><div id='cameraUpload'><Form ref='member' :label-width='120' :model='member' :rules='memberRule' style='width: 600px'><FormItem label='照片' prop='photo'><div v-if="member.phot

Vue数组改变,视图不更新解决方案

列表渲染 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9 this.$forceUpdate() // 强制刷新 Vue.set(Array,index,