分类:

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

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

2年前 (2017-07-26) 1266℃ 暂无评论 29

react之CSS动画效果

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

2年前 (2017-07-31) 659℃ 暂无评论 28

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

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

2年前 (2017-07-14) 1322℃ 暂无评论 28

入门React-router4

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

2年前 (2017-07-06) 1405℃ 暂无评论 33

Redux 优化的一些思考

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

2年前 (2017-06-17) 331℃ 暂无评论 30

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

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

2年前 (2017-06-05) 792℃ 暂无评论 36

WIN10配置React Native开发环境

WIN10配置React Native开发环境
1.安装工具chocolatey右键管理员运行 powershell.exe=>Set-ExecutionPolicy unrestricted // 修改执行策略=>iwr https://chocolatey.org/install.ps1 -UseBasicParsing | i...

2年前 (2017-05-16) 529℃ 暂无评论 34

React多语言解决方案

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

2年前 (2017-04-21) 771℃ 暂无评论 42

webpack打包React应用

webpack打包React应用
使用loaders每引入一种loader,就相当于告诉了webpack:当遇到某种类型的文件时,就使用该loader来解析。less项目中使用了less,解析less文件需要使用3个loader:style-loader,css-lo...

2年前 (2017-03-21) 532℃ 暂无评论 32

react+redux渲染性能优化原理

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

2年前 (2017-03-05) 300℃ 暂无评论 40

使用mobx开发高性能react应用

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

2年前 (2017-02-20) 2508℃ 暂无评论 39

初识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) 570℃ 暂无评论 26

React开发中的HOC与Provider模式

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

2年前 (2017-02-16) 317℃ 暂无评论 29

React组件单元测试

React组件单元测试
React组件单元测试React官网推荐使用jest + React.addons.TestUtils进行单元测试。jest是单元测试的框架,React.addons.TestUtils是针对React相关的方法,二者结合在一起可以方...

2年前 (2017-02-11) 344℃ 暂无评论 30

基于 koa + gulp 的前端工程构建工具

基于 koa + gulp 的前端工程构建工具
前言因公司前端项目在很长的一段时间内都没有一个比较合适的项目打包优化工具,以致页面打开速度慢,很多页面的代码很容易被其它公司抄袭,设计稿还原度不高,来回修改,影响工作效率...

2年前 (2017-02-06) 241℃ 暂无评论 30

Reflux应用架构学习分析

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

2年前 (2017-02-05) 413℃ 暂无评论 25

SVG + react respinner 的诞生

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

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

React之JSX语法(二)

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

2年前 (2017-01-24) 234℃ 暂无评论 23

React之JSX语法(一)

React之JSX语法(一)
JSX 语法的本质目的是为了使用基于 xml 的方式表达组件的嵌套,保持和 HTML 一致的结构,语法上除了在描述组件上比较特别以外,其它和普通的 Javascript 没有区别。 并且最终所有...

2年前 (2017-01-24) 229℃ 暂无评论 22

React的ES5与ES6写法对比

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

2年前 (2017-01-23) 274℃ 暂无评论 34