随笔分类 - React
摘要:
最近做东西都在用ts,有时候写比较复杂的功能,如果不熟悉,类型写起来还是挺麻烦的。有这样一个功能,在这里,我们就不以我们现有的业务来举例了,我们还是已`Animal`举例,来说明场景。
阅读全文

摘要:
前端多个包管理的的方式一般都是采用`monorepo`的方式去管理,之前都是使用的`lerna`的workspace去管理。这段时间包管理切换到了`pnpm`上,它也有worksapce,可以支持`monorepo`。
阅读全文

摘要:
React 重新渲染的综合指南。该指南解释了什么是重新渲染,什么是必要的和不必要的重新渲染,什么情况下会触发 React 组件重新渲染。
阅读全文

摘要:
前言 最近需要重构一个老项目,定的方案用微前端去改造。主应用是老的项目,微应用是新的项目,由于重构时间比较紧张,子应用还需要使用父应用的一些组件。过程中遇到一些问题,记录一下。 方案 我们知道qiankun,可以通过props通信传递数据,把组件通过props传递过去不就行了。来开始改造我们的代码
阅读全文

摘要:前言 公司业务积累了一定程度,需要搭建自己的组件库,有了组件库,整个团队开发效率会提高恨多。 做组件库需要提供开发调试环境,和组件文档的展示,调研了几个比较主流的方案,如下: "docz" 配置简单,功能相对来说也较完善。我们现在项目是用的umi框架,正好官方也提供了开发库的脚手架,也集成了doc
阅读全文
摘要:前言 大家在做业务系统的时候,很多地方都是列表增删改查,做这些功能占据了大家很长时间,如果我们有类似的业务,半个小时就能做出一套那是不是很爽呢。 这样我们就可以有更多的时间学习一些新的东西。我们这套框架对此做了下封装,适合的小伙伴也可以借鉴封装到自己的框架当中去。核心思想用的React 高阶组件解耦
阅读全文
摘要:前言 之前写过一篇关于 "React的国际化" 文章,主要是用react intl库,雅虎开源的。react intl是用高阶组件包装一层来做国际化。 基于组件化会有一些问题,比如在一些工具方法中需要国际化,就需要自己去实现了。在umi react快速开发框架我们采用 "react intl uni
阅读全文
摘要:介绍 基于umi搭建一个快速开发框架,react 应用框架。umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载。 我们会在基于umi的基础上,开发出一个框架通用功能和业务功能 框架功能列表 全局layout 权限管理 封
阅读全文
摘要:前言 React 做国际化,我推荐使用 "React intl" , 这个库提供了 React 组件和Api两种方式来格式化日期,数字和字符串等。知道这个库了,那让我们开始使用它 组件用法 为了和React 比较融和,我们可以使用组件的方式 1.安装 2.添加引用 3.添加 locale 配置文件
阅读全文
摘要:前言 用 React + Redux 已经一段时间了,记得刚开始用Redux 的时候感觉非常绕,总搞不起里面的关系,如果大家用一段时间Redux又看了它的源码话,对你的理解会有很大的帮助。看完后,在回来看Redux,有一种 柳暗花明又一村 的感觉 . 源码 我分析的是用 es6 语法的源码,大家看目
阅读全文
摘要:前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1、getDefaultProps() 设置默认的props,也可以用dufaultProps设置组件的默
阅读全文