一、 jsx
1. 被称为语法糖：糖衣语法，计算机语言中添加的某种语法，对语言的功能没有影响，更方便程序员使用，增加程序的可读性，降低出错的可能性
类似的还有（coffeescript，typescript），最终都被解析为js
2. 解析jsx的是jsxtransformer.js 指定jsx语法用<text/jsx>
3. 通过以下代码渲染dom
React.render(<hello name=”world”/>,
Document.getElementbyId(“container”));
var hello = React.createClass({
render: function(){
return <div>hello {this.props.name}</div>;
}
});
React.render(<hello name="world"/>,
document.getElementById("container'));
props是指属性组，this是实例
二、 css
1. class
不能在标签上直接写class，需要改为className (由于此处非真正的dom，class是关键字，不能解析）
var Hello = React.createClass({
render: function(){
return <div className="redfont">hello {this.props.name}</div>;
}
});
2. 内联式
不能字符串来表示，需要用样式对象来表示，样式对象是以驼峰标示写法，值为样式值
var Introduce = React.createClass({
render: function(){
return <div style={{fontSize:'44px'}}>{this.props.info}</div>;
}
});
{}中是执行表达式
{{}}内联样式写法
驼峰表达式：
render: function(){
//定义样式内容，样式obj
var styleObj = {
color: 'red',
fontSize:'32px'
};
//className代替class
return <div className="redfont" style={styleObj}>hello {this.props.name}</div>;
}
三、React components生命周期
1. Mounted是:React Components被render解析生成对应的DOM节点并被插入浏览器的DOM结构的一个过程。
2. Update是:一个mounted的React Components被重新render的过程。
对比当前state变化
State
每一个状态react都封装了对应的hook函数~钩子
这种函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。
对事件进行hook后系统会受到相应通知
3.Unmounted是:一个mounted的React Components对应的DOM节点被从DOM结构中移除的这样一个过程。
GetInitialstate
最终返回一个object其中包含其state
getInitialState:function(){
alert('init');
return {
opacity:1.0
};
}
This
是伴随函数生成时的函数内部实例对象
随着函数运行在不同的环境发生变化
始终指的是调用函数的那个对象
- 当其出现在settimeout函数参数中时，由于函数参数就是一个纯粹的函数调用，不隶属于其他对象，隶属于全局对象，属于global
- 当其出现在setinistialstate这样的函数体内，是作为其所属实例对象的方法来调用，此时this指component实例对象
- This出现在构造函数：
function test(){
this.x = 1;
}
var o = new test();
this 指新生成的对象
4. This出现在apply call bind等方法
作用函数的调用对象，指第一个参数
四、 React-component-listener
- Dom更新
传统：直接修改dom的innerhtml或classname
事件绑定：Eventlistener
React：
给组件添加事件绑定（on驼峰式命名方式）
render: function (){
return(
<div>
<button onClick={this.handleClick}>显示|隐藏</button>
<span ref="tip"> 点击测试</span>
</div>
);
}
添加点击事件：onClick={this.xxxxx}
与dom绑定不一样，这里不是真实的dom节点，大小写敏感，通过对象属性定义在对象实例上
var Btnclick = React.createClass({
handleClick: function(event){
},
Event对象是在js原生基础上封装的，因此同时具有原生event方法
2. 获取组件
1）使用‘ref’ property标记组件
用ref属性给子组件添加名字，通过this.refs可以索引到子组件
render: function (){
return(
<div>
<button onClick={this.handleClick}>显示|隐藏</button>
<span ref="tip"> 点击测试</span>
</div>
);
}
this.refs.tip
索引到的是react component而不是真实的dom节点
2）在dom里获得这个节点：
使用react提供的方法：ReactDOM.findDOMNode(react component)
五、 补充
ajax
组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}
}.bind(this));
},
render: function() {
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
});
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.body
);
上面代码使用 jQuery 完成 Ajax 请求，这是为了便于说明。React 本身没有任何依赖，完全可以不用jQuery，而使用其他库。
六、 注意事项
1. 注意react更新后的变化
2. 返回虚拟dom时包装为一个div，保证返回一个结果
3. 组件的首字母必须大写，不然不报错也不显示
4. this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错
5. this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
6. 用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取,而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况
7. 使用map遍历时注意：
8. grunt build可以用npm run list 代替
以上为慕课网《react入门》总结，所有试验代码地址已上传至git：https://github.com/chaoranwill/chaoran-home/tree/master/react/react-mytest 欢迎fork/clone