1.什么是React？
a.React 是一个用于构建用户界面的 JAVASCRIPT 库。
b.React主要用于构建UI，很多人认为 React 是 MVC 中的 V。
c.React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
d. React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
2.JSX语法：JavaScript+XML
基本方法：React.render(填入元素的html代码, 指定的元素)
使用JSX语法：javaScript+XML有以下几个优点：
a. JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化
b.它是类型安全的，在编译过程中就能发现错误
c. 使用 JSX 编写模板更加简单快速
例子：
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它(必须使用一个根元素)，实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。
注意：例子中的代码也可以独立写在一个js文件中，可以通过script标签引入，效果是一样的
d.react表达式，.在JSX中可以使用javascript表达式，表达式写在{}中
例子：
ReactDOM.render(
<h1>{1+1}</h1>,
document.getElementById('example')
);
注意：在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。
e.react样式， React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。
例子：
var myStyle = { fontSize: 100, color: '#FF0000' };
ReactDOM.render(
<h1 style = {myStyle}>LeoX笔记</h1>,
document.getElementById('example')
);
注意：style属性名须用camelCase命名法书写。如background-color须写为backgroundColor
f.注释, 注释需要写在花括号中
例子：
ReactDOM.render(
//注释
/*注释*/
<div>
<h1>菜鸟教程</h1>
{/*注释...*/}
</div>,
document.getElementById('example')
);
注意：在根元素中的注释须加大括号，但是在根元素以外的注释，不可加大括号，单行注释和多行注释都是支持的。
g.数组，JSX 允许在模板中插入数组，数组会自动展开所有成员
例子：
var arr = [ <h1>第一行</h1>, <h2>第二行</h2>, ];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
注意：展开的数组元素须自带标签或者是字符串。
注意：由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。
注意：代码中嵌套多个 HTML 标签，需要使用一个标签元素包裹它
3.组件
定义组件使得我们的应用更容易来管理
定义组件使得我们的应用更容易来管理
把自定义组件当作普通标签使用，直接一个单标签即可
组件定义方法：
A.React.createClass 方法用于生成一个组件类
B.如果我们需要向组件传递参数，可用 this.props 对象；对象的属性不要使用保留字
C.组件名称第一个字母大写
例子：
var HelloMessage = React.createClass({ //React.createClass 方法用于生成一个组件类 HelloMessage。
render: function() {
return <h1>Hello World！</h1>;
}
});
ReactDOM.render(
<HelloMessage />,// <HelloMessage /> 实例组件类并输出信息。
document.getElementById('example')
);
注意：原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。
4.如果我们需要向组件传递参数，可以使用 this.props 对象
例子：
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="Runoob" />,
document.getElementById('example')
);
注意：例子中的this指向当前所在的组件，就是后面使用的标签。
注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
5.复合组件
我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。
var WebSite = React.createClass({
render: function() {
return (
<div>
<Name name={this.props.name} />
<Link site={this.props.site} />
</div> );
}
});
var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>
);
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}> {this.props.site} </a>
);
}
});
ReactDOM.render(
<WebSite name="百度一下 " site=" http://www.baidu.com" />, document.getElementById('example')
);
总结：在组件里使用其他组件的标签，就是复合组件
注意：组件名不一定是用单标签，也可以是双标签
6.自定义方法
A.绑定事件需要把事件名的首字母大写:onClick；
B.事件处理函数支持event对象；
C.组件中的事件处理函数只能在当前组件中使用，外面的组件无法使用，并且每个函数都需要单独定义。
例子：
let MyCom = React.createClass({
render:function(){
let name = this.props.name;
return (
<b onClick={this.getMyName.bind(this)} id="myid">
{this.props.name}
</b>
);
},
getMyName:function(a){
console.log(event.target);
d.target.innerHTML = this.props.name;
this.props.name = '张三';
console.log(this.props.name);
}
});
ReactDOM.render(
<MyCom name="LeoX"></MyCom>,
document.querySelector('.mydiv')
);
7.属性和默认属性
getDefaultProps()；//设置默认属性
例子：
let School = React.createClass({
render:function(){
return (<div>
<SchoolInfo name={this.props.schoolname} m={this.props.m} />，
<StuInfo name={this.props.name} sex={this.props.sex} />
</div>);
}
});
let SchoolInfo = React.createClass({
render:function(){
console.log(this.props);
return <b>学校：{this.props.name}，<Major m={this.props.m} /></b>;
}
});
let Major = React.createClass({
render:function(){
console.log(this.props)
return <b>专业：{this.props.major[this.props.m]}</b>;
},
getDefaultProps:function(){
return {
major:['', '计算机科学与技术', '物联网', '信息技术']
};
}
});
let StuInfo = React.createClass({
render:function(){
return <b>姓名：{this.props.name}，性别：{this.props.sex == 1 ?'男':'女'}</b>;
}
});
let stuinfo = [
{schoolname:"复旦", name:"张三", sex:"1", m:1},{schoolname:"清华", name:"李四", sex:"2", m:2},{schoolname:"北大", name:"王五", sex:"1", m:3}
];
let stulist = [];
for (var i = 0; i < stuinfo.length; i++) {
stulist.push(<School schoolname={stuinfo[i].schoolname} name={stuinfo[i].name} sex={stuinfo[i].sex} m={stuinfo[i].m} />);
}
ReactDOM.render(
<span>{stulist}</span>,
document.querySelector('.mydiv')
);
注意：如果外部传入属性与内部默认属性重名了，即发生冲突了，默认属性会被外部传入同名属性覆盖，如果不同名则会被合并，都可以用this.props.+name调用。且属性不可更改，因为更改以后页面未被重新渲染，无任何效果，所以认定为无法更改，其实是可以更改，只不过没效果。
8.状态和属性
A.状态的值在修改的时候，组件会重新渲染；
B.修改状态需要使用this.setState()来设置状态值；
C. getInitialState()设置默认状态值，使用this.state.+name调用
D.this.setState()来设置改变的状态值，未改变的状态值可不设置。这个方法调用会重新渲染页面。
setState(object nextState[, function callback])
- nextState，将要设置的新状态，该状态会和当前的state合并
- 不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。
- setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。
- setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。
- callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。
例子：
html：<div id="date"></div>
<div class="mydiv">这里是一个盒子</div>
js：
document.querySelector('#date').innerHTML = new Date();
let Major = React.createClass({
render:function(){
return <span>
专业：<b>{this.props.major[this.state.age]}</b>，设置：{this.state.age}年--
<button onClick={this.addAge}>增加一年</button>
<em>{this.state.username}</em>
</span>;
},
getDefaultProps:function(){
return {
major:['', '计算机科学与技术', '物联网', '信息技术']
};
},
getInitialState:function(){
return {
age:1,
username:'小明'
};
},
addAge:function(){
this.props.major = [];
this.setState({age:++this.state.age, username:'小红'});
console.log(this.state.age);
}
});
ReactDOM.render(
<Major m='1'/>,
document.querySelector('.mydiv')
);