React基础（Diff算法，属性和状态）

时间 2019-12-06

标签 react 基础 diff 算法属性状态栏目 React 繁體版

原文原文链接

1.React的背景原理javascript

　　（1）React Diff算法流程css

　　（2）React虚拟DOM机制html

　　React引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。java

　　基于React进行开发时全部的DOM构造都是经过虚拟DOM进行，每当数据变化时，React都会从新构建整个DOM树，而后React将当前整个DOM树和上一次的DOM树进行对比，获得DOM结构的区别，而后仅仅将须要变化的部分进行实际的浏览器DOM更新。react

　　并且React可以批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，而后又从B变成A，React会认为UI不发生任何变化，而若是经过手动控制，这种逻辑一般是极其复杂的。jquery

　　尽管每一次都须要构造完整的虚拟DOM树，可是由于虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操做的仅仅是Diff部分，于是能达到提升性能的目的。这样，在保证性能的同时，开发者将再也不须要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只须要关心在任意一个数据状态下，整个界面是如何Render的。web

总之一句话：根据 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