virtual DOM
真实页面对应一个DOM树。在传统页面的开发模式中，每一次需要更新页面的时候，都需要手动操作DOM来进行更新。
传统DOM更新
DOM的操作是十分昂贵的，我们在前端开发中，性能消耗最大的就是DOM操作，而且这部分的代码会让整体项目的代码变得难以维护。React把真实的DOM树转换为JavaScript对象树，也就是virtual DOM。
React DOM更新
每一次数据更新后，重新计算Virtual DOM，并和上一次生成的Virtual DOM进行比对，对发生变化的部分进行批量更新。Rect也提供直接的shouldComponentUpdate声明周期回调，来减少数据变化后的不必要的Virtual DOM对比的过程，用来保证性能。
JSX语法
JSX和React有什么关系？简单的来说，React为了方便view层组件化，承载了构建HTML结构化页面的职责，React通过创建于与跟新虚拟元素（virtual DOM）来管理整个Virtual DOM。
React创建虚拟元素可以划分为两类，DOM元素(DOM element)与组件元素(component element),分别对应原生的DOM元素和自定义元素，而JSX与创建元素有很大的关系。
JSX的官方定义是类XML语法的ECMAScript扩展。它完美的利用了JavaScript自带的语法和特性，并且使用大家熟悉的HTML语法来创建虚拟元素。可以说，JSX基本语法被XML囊括了，但是也有少许不同的地方。
XML基础语法
使用类XML语法的好处是标签可以任意嵌套，我们可以像HTML一样清晰看到DOM树结构和其属性，比如我们构建一个List组件。
const List = () =>{
<div>
<Title>This is Title</Title>
<ul>
<li>list item</li>
</ul>
</div>
}
写List的过程就像写HTML一样，只不过它被包裹在JavaScript的方法中，但是在这个过程中需要注意以下几点：
- 标签一定要闭合
- 定义标签的时候，只允许被一个标签包裹。所以上面的写法是错误的。
const List = () =>{
<div>
<Title>This is Title</Title>
<ul>
<li>list item</li>
</ul>
</div>
<div>
<Title>This is Title</Title>
<ul>
<li>list item</li>
</ul>
</div>
}
元素类型
我们都知道JSX语法中的元素分为DOM元素(DOM element)与组件元素(component element),JSX对应的规则是HTML标签是否为小写字母，其中小写字母对应DOM元素，而逐渐元素自然对应的是首字母大写。
注释
事实上JSX还是JavaScript，依然可以用简单的方法使用注释，唯一需要注意的是，在一个组件的子元素位置使用注释需要{}进行包裹，实例代码如下：
const App = (
<Nav>
{/*节点注释*/}
<Person
/*多行
注释*/
name = {window.isLoggedIn?window.name : ''}
/>
</Nav>
)
元素属性
在JSX中，不论是DOM元素还是组件元素，它们都是有属性的，不同的是，DOM元素的属性是标准规范属性，但是有两个例外--class和for，这是因为在JavaScript中这两个单词是关键词，因此我们这么转换。
-
class属性修改为className -
for属性改为htmlFor
而组件元素的属性是完全自定义的，也可以理解成组件需要的参数，举个栗子：
const Header = ({title,children})=>{
<h3 title = {title}>{children}</h3>
};
<Header title='hello world'>hello world</Header>
我们可以对属性进行展开展开，这个应用场景主要是，当我们知道组件的全部属性的时候，使用JSX可以这么写:
//方法一
const component = <Component name = {name} value = {value}/>;
//方法二
const component = <Component / >;
component.props.name = name;
component .props.value = value;
// 方法三：使用ES6特性来提高效率
const data = {name:'foo', value:'bar'};
const component = <Component name = {data.name} value = {data.value}/>;
//方法三可以使用ES6来进行简写
const data = {name:'foo', value:'bar'};
const component = < Component {...data} />;
javaScript属性表达式
属性值要使用表达式的话，只要使用{}进行替换即可。
//输入(JSX)
const person = <Person name ={window.isLoggedIn ? window.name:''} />
//输出(JavaScript)
const person = React.createElement (
person,
{name:window.isLoggedIn ? window.name:' '}
);
其中子组件也可以作为表达式使用：
//输入(JSX)
const content = <Container>{window.idLoggedIn ? <Nav /> :<login />}</Container>
//输出(JavaScript)
const content = React.createElement (
Container,
null,
{name:window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)}
);
小结：
-
JSX是一个看起来很像XML的JavaScript语法扩展，这种语法允许你在写JavaScript中写可嵌套的闭合标签。 -
JSX与HTML语法很像，可以嵌套，可以自定义属性。 -
JSX允许在闭合标签中使用JavaScript表达式，但是要被{}所包裹 -
JSX中的内联样式也是通过style属性来定义的，但属性值不能是字符串而必须为对象，而且要注意对象中的属性名需要使用驼峰命名法。 - 在
JSX中，标签子节点内的注释应该写在{}内。 -
JSX中的数组会自动的展开所有的成员，但是需要注意的是，如果数组或是迭代器中的每一项都是HTML标签或是组件的话，那么他们必须要拥有唯一的key属性
React组件
其实对组件的封装很类似与面向对象的思想，交互基本上以操作DOM为主，逻辑上是结构上哪里需要变，我们就操作哪里。此外，对于JavaScript的结构，我们得到了几项规范标准组件的信息。
- 基本的封装性：尽管说
JavaScript没有真正的面向对象的方法，但是我们还是可以通过实例化的方法来制造对象。 - 简单的生命周期：最明显的两个方法是：
constructor和destroy，代表了组件的挂载卸载的过程，但是除此之外，其他过程(如更新时的声明周期)并没有体现。 - 明确的数据流动：这里的数据指的是地道用组件的参数。一旦确定参数的值，就会解析传进来的参数，根据参数的不同做出不同的响应，从而得到渲染的结果。
Web Components规范：这个规范想要同意web端关于组件的定义，它可以通过定义Custom Elements(自定义元素)的方式来统一组件。每一个自定义元素可以定义自己对外提供的属性、方法、还有事件，内部可以像写一个页面一样，专注于实现功能来完成对组件的封装。
Web Components组成
Web Components定义了一切我们想要的组件化的概念，其中HTML Template定义了之前的模板概念，Customer Element定义了组件的展现形式，shadow DOM定义了组件的作用域范围，可以包括样式，HTML Imports提出了新的引入方式。
React组件的构建
React组件即为组件元素：组件元素描述成纯粹的Json对象，意味着可以使用方法或是类来构建。React组件即为组件元素，组件基本上由3个部分组成-- 属性（props）、状态（state）以及生命周期方法，这里我们从一张图来简单的概括React。
React组件的组成
React组件可以接受参数，也可以有自身的状态，一旦接受到的参数或是自身的状态有所改变，React组件就会执行相对应的生命周期的方法，最后渲染，整个过程完全符合传统组件所定义的组件职责。
React和web component的关系
React和web component传达的理念是一致的，但是二者的实现方式是不同的，
-
React自定义元素的库是自己构建的，与web component规范是不一致的 -
React渲染过程包含了模板的概念，也就是之前说的JSX -
React组件的实现均在方法和类中，因此做到了相互的隔离，但是不包含样式。 -
React引用方式遵循ES6标准
官方在React组件构建上提供了3种不同的方法：React.createClass,ES6 classes 和无状态函数。
React.createClass方法是构建组件最传统，也是兼容性最好的方法，实例代码如下：
const Button = React.createClass({
getDefaultProps(){
return {
color:'red',
text:'cancle',
};
},
render(){
const {color, text} = this.props;
return (
<button className ={`btn btn - ${color}`}>
<em>{text}</em>
</button>
);
}
});
当组件需要调用Button组件的时候，只需要写<Button />,就可以被解析成React.createElement(Button)方法来创建Button实例，这意味着在一个应用中调用几次Button，就会创建几次Button的实例。
ES6 classes
ES6 classes的写法是通过ES6标准的类语法的方式来构建方法：
import React, {Component } from 'react';
class Button extends Component{
constructor (props){
super(props);
}
static defaultProps ={ // 用来设置默认属性
color:'blue',
text:'Confirm',
};
render(){
const {color,text} = this.props;
return (
<button className = {`btn btn-${color}`}>
<em>{text}</em>
</button>
);
}
}
这里的直观感受是从调用内部方法变成了类来实现，与createClass的结果相同的是，调用类实现的组件会创建实例对象。在React组件开发中，常用的方式是将组件拆分到合理的粒度，用组合的方式合成业务组件。
无状态函数
使用无状态函数构建的组件称为无状态组件，这样的写法比较受官方推崇。我们看一下示例代码：
function Button({color = 'blue',text = 'confirm'}){
return (
<button className = {`btn btn-${color}`}>
<em>{text}</em>
</button>
);
}
无状态组件只传入props和context两个参数；也就是说，它不存在state，也没有生命周期方法，组件本身即上面两种React组件构建方法中的render方法。不过，像propTypes和defaultProps还是可以通过向方法设置静态属性来实现。
我们使用React实现Tabs组件：
import React，{Component，PropType} from 'react';
class Tabs extends Component {
constructor(props){
super(props);
}
//...
render(){
return <div className = 'ui-tabs'></div>
}
};
export defaults Tabs;
网友评论