[React] 子组件向父组件通信:回调函数(从0搭建React+antd+TypeScript+Umi Hooks+Mobx前端框架)

文章目录:

  1. [React] 子组件向父组件通信:回调函数
  2. 从0搭建React+antd+TypeScript+Umi Hooks+Mobx前端框架

一、[React] 子组件向父组件通信:回调函数

React组件之间的是彼此独立的,组件间的数据流动是单向的,父组件向子组件通信是最常见的方法,父组件通过 props 向子组件传递需要的信息。

在React中,子组件向父组件通信时,可以使用回调函数,或者自定义事件。

在简单的场景中,回调函数常用的办法。

注:

(1)setState是一个异步方法,一个生命周期内所有的setState方法会合并操作。

在 componentWillMount 中执行 setState 方法,组件会更新 state ,但是组件只渲染一次。

因此,这是无意义的执行,初始化时的 state ,都可以放在 this.state={...} 中。

(2)原生组件的自定义属性应该加上'data-'前缀,React组件则不需要。

深入React技术栈 - P74~P75

二、从0搭建React+antd+TypeScript+Umi Hooks+Mobx前端框架

因为现在公司的主要技术栈是React,所以也想着能够搭建一个好的React前端框架,方便在工作中使用;框架在打包过程也做了优化,多线程,拆包,缓存等等手段提升打包速度和质量。主要用到的库包括:

创建带TypeScript模板的React-app,推荐使用yarn,接下来我也主要以yarn做例子

然后在项目根目录创建一个 craco.config.js 用于修改默认配置。antd按需加载以及自定义主题

重新打包就可以了, 所有的主题配置在这里噢

这里利用React-router做路由,同时也会根据用户角色,做权限处理;只有当角色和路由允许的角色一致时才可以访问和展示。

新建router下新建indext.tsx 用于渲染页面

引入Router/index.tsx

新建hasPermission.ts,如果页面 roles 包括用户的角色则返回true,在渲染menu和子页面的时候就根据这个值渲染页面。

比如Home页面,渲染子页面的逻辑:

在这里 SubPages1 下面的 page1 就无法展示出来和访问,如果直接输入路由也会访问页面不存在,因为page1允许的角色 user 而我们角色是 admin 所以无法展示。

useImmer 很好的解决了ReactHooks中的赋值的性能问题,可以单独更新某个对象的某个属性。

上面的赋值方法也可以写到一起,效果是一样的:

Umi Hooks 是一个 React Hooks 库,致力提供常用且高质量的 Hooks。提供了非常多的Hooks组件,比如上面使用的 usePersistFn ,他的作用:在某些场景中,你可能会需要用 useCallback 记住一个回调,但由于内部函数必须经常重新创建,记忆效果不是很好,导致子组件重复 render。对于超级复杂的子组件,重新渲染会对性能造成影响。通过 usePersistFn ,可以保证函数地址永远不会变化。Umi Hooks功能还是非常强大的,有很多功能很强大的API。大家可以去官方文档看看 。

自定义 hooks 其实在我们的开发工作中,还是很常遇到的。 hooks 的好处就是可以抽离公共方法,像组件一样的随意使用,对于快节奏的开发工作还是很舒服的,比如你觉得 react hooks 或者 umi hooks 的api,不能满足自己的需求,也可以自己创新一些api。我这里举个例子,大家写 class 组件写的很多的话,会经常用的 this.setState() ,大家都知道 this.setState() 是异步执行,你无法直接拿到最新的 state 。 hooks 中的 useState 同样也是异步的,你无法直接获取到最新的 state ,所以我自己写了一个 useSetState 方法,用于在修改完状态后能够立即拿到最新的 state 。

我们在src/hooks文件夹下新建 useSetState.ts

使用的方式也很简单,基本和useState一致,只是在setState的时候提供一个回调函数。

这就完成了带回调的 useSetState hooks 的编写,不过这种写法不太推荐在 hooks 中使用,建议需要获取最新的数值都在 useEffect 或者 useUpdateEffect(umi hooks) 中去。

状态管理选择的Mobx,Mobx和Redux我都用过,不过当我习惯用Mobx后,就感觉还是Mobx更方便一些,所以更喜欢在项目中用Mobx,现在Mobx已经更新到5.0版本了,不过5.0版本并不支持ie11,所以如果想要兼容性可以选择4.0的版本,或者Redux。

这里推荐一个针对Mobx的库, mobx-react-lite :它是基于 React 16.8 和 Hooks 的 MobX 的轻量级React绑定。

这个主要影响的是调用方法的形式,对于Mobx的书写是一样的,比如写一个加减数值:

这里你的typeScirpt可能会编译不了,会报错:Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.

解决方法是在 tsconfig.json 加入配置:

完毕以后,一定要把 storeProvider 包裹所需要共享状态的页面,我这里直接放到app.tsx

剩下来就仅仅是调用的事情了:

此外axios的配置应该大家都知道,所以我这也不多说了,具体在我的源码里面也有,utils下的axios.ts

加入了打包分析 webpack-bundle-analyzer speed-measure-webpack-plugin

加入了打包进度条 webpackbar

加入了打包压缩 compression-webpack-plugin terser-webpack-plugin

还对包进行拆包

开发环境的域名代理 devServer

加快打包速度,还可以考虑删除antd-icons,单独去iconfont网站下,按需引入。不然打包会费很多时间

引入dotenv-cli

新增开发环境配置文件 .env.development 和 .env.production 两个文件

然后修改package.json中的启动脚本:

现在 yarn start 或者 yarn build 就会根据环境配置来处理。

还有一些细节的调整,会尽力将这个框架更加完善的。

github地址:

欢迎star 和提意见

到此,以上就是小编对于深入react技术栈 mobi的问题就介绍到这了,希望介绍关于深入react技术栈 mobi的2点解答对大家有用。

mobi图书网
mobi图书网管理员

上一篇:西游记txt(请问有西游记txt电子书吗?)
下一篇:原始战纪txt网盘或微盘(三阶搞定文言文微盘)

留言评论

暂无留言