React基础（Diff算法，属性和状态）
1.React的背景原理
（1）React Diff算法流程
（2）React虚拟DOM机制
React引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。
基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。
而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。
尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。
总之一句话：根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上
2.属性和状态
React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI
React里面的React.render方法：
React.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
下面的例子就是把<h1>标题插入到container节点中
这里需要注意的是，react并不依赖jQuery，当然我们可以使用jQuery，但是render里面第二个参数必须使用JavaScript原生的getElementByID方法，不能使用jQuery来选取DOM节点。
（1）状态:
（2）状态的用法：
》getInitialState（函数）:初始化每个实例特有的状态。它只是在实例创建的时候被调用，创建完毕之后不会再被调用。
》setState（函数）:更新组件的状态。
$(document).ready(function(){
var InputState=React.createClass({
getInitialState:function(){
return {enable:false};
},
handleClick:function(){
this.setState({enable:!this.state.enable});
},
render:function(){
return (
<p>
<input type="text" disabled={this.state.enable}/>
<button onClick={this.handleClick}>Change State</button>
</p>
);
}
});
ReactDOM.render(<InputState/>,document.getElementById('container'));
});
这里，我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行，必须返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值，这里我们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使用setState方法。我们声明handleClick方法，来绑定到button上面，实现改变state.enable的值。
原理分析：
上面代码是一个InputState 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
这里值得注意的几点如下：
1）getInitialState函数必须有返回值，可以是NULL或者一个对象。
2）访问state的方法是this.state.属性名。
3）变量用{}包裹，不需要再加双引号。如：{this.props.name}
（3）属性：
组件的属性可以接受任意值，字符串、对象、函数等等都可以
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>属性</title>
<script src="./build/react.js"></script>
<script src="./build/react-dom.js"></script>
<script src="./build/browser.min.js"></script>
<script src="./build/jquery.min.js"></script> </head>
<body>
<div id="container"></div>
</body>
<script type="text/babel" >
$(document).ready(function(){
var Greet=React. createClass({
render:function(){
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(<Greet name="Jack"/>,
document.getElementById('container')
);
});
注意：
首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
关于属性几个注意的地方：
1）获取属性的值用的是this.props.属性名
2）创建的组件名称首字母必须大写。如：var Greet=React. createClass({});
3）为元素添加css的class时，要用className。
4）组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}。第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。
3.属性和状态的区别
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。
一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
参考文档：
http://www.cocoachina.com/webapp/20150721/12692.html
http://www.ruanyifeng.com/blog/2015/03/react.html
React基础（Diff算法，属性和状态）的更多相关文章
- React中diff算法的理解
React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...
- react的diff算法与antd中switch组件不更新问题
问题描述: 现在有个需求,现有一个列表table,里面的数据有启用的也有关闭的,switch组件会根据数据状态展示,同时进行排序,启用数据在前面,未启用的在后面.如图 然后现在需要操作,假如我将第四条 ...
- 深入理解React：diff 算法
目录 序言 React 的核心思想 传统 diff 算法 React diff 两个假设 三个策略 diff 具体优化 tree diff component diff element diff 小结 ...
- React的diff算法（译文）
前言 此篇文章主要是因为在看Virtual DOM(虚拟DOM)的时候看到的主要讲的是实现Virtual Dom 的diff算法,原文地址:https://calendar.perfplanet.c ...
- React的Diff算法
使用React或者RN开发APP如果不知道Diff算法的话简直是说不过去啊.毕竟"知其然,知其所以然"这句老话从远古喊到现代了. 以下内容基本是官网文章的一个总结.压缩.这次要谦虚 ...
- 个人对于React的Diff算法的一点疑问(待更新)
本人对于Diff算法也并未做深入研究,只是大概的看过一些博文了解了些原理,但依然有了如下疑问 : 对于vdom所表示的对象中,若在该oldObj和newObj之间,发现一个元素节点所表示的子对象不见了 ...
- react性能调谐与diff算法
一个页面其实就相当于是一颗dom树,里面有很多它的子节点,然后你每次去操作一个事件,它都会生成一个虚拟dom,它会跟上一个虚拟dom进行比对,这里运用的算法叫做diff算法,当它找到需要改变的组件的时 ...
- React——diff算法
react的diff算法基于两个假设: 1.不同类型的元素会产生不同的树 2.通过设置key,开发者能够提示那些子组件是稳定的 diff算法 当比较两个树时,react首先会比较两个根节点,接下来具体 ...
- react中虚拟dom的diff算法
.state 数据 .jsx模板 .生成虚拟dom(虚拟DOM就是一个js对象,用它来描述真实DOM) ['div', {id:'abc'}, ['span', {}, 'hello world']] ...
- 虚拟dom？diff算法？key？Vue原理的核心三问？打包教你搞定。
为什么需要虚拟DOM 先介绍浏览器加载一个HTML文件需要做哪些事,帮助我们理解为什么我们需要虚拟DOM.webkit引擎的处理流程,如下图所示: 所有浏览器的引擎工作流程都差不多,如上图大致分5步: ...
随机推荐
- datagrid数据表格使用总结
一.加载的css文件 easyui 基本样式: <link href="../easyui/easyui1.5.css" rel="stylesheet" ...
- HDU 3351 Seinfeld 宋飞正传（水）
题意: 给出一个串,串内只有大括号,问经过几次改变可使全部括号合法?改变指的是可以将某一方向的括号变成另一方向. 思路: 利用栈的特点,若出现成对的合法括号,直接删掉,留下那些不合法的成为一串.既然不 ...
- WPS去掉英语单词下面的红斜线
我们在使用WPS的时候,经常会用到英语但是,但是在编码的时候,有些单词是缩写形成的,WPS就会自动验证,产生红色波浪线,提示我们单词写错的问题,那看起来就显得很不美观别扭 那么我们不想要这个红斜杠,怎 ...
- 查看SAP CRM和C4C的UI technical信息
CRM 比如我们想看Quantity这个字段到底是绑在哪个模型上,选中该字段按F2: 就能知道是绑在Context node BTADMINI的QUANTITY字段上. C4C 同理,使用debugM ...
- [转载]AngularJS入门教程02：AngularJS模板
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...
- OpenLayers学习笔记2——坐标转换问题
参照别人的添加marker的demo来改造时,发现无论怎样更改经纬度,都是停留在同一个位置.过了一两天突然想起可能是坐标参考的问题,尝试搜了一下,果然是这个问题.问题是这样子的: WMTS中地图的坐标 ...
- 爬虫爬取代理IP池及代理IP的验证
最近项目内容需要引入代理IP去爬取内容. 为了项目持续运行,需要不断构造.维护.验证代理IP. 为了绕过服务端对IP 和 频率的限制,为了阻止服务端获取真正的主机IP. 一.服务器如何获取客户端IP ...
- hdu-1556 Color the ball---树状数组+区间修改单点查询
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1556 题目大意: Problem Description N个气球排成一排,从左到右依次编号为1,2 ...
- 全面了解linux情况常用命令
查看linux服务器CPU详细情况1. 显示CPU个数命令 # cat /proc/cpuinfo | grep "physical id" | sort | uniq | wc ...
- iOS 制作表格 （数据源控制行，列数）
记得去年面试的过程中,有一个面试官问我怎么制作表格.由于之前也没有做过,当时有点懵逼,今天想起来了,就用tableview制作了一个,望不要有人像我一样掉坑了, 直接上代码: // // ViewCo ...