[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点解答对大家有用 。