react
文章平均质量分 68
Gavin13140
这个作者很懒,什么都没留下…
展开
-
ReactJS组件生命周期(ES5为例)
在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化。一个组件就是一个状态机。一个React组件的生命周期分为三个部分:实例化、存在期和销毁时。实例化当组件在客户端被实例化,第一次被创建时,以下方法依次被调用: 1、getDefaultProps 2、getInitialState 3、componentWillMount 4、render 5原创 2016-08-23 23:10:30 · 1089 阅读 · 0 评论 -
AngularJs与ReactJS优缺点&适用场景
Angular的优缺点:优点AngularJS是一套完整的框架,angular有自带的数据绑定、render渲染、angularUI库,过滤器,directive(模板),服务q(defer),http,inject(依赖注入),factory,provider……,等等一系列工具,基本上只要你在做web开发用过的东西,它都有一个。但是这些东西react自身都没有。原创 2016-10-06 16:04:46 · 16783 阅读 · 0 评论 -
React吸引我们的几点
React吸引我们的几点React速度很快与其它框架相比,React采取了一种特立独行的操作DOM的方式。它并不直接对DOM进行操作。它引入了一个叫做虚拟DOM的概念,安插在JavaScript逻辑和实际的DOM之间。这一概念提高了Web性能。在UI渲染过程中,React通过在虚拟DOM中的微操作来实对现实际DOM的局部更新。跨浏览器兼容虚拟DOM帮助原创 2016-10-06 22:11:27 · 547 阅读 · 0 评论 -
react webpack 按需加载初试
react webpack 按需加载初试1:为什么要按需加载【直接打包】React实现单页面运用时,当项目较小或者页面较少的情况下可以无需打包成多个文件,因为即使前端代码有10M,在通过webpack压缩打包,再通过GZIP压缩后一般也就400k,在一面正常的pc系统中400k的大小是可接受的。【按需加载】但当你的应用稍微复杂一点点,包括依赖后,打包后的文件都是挺大的。而我们加载的时候,不管那些原创 2016-12-02 18:55:27 · 6578 阅读 · 0 评论 -
immutable.js
ReactJs 性能React.js是一个UI = f(states)的框架,为了解决更新的问题,React.js使用了virtual dom,virtual dom通过diff修改dom,来实现高效的dom更新。对于react的来说,如果父组建有多个子组建。当父组建render。下面的子组建都得跟着render。可是很多子组建里面是冤枉的啊!!很多子组建的props 和 state 然而并没有改变原创 2016-08-07 20:03:14 · 1370 阅读 · 6 评论 -
ReactJS性能优化(上)
shouldComponentUpdate?详情先参考InfoQ上什么时候要在React组件中写shouldComponentUpdate? React已经替我们实现了一个shouldComponentUpdate,原理其实非常简单,组件在决定重新渲染(虚拟dom比对完毕生成最终的dom后)之前会调用该函数,该函数将是否重新渲染的权限交给了开发者,该函数默认直接返回true,表示默认直原创 2016-12-07 23:10:11 · 1539 阅读 · 0 评论 -
ReactJs性能优化(中)
提到ReactJS性能优化,不得不提immutablejs性能优化神器~ Facebook 工程师打造,与 React 同期出现,但没有被默认放到 React 工具集里(React 提供了简化的 Helper)。它内部实现了一套完整的 Persistent Data Structure,还有很多易用的数据类型。像 Collection、List、Map、Set、Record、Seq。有非常全面原创 2016-12-07 23:12:44 · 1074 阅读 · 0 评论 -
mobx 在ReactJS项目中的运用
mobx 能干什么使用 react 写小型应用,数据、业务逻辑和视图的模块划分不是很细是没有问题的。在这个阶段,引入任何状态管理库,都算是奢侈的。但是随着页面逻辑的复杂度提升,在中大型应用中,数据、业务逻辑和视图,如果不能很好的划分,就很有可能出现维护难、性能低下的问题。业内比较成熟的解决方案有 redux,但是 redux 使用过程中,感觉较复杂和繁琐。那么为什么不简单一点呢?mobx 的核心理念原创 2017-04-06 18:17:54 · 11567 阅读 · 0 评论 -
ReactJS Render Props封装技巧
Render Props一种在 React 组件之间使用一个值为函数的prop, 在React 组件间共享代码的简单技术class MouseTracker extends React.Component { constructor(props) { super(props); this.handleMouseMove = this.handleMouseMove.bi...原创 2018-11-21 15:43:12 · 822 阅读 · 0 评论