摘要：初识依稀记得那年参加线下活动，第一次听说这个词语，当时的主讲人是郭达峰，他播放了一个关于及的性能对比视频。合成事件会以事件委托的方式绑定到组件最上层，并且在组件卸载的时候自动销毁绑定的事件。
初识React
依稀记得2015那年参加线下活动，第一次听说React这个词语，当时的主讲人是郭达峰，他播放了一个关于ember、angular及react的性能对比视频： React.js Conf 2015。那时我主要从事angularjs开发，深知angular在页面复杂时性能问题的疼，看到这个视频的性能对比后瞬间被React折服。现在我们一起再回顾下React~
视图库React不同于AngularJS、Backbone等MVC框架，它是Facebook推出的一个用来构建用户界面的Javascript库，只专注于view层（即MVC中的V），是一个用于构建前端可复用UI组件的库，同时，当数据发生变化时，React会及时有效地更新和渲染相应的组件。对于越来越复杂的前端界面，尤其是对于数据不断变化的web应用，React实现了将变化的数据高效无误的反映在页面上。
视图状态机在传统Web应用中，当数据改变时需要同步DOM节点的改变，React
把界面看做一个状态机：
UI = f(states)
当界面状态发生变化时，React会根据给定的状态及时有效地更新和渲染相应的组件，相同的状态其渲染表现一致。
JSX在传统的Web应用中采用模板或HTML指令构建用户界面，但React采用了JSX（一种扩展了ECMAScript的类似XML语法）声明式的写法，它优势超过模板：
JavaScript是一种灵活的、扩展性高的编程语言
统一页面标记语言和视图逻辑，使视图更易于扩展和维护
没有字符串的拼接，将视图内容融入JavaScript中，减少XSS漏洞的存在
高效更新当应用状态发生改变时，React能高效地更新和渲染组件及界面：
虚拟DOM：通过Javascript在内存中用轻量级的描述对象表示真实DOM节点的结构和样式
差量算法：高效快速地生成一个最小集的Diff树
批量更新：将状态的多次更新有效地合并为一次更新操作
React利用虚拟DOM来描述一个真实DOM，当应用状态发生改变时，通过高效的差量算法生产一个最小集的Diff树，同时合并多次更新操作为一次，减少了对实际DOM的直接操作，从而大大的提升了性能。
事件代理React采用了事件代理机制，它能够保持事件冒泡的一致性，跨浏览器的执行，甚至可以在IE8中使用HTML5的事件。React实现了一个“合成事件”层，这个事件层消除了IE与W3C标准实现之间的兼容问题，通过JSX这种方式绑定的事件都是绑定到“合成事件”。“合成事件”会以事件委托的方式绑定到组件最上层，并且在组件卸载的时候自动销毁绑定的事件。
Flux单向流Flux是Facebook推出的一种应用架构，他推崇一种单向的数据流动：
| Name | Description |
|---|---|
| Views | 视图层，React组件 |
| Actions | 行为动作层，视图层触发的动作，例如click event |
| Dispatcher | 分发中心，注册/接受动作，调用数据流向中的回调函数 |
| Stores | 数据层，管理应用状态，广播通知Views状态发生改变 |
我们一起看下MV*和Flux应用架构下的数据流向关系图：
MV*
Flux
从上面图中我们可以看到，Flux单向数据流使应用状态变得可预测和可追踪，能够很方便地达到以下目标：
易测试性、可重现性
基于时间旅行的诊断调试
撤销与重放功能
isomorphic/universalReact能在服务端中运行，以达到SEO优化、体验优化和性能优化等目的；同时我们只需学习React一次，就能够在任何地方编写，你可以使用它编写Web、手机、VR等应用。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/88033.html
摘要：系列一初识系列二组件的和系列三组件的生命周期是推出的一个库，它的口号就是用来创建用户界面的库，所以它只是和用户界面打交道，可以把它看成中的视图层。系列一初识系列二组件的和系列三组件的生命周期 React系列---React（一）初识ReactReact系列---React（二）组件的prop和stateReact系列---React（三）组件的生命周期 showImg(https://...
摘要：属性其实就是为了获取节点，例如属性利用属性返回的回调函数获取节点，从而让页面渲染完成之后，聚焦，除了可以绑定回调函数之外还能绑定字符串，但是在后期对字符串形式不再维护，这里就不具体说明了，就用回调函数获取。 ref属性其实就是为了获取DOM节点，例如： import React from react class RefComponent extends React.Component...
摘要：父级向子级传参父子组件通信主要用到，如下在父组件中父组件我是父级过来的内容在子组件中子组件通过上面例子可以看出，在父组件中，我们引入子组件，通过给子组件添加属性，来起到传参的作用，子组件可以通过获取父组件传过来的参数子级向父级传参在父组件中 父级向子级传参 父子组件通信主要用到props，如下： 在父组件中： import React from react import ChildCo...
摘要：是中用来对参数进行类型检测的，当然要使用这个插件，得先安装这个插件，如下但是如果你是直接用创建的项目，无需安装，直接引入即可，如下上面那个例子中可以看出，要引入组件，必须得传入参数类型为字符串的参数，否则会报错常用的数据类型检测如下 propTypes是react中用来对参数进行类型检测的，当然要使用这个插件，得先安装这个插件，如下： npm install prop-types --...
摘要：也明确了大数据时代，前端所应该具备的职业素养高阶组件高阶组件，高阶组件就是一个组件包裹着另外一个组件中两种的实现方法中两种的实现方法返回的类继承了。之所以被称为是因为被继承了，而不是继承了。在这种方式中，它们的关系看上去被反转了。 前言 最近一直再做数据可视化，业务的理解，数据的理解确实如数据可视化要求的一样，有了更多的理解。但是技术上还停留在echart，Hchart, 画图上。正好...
阅读 1745·2023-04-25 15:51
阅读 2481·2021-10-13 09:40
阅读 2118·2021-09-23 11:22
阅读 3231·2019-08-30 14:16
阅读 2639·2019-08-26 13:35
阅读 1831·2019-08-26 13:31
阅读 862·2019-08-26 11:39
阅读 2717·2019-08-26 10:33
