React Hooks出来也有一段时间了,在这个过程中有一个前端的React项目是专门用的React的FC组件形式来写的。在过程中提炼了一些使用实例,这里记录下。还有,如果你之前从来没有了解过React Hooks,建议你先

去React官方网站了解React Hooks的基本概念和使用方式。
官方文档链接:https://reactjs.org/docs/hooks-overview.html#state-hook

使用Suspense和lazy实现模块懒加载功能

在之前的项目中,如果我们要实现React应用模块的懒加载,用到最多的应该是react-loadable这个库,但是在现在,官方提供了内置的实现方案,就是使用lazy这个方法来实现。我们先来看下一个简单的示例:

在上面的代码中,首先我们需要从react中导入Suspense组件和lazy方法,在接下来的代码中,通过lazy方法,加载对应的模块,lazy方法接收一个函数作为参数,这个函数返回一个Promise对象。

这里要注意的是上面的webpackChunkName这个注释,这个注释是webpack提供给我们使用的,主要用来自定义chunk的名称,因为我们这里使用了lazy+import,所以,webpack知道需要将指定路径下(这里就是modules/home)下的文件给打包到一个文件中,并且
使用webpackChunkName指定的名称来命名生成chunk包的名称,这里生成的chunk如下:

Suspense组件用来在加载对应的模块过程中,展示用户友好的提示信息,这个组件有一个属性,fallback,这个属性可以是一个Ract的组件。这里我们就简单的显示“加载中…”这几个文本,这里你完全可以自己实现一个非常漂亮的组件(认真脸)。

这样之后,我们在浏览器里面打开,然后设置网络为slow 3g,查看效果

到这里,我们就使用React提供给我们的Suspense和lazy完成了懒加载的功能。

使用React Hooks实现自定义的Modal组件

不管你做什么样的前端项目,Modal组件肯定会使用到(没使用过的举手?‍♂️?)。

目前React的组件库,比较流行的应该是阿里的ant.design了,我们在使用这个的时候,是不是经常会写很多重复的逻辑在各个组件里面呢?要么就是自己实现一个高阶组件来抽象一层,让其他组件可以复用。
但是高阶组件目前也有一个大的问题就是嵌套地狱,我们看下这个图:

大概就是这样子,如果你知道js的回调地狱的话,应该知道我在说什么,对不对?

然后我们来看下使用React Hooks怎么实现一个自定义的Modal组件。

使用:

在上面的代码中,首先我们使用了useState定义了3个state属性,这里示例中就3个,如果你需要更多的自定义内容,可以自己再扩展。useState方法给定一个初始化的属性值,返回一个属性变量和设置该属性的方法。
以visible为例,这个属性用来控制Modal的隐藏和显示。在使用useState方法返回的setVisible的时候,组件状态会自动更新,然后触发重新渲染,是不是跟React的Class组件的setState有点类似?

在自定义的Modal中,我们返回了show,hide方法,setTitle,setContent方法,以及一个CustomModal组件,这样外部在使用的时候就可以直接像上面的使用代码一样,放到render中即可。

在需要修改title或者修改内容的时候,调用setTitle和setContent修改modal中的内容,注意这里的setContent不止可以传入String,还可以传入一个ReactElement,所有里面的你可以传一个Form进去,实现弹出框形式的表单组件。

总结

本篇文章主要讲了以下几个点:
– Suspense组件的使用方式
– lazy方法的使用,以及webpack自定义chunk name
– 使用useState自定义Modal框

是白的 我是一个勤奋的爬虫~~
{{uname}}

{{meta.replies}} 条回复
写下第一个评论!

-----------到底了-----------