react hooks 如何自定义组件(react函数组件的封装)
前言
这里写一下如何封装可复用组件。首先技术栈 react hooks + props-type + jsx封装纯函数组件。类组件和typeScript在这不做讨论,大家别白跑一趟。
接下来会说一下封装可复用组件的思路,比如一个新手应该怎么去封装,都需要有哪些东西。
然后说一些复杂组件需要的功能,比如闭合标签内部dom怎么处理,其实就是插槽功能,比如数据监听,内部做一些业务逻辑。
想看原码的点这里,这是一个GitHub上完整的 react hooks 项目, 点这里,看源码
目录
1、思路 及 封装的误区
2、 props 的类型检测、默认值
3、父子组件与他的数据互通
4、实现类似于vue插槽一样的功能 (children属性)
5、useState、useEffect等hooks讲解
6、总结
一、思路
无论是js还是C++等等,都要求 模块内高内聚、模块间低耦合。简单点说就是你改了一个模块,另一个模块稍作修改就行,不至于改动很大。根据这个编程思想,一个可复用的组件的对外交互,就是决定他耦合度的关键。把组件比作香肠机,输入猪肉,输出香肠。输入就是props,输出就是界面效果 以及 给外部反馈的回调函数。关于输入props,我们对他有要求,就是类型检查和默认值。比如输入的得是猪肉不能是石头,默认做小香肠,而不是大香肠。回调函数也有要求,你得尽可能满足可以预知的逻辑,简单说就是你以后用这个组件的时候,需要某个数据,这个组件得支持,得有对应的回调。
注意,这里说几个误区,也是很多新手经常犯错的地方。
1、项目中可复用组件我认为有2种,而不是所有组件都按照一套标准去规范
第一种 全局可复用组件,这类组件类似于antd那种ui库,是提供给开发项目所有人使用的,频率高。这一类必须严格规范,不能乱搞。必须有props的类型检查,有需要给props加默认值;组件内部只能通过props修改,通过回调函数反馈,严禁其他任何形式的修改;必须对组件功能,props,内部的方法等添加注释。
第二种 是一些局部功能组件,这一类可能只在部分特定情况下会使用,不需要像第一种那种严格要求,比较灵活多变,尽可能以简单通俗易懂去编写他,比如接下来要描述的几种禁忌,这类组件并没有这些要求,只要代码精简、便于维护、易读。你想怎么写都行。就这么豪横。
2、全局组件
避免使用redux一类的状态管理,能用props实现就别懒
避免使用ref获取组件数据,能用回调的都写上回调,ref可读性很差
保持纯净,自己开发的可以相互引用,但是尽可能避免对第三方、包括UI框架的使用。当然这也不是绝对,二次封装组件很常见,只是有条件的尽量自己开发。
二、 props 的类型检测、默认值
我们使用prop-types做props类型检查,得安装一下
- npm i prop-types
看下面的代码,首先引入 prop-types ,然后创建我们的函数组件,这里有奇点需要注意的,首先,先定义组件,然后在组件原型上做绑定类型检查;其次因为函数组件,所有用props-types做类型检查的props,必须在函数组件的形参中显式的声明,否则不好使。看代码也能理解毕竟绑定在原型上,初始化的时候不声明,就没办法绑定校验了。所以,我建议一种写法,所有props都做检查,都在形参中声明,能赋默认值的,都写上默认值,然后在形参的后面把注释都写明白了,这样代码一目了然,换个人可以很容易接手你的代码。这里啰嗦一嘴,函数组件,本质就是个函数,所以默认值这些都是js函数形参赋默认值的写法。
额外啰嗦两句prop-types的用法,后面这个是他的用法说明: https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html
包括所有的类型、一个props声明多个类型,对象内部属性的类型校验,甚至是定义一个类型检查的函数
三、父子组件与他的数据互通
处理好了props,我们处理回调,如图所示,是我写的一个简单的回调,这里一般不写默认值,但是要做非空判断,因为不是所有的属性,使用者都需要。
四、实现类似于vue插槽一样的功能 (children属性)
封装组件经常会遇到需要 插槽 的情况,简单说就是一个闭合组件,内部的dom你想对他做一些处理,比如样式上的。这里说一下改怎么做。看图,注意一下,如果有一个根标签,children就是个对象,如果多个并列标签的话,children就是数组,用法不一样,这里根据需求来,我这里用的是对象,注意需要定义children的类型,是标签,还是一个数组的标签
五、useState、useEffect等hooks讲解
最后写一点函数组件的使用心得。首先父组件变化 或者 函数组件内部变量变化,都会导致函数组件重新执行,如果你在return前面写个console,会发现执行了很多次,复杂的界面甚至能执行几十次,这点很操蛋,不过最终diff的时候react会做优化,合并很多变化。而且,函数组件只有hooks,没有生命周期,这些和类组件差异很大,代码逻辑也改变很大。
1、函数会不断执行,如果在函数内部声明变量或者常量会不断赋值,所以要么用useState声明要么直接放到函数外,比如标记1、3 、4。大家避免写出死循环哈。
2、useState声明的变量,默认值智慧赋值一次,比如标记 2
3、函数组件没生命周期,useEffect 用于监听变量变化,可以监听useState的也可以监听我们那个标记1这种函数外的。他第二个参数传空数组,就只会在组件初始化的时候执行一次,可以在这初始化数据,发http请求,或者时间绑定等。他的触发机制实在dom渲染结束之后。比如标记 5
4、useMemo 通过这个hooks可以优化组件的渲染次数,是根据指定变量变化触发函数执行的
u
六、总结
关于react hooks封装可复用组件,暂时就想到了这么多,文章开头我贴了GitHub的项目地址,因为要说的东西比较多,没法一个例子就把所有东西清晰、条理的说明白,期间我截图了好几个组件的代码,大家看源码的话,直接看components文件夹。
react hooks 如何自定义组件(react函数组件的封装)的更多相关文章
- React - 组件:函数组件
目录: . 组件名字首字母一定是大写的 . 返回一个jsx . jsx依赖React,所以组件内部需要引入React . 组件传参 a. 传递. <Component list={ arrDat ...
- React Hooks 深入系列 —— 设计模式
本文是 React Hooks 深入系列的后续.此篇详细介绍了 Hooks 相对 class 的优势所在, 并介绍了相关 api 的设计思想, 同时对 Hooks 如何对齐 class 的生命周期钩子 ...
- React Hooks用法大全
前言 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖 ...
- React Hooks究竟是什么呢?
摘要: React Hooks原理解析. 原文:快速了解 React Hooks 原理 译者:前端小智 我们大部分 React 类组件可以保存状态,而函数组件不能? 并且类组件具有生命周期,而函数组件 ...
- React Hooks总结
Hook 前言 什么是Hook 自从 16.8 版本开始,hooks 的出现使得你可以在不编写 class 的情况下使用状态管理以及其它 React 的特性. 那么在 React Hooks 出现之前 ...
- React Hooks的理解
一.是什么 Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 至于为什么引入hook,官方给出的动机是解决长时间使 ...
- React Hooks介绍和环境搭建(一)
React Hooks 简介 2018年底FaceBook的React小组推出Hooks以来,所有的React的开发者都对它大为赞赏.React Hooks就是用函数的形式代替原来的继承类的形式,并且 ...
- [React Hooks长文总结系列一]初出茅庐,状态与副作用
写在开头 React Hooks在我的上一个项目中得到了充分的使用,对于这个项目来说,我们跳过传统的类组件直接过渡到函数组件,确实是一个不小的挑战.在项目开发过程中也发现项目中的其他小伙伴(包括我自己 ...
- React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路
React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...
随机推荐
- Phoenix二级索引
Phoenix Hbase适合存储大量的对关系运算要求低的NOSQL数据,受Hbase 设计上的限制不能直接使用原生的API执行在关系数据库中普遍使用的条件判断和聚合等操作.Hbase很优秀,一些团队 ...
- 逻辑学与Prolog学习笔记
int a = 3 + 5; 很自然.如果Matrix a, b要加呢?没有运算符重载,a + b是不行的,只能add(a, b). int a = add(3, 5)也行.如果函数名可以用+呢?+( ...
- Flink(二)【架构原理,组件,提交流程】
目录 一.运行架构 1.架构 2.组件 二.核心概念 TaskManager . Slots Parallelism(并行度) Task .Subtask Operator Chains(任务链) E ...
- Excel 数据验证:分类选择及输入限制
几个简单设置让你的数据不再出错 如何快速选择某一大类中的细分小类 多级菜单 注意:引用可以创建二级目录,但是引用前应先用公式定义名称,然后引用,引用只能在本sheet操作.
- 【STM8】STM8S介绍(编程环境、烧录、芯片内容)(Vcap需要一个电容接地)
这篇博客的介绍大纲 [1]我使用的开发板和烧录器 [2]编程环境 [3]烧录软件和界面 [4]芯片内容 [1]我使用的开发板和烧录器 首先,我用的是STM8S003F3P6这款开发板,淘宝上就有了,5 ...
- oracle to_char处理日期
select to_char(sysdate,'d') from dual;--本周第几天 select to_char(sysdate,'dd') from dual;--本月第几天 select ...
- 在应用程序中的所有其他bean被销毁之前执行一步工作
1.实现ServletContextListener.ApplicationContextAware两个接口,在销毁方法里借助ApplicationContextAware注入的application ...
- zabbix之源码安装
#:官网地址 https://www.zabbix.com/documentation/4.0/zh/manual/installation/install #:解压并创建用户 root@ubuntu ...
- OpenStack之二: 安装OpenStack的yum源及相关组件
#: 在所有节点执行 [root@localhost ~]# yum install centos-release-openstack-stein -y #: 安装相关组件(只在管理端和计算几点安装) ...
- C++11 关键字 const 到底怎么用?
Const 的作用及历史 const (computer programming) - Wikipedia 一.历史 按理来说,要想了解一件事物提出的原因,最好的办法就是去寻找当时的历史背景,以及围绕 ...