![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
浴盆
这个作者很懒,什么都没留下…
展开
-
React组件化
传统的组件传统组件是结构,样式和交互分离的,分别对应html,css和js,以一个常见的tab组件为例,我们会先构建组件的基本结构 div> ul> li>Tab1li> li>Tab2li> li>Tab3li> ul> div> div class="content">翻译 2017-02-18 14:58:53 · 3581 阅读 · 0 评论 -
React生命周期
React组件的生命周期(life cycle)根据广义定义描述,可以分为挂载,渲染和卸载这几个阶段,当渲染后的组件需要更新时,我们会重新渲染组件,这个阶段可能重复多次,直至卸载。 因此我们将React生命周期分为两类 - 当组件在挂载或卸载时 - 当组件接收新的数据时,即组件更新时挂载或卸载过程组件的挂载是最基本过程,这个过程主要做组件状态的初始化,我们推荐以下面的例子为模板写初始化组件翻译 2017-02-19 14:41:04 · 295 阅读 · 0 评论 -
React事件
事件系统Virtual DOM在内存中是以对象的形式存在的,如果想要在这些对象上添加事件,就会非常简单。React基于Virtual DOM实现了一个合成事件层,它完全符合W3C标准,不会存在任何IE兼容问题,并且与原生的浏览器事件拥有同样的接口,同样支持事件的冒泡机制,我们可以使用stopPropagation()和preventDefault()来中断它合成事件的绑定方式React事件的绑定方式翻译 2017-02-19 16:11:28 · 775 阅读 · 0 评论 -
React 避免重渲染
组件的重新渲染我们可以在 React 组件中的 props 和 state 存放任何类型的数据,通过改变 props 和 state,去控制整个组件的状态。当 props 和 state 发生变化时,React 会重新渲染整个组件,组件重新渲染的过程可简化如下图:译者之前对diff的理解是,对于一个改变 props 的组件,diff能自动计算出组件内部DOM树的不同,然后经过对比,找出真正变化的DO翻译 2017-03-14 14:45:33 · 20103 阅读 · 0 评论 -
Immutable.js
Immutable.js 所创建的数据有一个特性:数据创建后不会被改变。我们使用 Immutable.js 的示例来解释这一特性: var Immutable = require('immutable'); var map1 = Immutable.Map({a:1, b:2, c:3}); var map2 = map1.set('b', 50); map1.get('b');翻译 2017-04-18 22:19:03 · 618 阅读 · 0 评论 -
React可视化
我们在web端所理解的可视化大都是线,柱,饼等图表,以及这些基础图表的衍生和组合。在技术层面,常见的技术有SVG,canvas和webgl。canvascanvas基于像素,提供2D和3D绘制函数,通过脚本来绘制图形。canvas在web端常见的使用场景如下:绘制各种图形元素,如多边形和Bezier曲线图片图像处理创建复杂的动画视频处理与渲染在IE浏览器上,从IE9开始兼容canvas翻译 2017-04-23 10:37:12 · 2994 阅读 · 0 评论 -
抛开 React 学习 React(1)
首先阅读下 jQuery 实现的 TodoMVC 源码。 也许你会注意到有一个叫 render 的方法,他会在某个事件触发或者数据更新的时候被调用。现在,我们从头来实现一个例子:当 input 的值改变时,调用 render 函数,并且更新 DOM 元素。 var state = {value: null} $('#input').on('keyup', function () {翻译 2017-04-25 21:31:04 · 363 阅读 · 0 评论 -
抛开 React 学习 React(2)
diff作为Virtual DOM的加速器,其算法上的改进优化是React整个界面渲染的基础和性能保障。高效的diff算法,可以让用户无需顾忌性能问题刷新页面,让开发也可以无需关心Virtual DOM背后的运作原理。传统diff算法计算一颗树形结构转换成另一颗树形结构的最少操作,是一个复杂且值得研究的问题。传统diff算法通过循环递归对节点进行依次对比,效率低下,算法复杂度达到O(n³)翻译 2017-04-26 21:00:00 · 268 阅读 · 0 评论 -
setState详解
我们都知道,React通过this.state来访问state,通过this.setState()方法来更新state。当this.setState()方法被调用的时候,React会重新调用render方法来重新渲染UIsetState异步更新React初学者常会写出this.state.value = 1这样的代码,这是完全错误的写法。注意:一定不要直接修改this.state setState翻译 2017-03-18 09:43:47 · 41336 阅读 · 6 评论