react 组件方面: 总结 React 组件的三种写法 及最佳实践 [涨经验] React组件编写思路(一) 使用react-router实现单页面应用时设置页面间过渡的两种方式 [翻译]基于 Create React App路由4.0的异步组件加载(Code Splitting) React进阶——使用高阶组件(Higher-order Components)优化你的代码 Higher-order Components 高阶组件 React高阶组件(HOC)模型理论与实践 React 有哪些…

本文同步发布于知乎专栏 https://zhuanlan.zhihu.com/p/27434018,喜欢本文的就去知乎点个赞支持下吧- 引言 该系列文章将通过创建一个组件库来引导你学习如何构建自己的组件库. 这是该系列的第二部分.如果你还没有阅读 Part 1,我推荐你先阅读它.另外,我们将会讨论有关原子设计的内容.如果你不熟悉相关概念,阅读一些相关内容 (这儿)_ 将对你很有帮助._ 在该部分我们将讨论: 通过styled-components使得我们的组件变得可配置性更强 添加一个调色板到我…

本文同步发布于知乎专栏 https://zhuanlan.zhihu.com/p/27401329,喜欢本文的就去知乎点个赞支持下吧- 引言 该系列文章将通过创建一个组件库来引导你学习如何构建自己的组件库. 这是该系列的第一部分.该部分将主要关注配置我们的模块和文件结构,但我们最后将会创建一个示例组件!…

react.js 在线地址:http://slides.com/yueyao/deck/#/ COMPONENT JSX 预编译语言, 一个基于ECMAscript 的xml-link 的语法扩展,最终都是将jsx代码转换为ECMAscript. 就像 CoffeeScript / TypeScript Sass/Less Jade / Haml 一个常见的布局结构(DomTree): <div class="note"> <div class="note-…

前言 React 的开发也已经有2年时间了,先从QQ的家校群,转成做互动直播,主要是花样直播这一块.切换过来的时候,业务非常繁忙,接手过来的业务比较凌乱,也没有任何组件复用可言. 为了提高开发效率,去年10月份也开始有意识地私下封装一些组件,并且于今年年初在项目组里发起了百日效率提升计划,其中就包含组件化开发这一块. 本文并不是要谈如何去写一个 React 组件,这一块已经有不少精彩的文章.例如像这篇<重新设计 React 组件库>,里面涉及一个组件设计的各方面,如粒度控制.接口设计.数据处理…

在使用 React 编写组件的时候,我们常常会碰到两个不同的组件之间需要共享状态情况,而通常的做法就是提升状态到父组件.但是这样做会有一个问题,就是尽管只有两个组件需要这个状态,但是因为把状态提到了父组件,那么在状态变化的时候,父组件以及其下面的所有子组件都会重新 render,如果你的父组件比较复杂,包含了其他很多子组件的话,就有可能引起性能问题. Redux 通过把状态放在全局的 store 里,然后组件去订阅各自需要的状态,当状态发生变化的时候,只有那些订阅的状态发生变化的组件才重新 re…

用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具 前言 上周,同事抱怨说 react 怎么不能像 angular 那样,使用命令行工具来生成一个组件.对呀,平时工作时,想要创建一个 react 的组件,都是直接 copy 一个组件,然后做一些修改.为什么不能将这个过程交给程序去做呢?当天晚上,我就仿照 angular-cli 的 api,写了一个生成 react 组件的命令行工具 rcli.在这里记录一下实现的过程. api 设计 0.1.0 版本的 rcli 参照 an…

转自:http://www.tuicool.com/articles/Ar6Zruq React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效.然而其组件渲染机制,也决定了在对组件进行更新时还可以进行更细致的优化. react组件渲染 react的组件渲染分为初始化渲染和更新渲染. 在初始化渲染的时候会调用根组件下的所有组件的render方法进行渲染,如下图(绿色表示已渲染,这一层是没有问题的): 但是当我们要更新某个子组件的时候,如下图的…

React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性.当向 props 传入无效数据时,JavaScript 控制台会抛出警告.注意为了性能考虑,只在开发环境验证 propTypes.下面用例子来说明不同验证器的区别: React.createClass({ propTypes: { // 可以声明 prop…

当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件    React实现了UI=Fn(State)的思想,组件内部有自己的状态和初始的属性,组件在某一个时刻都有一个确定的状态,状态是不断变化的,变化的状态驱动着UI渲染,一切就这么简单.React让UI组件化,一个最小的组件实现,需要一个render方法即可. import React, { Component } from 'react…