上一篇介绍了三种设计模式,包括1.容器与展示组件 2.高阶组件 3.render props。
这篇我们继续介绍三种设计模式,包括1.context模式 2.高阶组件 3.继承模式
月黑见渔灯,孤光一点萤。微微风簇浪,散作满河星。
随着react的发展,各种组件设计模式层出不穷。react官方文档也有不少相关文章,但是组织稍显凌乱,本文就组件的设计模式这一角度,从问题出发,为大家梳理了常见的设计模式。看完这篇文章后,你将能得心应手地处理绝大多数的react组件使用问题。
开始之前先解释一下什么是设计模式。所谓模式,是指在某些场景下,针对某类问题的某种通用的解决方案。本文所阐述的设计模式并不是编程通用的设计模式,如大家熟悉的单例模式、工厂模式等等。而是在设计react组件和相关代码时的一些解决方案与技巧,包括:1.容器与展示组件 2.高阶组件 3.render props 4.context模式 5.组合组件 6.关于组合与继承
为了更好的理解,你可以将相应源码下载下来查看:源码地址
由于内容较多,分两篇进行。上篇先介绍:1.容器与展示组件 2.高阶组件 3.render props。
Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames(obj)返回一个数组,包括对象自身(不含继承)所有属性(包括不可枚举的属性,不含Symbol属性)
Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols(obj)返回一个数组,包括对象自身所有的Symbol属性
结合部门以及业界主流技术栈,积累的一些库/包。可参考这里stateofjs。
库名 | 备注 |
---|---|
react | Front-end Frameworks |
react-router | 前端路由,react-router4和之前的概念很不一样 |
redux | Data Layer |
redux-saga | Data Layer |
dva.js | 阿里出的,封装了redux、redux-saga、react-router,项目结构简单不少,就是和大把工具umi结合起来不太易用,建议直接用webpack。 |
mobx | 数据管理,面向对象的,相对于学习redux+saga来说简单了许多,推荐使用,中文文档相对少一些。 |
immutable | 在学。 |
antd | UI框架,内部系统用 |
koa | node后端框架,async语法简明清晰,但第三方的库相对express还是少一些。 |
graphql | 一种用于 API 的查询语言,方便接口迭代、更新。需要后端配合,比较难推动。如果前端自己实现接口层(node等)的话还比较合适,但带来的收益相对引入的成本好像并不高多少。部门中部分小项目在用。 |
taro | react转多端,京东出的,更新以及支持都还可以,活动页/小项目可以直接用。 |
flutter | 多端,最近很火,不知后续发展如何,纳入观察 |
react-native | Mobile,部门技术栈,待学习 |
electron | Desktop,部门技术栈,待学习 |
CSS Modules | 给css加入了局部作用域和模块依赖 |
classnames | 更灵活使用css类名 |
Lodash | JavaScript 实用工具库,防抖、节流、去重等等方法直接用。 |
js-cookie | 获取cookie |
qs | 路由参数 |
moment.js | 轻量级的JavaScript时间库 |
core.js | JavaScript的模块化标准库,兼容用 |
ismobilejs | 判断是否是移动端,轻量可靠 |
fastclick | 移动端点击事件 |
antd相关用了很多react相关的库 | antd社区精选组件 |
记录下平常使用的工具,不定期更新。
主力用VS Code,偶尔用sublime,用了如下插件
常用的排序算法一般分为五类,分别是冒泡排序、选择排序、插入排序、归并排序以及快速排序。
1 | var test=[4,43,30,431,98,0]; |
1 | var test = [4, 43, 30, 431, 98, 0]; |
1 | var test = [4, 43, 30, 431, 98, 0]; |
1 | var test = [4, 43, 30, 431, 98, 0]; |
1 | var test = [4, 43, 30, 431, 98, 0]; |