React

A collection of 8 posts

优雅地提高 React 的表单页面的开发效率
React

优雅地提高 React 的表单页面的开发效率

Den Form为什么叫 Den Form ? 可能是因为 丹凤眼 非常迷人吧... 一个非常轻巧的 Form 实现, gzip 体积只有 3kb, 可以很方便跨越组件层级获取表单对象, 或者管理联动更新 大部分情况下,我们不需要表单组件,具体请阅读笔者的另一篇《我们或许不需要 React 的 Form 组件》安装ymzuiku/react-den-formReact中轻巧的Form实现. Contribute to ymzuiku/react-den-form development

我们或许不需要 React 的 Form 组件
React

我们或许不需要 React 的 Form 组件

在上一篇小甜点 《我们或许不需要 classnames 这个库》 中, 我们 简单的使用了一些语法代替了 classnames 这个库 现在我们调整一下难度, 移除 React 中相对比较复杂的组件: Form 组件 在移除 Form 组件之前, 我们现需要进行一些思考, 为什么会有 Form 组件及 Form 组件和 React 状态管理的关系 注意, 接下来的内容非常容易让 React 开发人员感到不适,

我们或许不需要 Redux 这个库
React

我们或许不需要 Redux 这个库

之前和大家分享了我们不需要系列: 《我们或许不需要 classnames 这个库》《我们或许不需要 React 的 Form 组件》接下来我们继续调整难度, 替换应用范围更广的库: redux, react-redux 《我们或许不需要...》系列如果是做轮子就没有意义了, 此系列目的是通过简单的代码, 对原有库的设计思路进行概括提取, 最终从理解其理念到更高效的开发项目的过程. 此行目的Redux 在 React 中的重要性在此不再暂开, 其设计理念(单向数据流, 提供者模式)深得人心, 但是在实际开发中, 每个引用 Redux 的项目都会需要解决以下三个问题:

React 中使用 worker 和 decode 优化 image 的加载
React

React 中使用 worker 和 decode 优化 image 的加载

图片加载占据了一个 web 应用的较多资源。 这篇文章中,我们实现一个 ImgWorker 组件,满足以下功能: image 可选择的 worker 加载,并且做好优雅降级decode 解码,并且做好优雅降级miniSrc 和 src 竞速加载注意,在性能较低的机器,开启 worker 进程下载的开销大于直接使用主进程下载的开销; 使用 worker 需要主动传递 worker 属性为 true 开启 组件代码先上代码,

使用70行代码配合hooks重新实现react-redux
React

使用70行代码配合hooks重新实现react-redux

原由react-hooks 是 react 官方新的编写推荐,我们很容易在官方的 useReducer 钩子上进行一层很简单的封装以达到和以往 react-redux \ redux-thunk \ redux-logger 类似的功能,并且大幅度简化了声明。 react-hooks 的更多信息请阅读 reactjs.org/hooks; 先看看源码这 70 行代码是一个完整的逻辑, 客官可以先阅读,或许后续的说明文档也就不需要阅读了。 简易的实现了 react-redux, redux-thunk 和 redux-logger默认使用 reducer-in-action 的风格, 也可声明传统的

CSS in JS 很棒, 但是如何方便的处理CSS伪类
React

CSS in JS 很棒, 但是如何方便的处理CSS伪类

CSS in JS 很棒, 但是如何方便的处理伪类(Pseudo-classes)? react-dom-pseudo 提供一个类似 react-motion 方式的组件,方便的为 react-dom 对象提供类似 CSS 的伪类. 我们首先用 npm 安装: $ npm install --save react-dom-pseudo APIsreact-dom-pseudo 支持以下伪类: Props模拟伪类说明默认值必须merge是否使用 style 和 其他状态的 style 进行合并true否disable是否取消事件监听false否style默认样式undefined否linkStyle:

BGI-IT部门  Antd+React科普
React

BGI-IT部门 Antd+React科普

Ant Design 是什么 AntDesign(简称Antd): 是蚂蚁金服开发和服务于企业级后台产品。 Antd提供一套开箱即用的高质量 React 组件Antd拥有完整的一套设计规范直接看Antd官方文档React是什么React是Facebook开源的一个前端框架,官方Slogen是“一次学习,随处编写”。现在在阿里、腾讯、知乎和众多新兴项目、新兴公司中被广泛应用,也是Github现阶段Start最多的前端框架, 其特点是: 组件化在React中,页面中所有元素都由组件组成组件复用提高效率项目如果规划有度,会逐步形成自己的组件库,前端项目开发会越来越快虚拟DOM虚拟DOM就是由JS对象模拟DOM树,每次页面中需要更新DOM的时候,JS在循环生命周期中统一对比当前和历史状态的DOM树差异一并更新差异到真正的DOM上。优势1: 直接操作修改DOM虽然更快,但是如果频繁操作DOM就没有这种统一对比操作修改的性能高优势2: 由于JS代码操作的是虚拟的DOM,所以只要在其他平台把图层对虚拟DOM进行映射就可以达到跨平台的目的,而前端的开发方式不需要改变,

You've successfully subscribed to 摄人心魄!