分类:

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

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

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

react为什么需要手动绑定方法?

react为什么需要手动绑定方法?
我们从javascript开始吧在js中,函数的上下文是指函数调用的时候,而不是定义的时候。有以下四中调用函数的模式:函数调用模式方法调用模式构造函数调用模式应用调用模式所有这些...

1年前 (2017-08-05) 550℃ 暂无评论 39

react之CSS动画效果

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

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

入门React-router4

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

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

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视频教程(三)-使用ES6开发React应用

React视频教程(三)-使用ES6开发React应用
本课程属于前端架构师级别的高级课程,由浅入深地详细讲解每块知识点。课程内容将包含五大主题内容:掌握现代化高级前端的基础核心技能github npm、shell、手把手教你使用webpack搭建完整工作流、使用ES6开发自己的前端类库、使用React+ReactRouter+Redux开发你的第一个真实的React应用和基于React+Node.js的前后端同构应用开发....

2年前 (2017-05-02) 606℃ 暂无评论 37

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

webpack打包React应用

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

2年前 (2017-03-21) 480℃ 暂无评论 29

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

React组件单元测试

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

2年前 (2017-02-11) 320℃ 暂无评论 29

使用VS Code开发React Native

使用VS Code开发React Native
前言使用VSCode开发React-Native是个不错的选择,因为这个编辑器十分简洁、流畅,并且微软官方提供了React Native Tools插件,支持代码高亮、debug以及代码提示等十分强大的功能,...

2年前 (2017-02-08) 403℃ 暂无评论 21

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

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

2年前 (2017-02-06) 211℃ 暂无评论 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