react hooks自定义组件居然能这样做

前言

  这里写一下如何封装可复用组件。首先技术栈 react hooks + props-type + jsx封装纯函数组件。类组件和typeScript在这不做讨论,大家别白跑一趟。

接下来会说一下封装可复用组件的思路,比如一个新手应该怎么去封装,都需要有哪些东西。

  然后说一些复杂组件需要的功能,比如闭合标签内部dom怎么处理,其实就是插槽功能,比如数据监听,内部做一些业务逻辑。

  想看原码的点这里,这是一个GitHub上完整的 react hooks 项目,源码:
https://github.com/Aaron-China/react-cli17/tree/master/src/components/c-menu

目录

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声明多个类型,对象内部属性的类型校验,甚至是定义一个类型检查的函数

react hooks自定义组件居然能这样做

三、父子组件与他的数据互通

  处理好了props,我们处理回调,如图所示,是我写的一个简单的回调,这里一般不写默认值,但是要做非空判断,因为不是所有的属性,使用者都需要。

react hooks自定义组件居然能这样做

四、实现类似于vue插槽一样的功能 (children属性)

  封装组件经常会遇到需要 插槽 的情况,简单说就是一个闭合组件,内部的dom你想对他做一些处理,比如样式上的。这里说一下改怎么做。看图,注意一下,如果有一个根标签,children就是个对象,如果多个并列标签的话,children就是数组,用法不一样,这里根据需求来,我这里用的是对象,注意需要定义children的类型,是标签,还是一个数组的标签

react hooks自定义组件居然能这样做

五、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自定义组件居然能这样做

六、总结

  关于react hooks封装可复用组件,暂时就想到了这么多,文章开头我贴了GitHub的项目地址,因为要说的东西比较多,没法一个例子就把所有东西清晰、条理的说明白,期间我截图了好几个组件的代码,大家看源码的话,直接看components文件夹。

原文地址:
https://www.cnblogs.com/pengfei-nie/p/15719569.html

如果觉得本文对你有帮助,麻烦点赞关注支持一下 

上一篇:Recoil 的使用


下一篇:【20211222】CmsWing代码分析 - src/controller/extend/controller.js(三)