分类:

React获取父组件或子组件属性

React获取父组件或子组件属性
获取子组件的方法可以通过递归this.props.children中得到获取父组件的方法方法一:可以通过react内部私有函数this.reactInternalInstance.currentElement.owner.instance获取...

1年前 (2017-07-26) 789℃ 暂无评论 24

react之CSS动画效果

react之CSS动画效果
TransitionGroup和CSSTransitionGroup已移动到react-transition-group有社区维护。它的1.x分支与现有插件的API是完全兼容的。TransitionGroup是一个具有低级API的动画组件,...

1年前 (2017-07-31) 578℃ 暂无评论 21

怎样自己动手写一个react组件库

怎样自己动手写一个react组件库
引言该系列文章将通过创建一个组件库来引导你学习如何构建自己的组件库。这是该系列的第一部分。该部分将主要关注配置我们的模块和文件结构,但我们最后将会创建一个示例组件...

1年前 (2017-07-14) 1107℃ 暂无评论 27

入门React-router4

入门React-router4
重要API一览路由容器组件BrowserRouter: 浏览器自带的API,restful风格(需要后台做相应的调整);HashRouter: 使用hash方式进行路由;MemoryRouter: 在内存中管理history,地址栏不会...

1年前 (2017-07-06) 1267℃ 暂无评论 29

使用React.js开发chrome插件

使用React.js开发chrome插件
一、背景相信看到这篇文章的人应该都用过Chrome插件吧,最近刚好有个这方面的需求,我就把Chrome插件的相关知识学习了一下,发现其实Chrome插件的开发和大前端Web开发的底子是一...

1年前 (2017-06-24) 369℃ 暂无评论 27

Redux 优化的一些思考

Redux 优化的一些思考
Redux 的书写分离从 Redux 官方示例开始,我们就采用了 actions 和 reducers 分开文件夹来维护的思路。但是在实际业务中,大部分场景下一个 action 触发的 reducer 是在一个子...

1年前 (2017-06-17) 300℃ 暂无评论 28

React应用在产品环境下的性能优化

React应用在产品环境下的性能优化
只有10%~20%的最终用户响应时间花在了下载HTML文档上,其余的80%~90%时间花在了下载页面中的 所有组件 上。 - 性能黄金法则,Steve SoudersSteve Souders在2007年提出这样的“...

1年前 (2017-06-05) 694℃ 暂无评论 26

React单文件的编写方式

React单文件的编写方式
single-react-loader通过该插件,你可以使用单文件形式编写react组件(将jsx与style组合在一起)特性将jsx和css组合在一个文件内支持less,sass支持style样式的私有化例子//about.r...

2年前 (2017-04-27) 256℃ 暂无评论 26

React多语言解决方案

React多语言解决方案
由于框架使用的是 React , 多语言方案也选择了生态系统下的 react-intl 模块,它是雅虎 FormatJS 计划的一部分。翻译字符串替换使用 react-intl 替换字符串用以翻译很方便。只...

2年前 (2017-04-21) 670℃ 暂无评论 35

react+redux渲染性能优化原理

react+redux渲染性能优化原理
大家都知道,react的一个痛点就是非父子关系的组件之间的通信,其官方文档对此也并不避讳:For communication between two components that don’t have a parent-child relation...

2年前 (2017-03-05) 274℃ 暂无评论 33

使用mobx开发高性能react应用

使用mobx开发高性能react应用
1.mobx的基本用法作为一个数据层框架,mobx基于一个最简单的原则:当应用状态更新时,所有依赖于这些应用状态的监听者(包括UI、服务端数据同步函数等),都应该自动得到细粒度地更新。...

2年前 (2017-02-20) 2308℃ 暂无评论 37

初识React-React新特性

初识React-React新特性
ReactReact中有两大核心组件:react:核心库 (React)react-dom:提供与DOM相关的功能 (ReactDOM)npm install react react-dom –save-dev1、JSX和DOM操作//->在入口中导入CSS,使...

2年前 (2017-02-19) 507℃ 暂无评论 21

React开发中的HOC与Provider模式

React开发中的HOC与Provider模式
Provider模式许多的React库都需要在所有的组件树中传递数据。比如说,Redux需要传递他的store,而React Router需要传递当前的地址。一个看似可行的方案时使用共享的可变状态,但...

2年前 (2017-02-16) 303℃ 暂无评论 27

Reflux应用架构学习分析

Reflux应用架构学习分析
在上篇中写了对flux的分析,这次来说说reflux吧。reflux是对flux的升级扩展,并且去掉了dispatcher这一层,比起使用起flux来,思路更加清晰,是一个标准的pub/sub模式的架构,同时能少...

2年前 (2017-02-05) 362℃ 暂无评论 21

SVG + react respinner 的诞生

SVG + react respinner 的诞生
计划开始之前很早之前看到过许多诸如 spinkit、 loader.css、 spin.js 一大堆实现 loading 效果的库,思路基本上是用各种 div 定位到一个icon 大小的 grid 内,再对他们进行不...

2年前 (2017-02-01) 305℃ 暂无评论 21

React之JSX语法(二)

React之JSX语法(二)
循环遍历通过循环遍历出生成的组件集合,在循环时一定要加上key值render(){ return ( <p> {arr.map(function(it,i) { return <span key={i}> {it} </s...

2年前 (2017-01-24) 206℃ 暂无评论 19

React的ES5与ES6写法对比

React的ES5与ES6写法对比
ES6有许多新的特性,语法也在ES5上有较大的变化,在React中应用广泛,下面列举部分示例,体会一下ES6的语法给我们带来的便利…导入模块ES5var React = require(&#39;react&#39;);va...

2年前 (2017-01-23) 248℃ 暂无评论 31

React/JSX 的编码规范(一)

React/JSX 的编码规范(一)
基本规范始终使用 JSX 语法,不要使用 React.createElement 创建 ReactElement,以提高可读性、可维护性、编写速度(没有 JSX 转换的特殊场景例外,如在 console 中测试组件)。每个...

2年前 (2017-01-16) 214℃ 暂无评论 27

React系列之 Flux架构模式

React系列之 Flux架构模式
由于 React 只涉及 UI 层的处理,所以构建大型应用应该搭配一个框架模式才能使后期维护成本相对较小~Flux 正是 FB 官方给出的应用架构,他推崇一种单向的数据流动模式,看下图感...

2年前 (2017-01-03) 202℃ 暂无评论 25

React系列之 Redux 架构模式

React系列之 Redux 架构模式
Flux 架构相对来说还是比较繁琐,同时社区也涌现了很多第三方的框架模式,而 Redux 则脱颖而出React 以组件的形式维护了一颗 UI 树,但是对状态数据没有做更多的处理,Redux 则把状...

2年前 (2017-01-03) 204℃ 暂无评论 16