一.React什么算法，什么虚拟DOM，什么核心内容网上一大堆，请自行google。
但是能把算法说清楚，虚拟DOM说清楚的聊聊无几。对开发又没卵用，还不如来点干货看看咋用。
二.结构如下：
import reqwest from 'reqwest';
import React from 'react';
import ReactDOM from 'react-dom'; var Header = React.createClass({
handleClick:function(){
console.log(this.refs.head);
console.log(ReactDOM.findDOMNode(this.refs.head));
},
render:function(){
return (
<div style={{ backgroundColor:'blue' }} onClick={ this.handleClick } ref='head'>
<p>Header组件</p>
</div>
)
}
}) var ComponentDemo = React.createClass({
//默认state
getInitialState() {
return {
current: 1,
openKeys: [],
result_data : {}
};
},
//默认props
getDefaultProps() {
return {
key:{
value:2
}
};
},
//静态方法 调用 ComponentDemo. getBusinessName()
statics:{
getBusinessName:function(){
return console.log('getBusinessName方法被调用。。。')
}
},
handleClick(e) {
console.log('div被点击。。。');
console.log(this.refs.cct);
console.log(ReactDOM.findDOMNode(this.refs.cct))
},
componentDidMount: function() { //异步请求
reqwest({
url: 'http://localhost:90/menu',
method: 'get',
type: 'json'
}).then(result => {
if(this.isMounted()){
this.setState({
result_data : result.data
});
} },function(err, msg){
console.log(err)
console.log(msg)
}); //使用props
console.log(this.props.key.value) },
componentWillReceiveProps(nextProps) {
//接受新的props时候被触发
},
render() { return (
<div>
<Header ref='cct'/>
<div style={{ height:'100%',width:200 }} className='btn' onClick={ this.handleClick }>CCT部分</div>
</div>
);
}
}) ReactDOM.render(<ComponentDemo />,
document.getElementById('contain'));
这个例子中涉及了开发中常用的几个知识点。
1.improt 这样的引入方式是es6的语法 ，也可require
2.Header是个组件，组件的创建使用React.createClass({}),es6也还有别的写法，反正我是用不惯
3.每个组件都需要一个render函数，return中只能包含一个顶层标签，我们一般用div来包裹。且组件名称应该大写开头。
4.refs的属性可以帮助我们突破虚拟DOM的限制，可以获取到DOM结构，但是不要使用中文网上的类似:this.refs.xxx.getDOMNode()，因为这样的写法已经不被支持。
this.refs.XXX的写法是用来获取react结构的。
我们应该使用react-dom提供的专门操作DOM的方法：ReactDOM.findDOMNode(this.refs.XXX)。
this.refs.XXX与ReactDOM.findDOMNode(this.refs.XXX)是不同的，虽然有时候我们打印出来的有时会相同。
5.当然，react最核心的就是一个状态机。getInitialState(只会在组件初始化的时候调用一次)就是用来初始化状态的，我们可以通过this.setState()来修改状态。状态的每次修改都会出发render函数。
6.getDefaultProps这个函数可以帮助我们设置一个不变的数据结构，以便取用。相当于定义了一个常量。
7.statics就是用来顶一个静态方法的，我们可以定义各种函数，并通过ComponentDemo. getBusinessName()方式来调用。结构:组件名.函数名
8.最重要的事件机制也是存在的，就像例子中的onClick，大部门事件机制都是支持的。
9.componentDidMount(只会在组件渲染结束后调用一次)这个函数就是跟组件的生命周期相关了。我们一般在里面会进行异步的请求之类的操作。
componentWillMount(只会在组件执行初始化渲染之前调用一次)刚好跟上面的相反。
还有其他的几个，个人理解为组件进入，开始，离开的钩子。
shouldComponentUpdate(object nextProps,boject nextState) (在函数有新的props或state的时候触发)这个钩子会主要管理组件是否更新的，返回的是个布尔值。默认是true，一般不建议使用。
10.组件肯定也少不了css的润色。但是这里添加style必须以对象的形式写，如果是数字的话，默认单位是px。
其他的属性必须用驼峰格式：style={{ backgroundColor:'red' }}；
class必须写成className。
11.isMounted()是用来判断组件是否已经插入DOM。一般请求后强烈建议在判断是否插入DOM后，再来修改state。
绝对不要直接改变
this.state，因为在之后调用setState()可能会替换掉你做的更改。把this.state当做不可变的。
setState()不会立刻改变this.state，而是创建一个即将处理的 state 转变。在调用该方法之后获取this.state的值可能会得到现有的值，而不是最新设置的值。不保证
setState()调用的同步性，为了提升性能，可能会批量执行 state 转变和 DOM 渲染。
setState()将总是触发一次重绘，除非在shouldComponentUpdate()中实现了条件渲染逻辑。如果使用可变的对象，但是又不能在shouldComponentUpdate()中实现这种逻辑，仅在新 state 和之前的 state 存在差异的时候调用setState()可以避免不必要的重新渲染。
以上仅属于个人愚见，如果错处，欢迎指出！