TAT. zhongzhong React Hooks 使用实例(一)
In Web开发 on 2019年07月12日 by view: 900
0

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 框

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2019/07/13486/

发表评论