如何渲染到容器
直接上代码：
//第一个参数是构造的组件，第二个参数是使用组件的容器
ReactDom.render( <Avatar name='' link='' />,document.getElementByID(''));
render@H_403_8@渲染页面 将组件放到选定的元素里面
如何定义组件
使用React.createClass({render:function(){return ( 我是dom元素 )}})@H_403_8@构建
var ProfilePic = React.createClass({
render: function() {
//可以在return前进行相关处理
return (
<img src={this.props.link} />
);
}
});
1.return()@H_403_8@括号中只能填写一个标签，否则报错
2.this.props@H_403_8@是ReactDOM.render@H_403_8@中传递的属性，是一个对象 对于组件套组件的方式可以传递属性值，如下面例子
组件套组件
// 渲染到容器
ReactDOM.render(
<Avatar
name="GuoYongfeng"
link="https://avatars2.githubusercontent.com/u/8686869?v=3&s=460"
/>,document.getElementById('example')
);
var Avatar = React.createClass({
render: function() {
return (
<div>
<ProfilePic link={this.props.link} /> //this.props包含了name和link的属性，同时在ProfilePic组件中可以使用this.props获取link的值
<ProfileLink name={this.props.name} />
</div>
);
}
});
如何设置某个变量的初始值
使用getInitialState:function(){return {}}@H_403_8@声明初始化变量，使用this.setState({键值对})@H_403_8@修改getInitialState@H_403_8@函数中的变量，通过this.state@H_403_8@对象获取属性的值，代码如下：
var ClickApp = React.createClass({
getInitialState:function(){
return {
clickCount: 0,}
},handleClick: function(e){
this.setState({
clickCount: this.state.clickCount + 1,});
},render: function(){
return (
<div>
<h2>点击下面按钮</h2>
<button onClick={this.handleClick}>点击我</button>
<p>你一共点击了：{this.state.clickCount}</p>
</div>
)
}
});
getInitialState@H_403_8@在组件的生命周期内只会运行一次，用来设置组件的初始状态。
this.props.children
this.props@H_403_8@ 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children@H_403_8@ 属性，它表示组件的所有子节点。this.props.children@H_403_8@的值有三种可能：如果当前组件没有子节点，它就是 undefined@H_403_8@ ;如果有一个子节点，数据类型是 object@H_403_8@；如果有多个子节点，数据类型就是 array@H_403_8@。React 提供一个工具方法 React.Children@H_403_8@ 来处理 this.props.children@H_403_8@ 。我们可以用 React.Children.map@H_403_8@ 来遍历子节点，而不用担心 this.props.children@H_403_8@ 的数据类型是 undefined@H_403_8@ 还是 object@H_403_8@
PropTypes
验证组件提供的参数是否满足要求。如 propTypes: { title: React.PropTypes.string.isrequired },render:function(){return} @H_403_8@ 代码的作用就是说明title@H_403_8@是必须填写的而且为字符串。 使用 getDefaultProps@H_403_8@来配置默认的字符串 getDefaultProps : function () { return { title : 'Hello World'};},@H_403_8@
组件的生命周期
生命周期分为三个状态：
Mounting@H_403_8@：已插入真实 DOMUpdating@H_403_8@：正在被重新渲染Unmounting@H_403_8@：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。componentWillMount()@H_403_8@componentDidMount()@H_403_8@componentWillUpdate(object nextProps,object nextState)@H_403_8@componentDidUpdate(object prevProps,object prevState)@H_403_8@componentWillUnmount()@H_403_8@
此外，React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps)@H_403_8@：已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps,object nextState)@H_403_8@：组件判断是否重新渲染时调用
JSX转化器
1.内嵌的jsx@H_403_8@代码，需要在script标签中要加上type="text/babel"@H_403_8@，并引入browser.min.js@H_403_8@5.8.24文件，或者使用bower install babel --save-dev@H_403_8@下载babel文件中获取，将ES6@H_403_8@转化为ES5@H_403_8@
2.[已废弃]使用react-tools@H_403_8@模块，将代码转化成线上代码 使用npm install -g react-tools@H_403_8@安装，使用jsx --watch src/ build/@H_403_8@转化
3.可以直接使用babel@H_403_8@转化，babel --presets react [es2015] src --watch --out-dir build@H_403_8@，其中[es2015]@H_403_8@是选填项，src@H_403_8@是源文件路径 build@H_403_8@是编译后的文件路径
4.在gulp@H_403_8@中使用gulp-react@H_403_8@转化
Html转义
var content='<strong>content</strong>';
React.render(
<div>{content}</div>,document.body
);
//会直接显示 <strong>content</strong> 相当于ejs中<%= %>
Html默认会对Html文章转义，如何不转义
var content='<strong>content</strong>';
React.render(
<div dangerouslySetInnerHTML={{__html: content}}></div>,document.body
);
CDN文件
1.reactreact@H_403_8@ 包括 React.createElement@H_403_8@、 React.createClass@H_403_8@、React.Component@H_403_8@、 React.PropTypes@H_403_8@、 React.Children@H_403_8@ react-dom@H_403_8@ 包括 ReactDOM.render@H_403_8@、 .unmountComponentAtNode@H_403_8@、 .findDOMNode@H_403_8@react-dom-server@H_403_8@ 包括.renderToString@H_403_8@ 和 .renderToStaticMarkup@H_403_8@react-with-addons@H_403_8@
HTML 标签 vs. React 组件
React.render@H_403_8@方法可以渲染HTML结构，也可以渲染React组件。JSX@H_403_8@使用首字母大小写来区分是本地组件类还是Html标签。
(1)渲染HTML标签，声明变量采用首字母小写
var myDivElement = <div className="foo" />;
React.render(myDivElement,document.body);
(2)渲染React组件，声明变量采用首字母大写
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement,document.body);
Small Tips
1.数据的传递都是需要至于{}@H_403_8@之中，包括赋值<div {...other} className={fancyClass} />@H_403_8@,{}@H_403_8@中的变量都是可以通过ReactDom.render@H_403_8@时传入
2.使用default@H_403_8@为前缀，加上Checked@H_403_8@,Value@H_403_8@等设置默认值，如defaultChecked@H_403_8@,defaultValue@H_403_8@等，在组件中使用已有的属性。
3.this.refs@H_403_8@引用对象集合，在Dom元素上添加了ref@H_403_8@属性后，就会将这个Dom元素添加到this.refs@H_403_8@之中，在页面中这个标签的值是唯一的，this.refs.xxxx.value@H_403_8@这种方式可以获取变量的值，ref@H_403_8@是一种回调的原理，当子组件的该属性值改变，相应的值会回调给父组件
4.在组件实现时，return(<div>{ }</div>)@H_403_8@中的{}@H_403_8@可以加入大量的javascript处理函数，如下：
return (
<ul>
{
this.props.list.map(function (child) {
return <li>{child}</li> //注意这种写法，<li>{child}</li>
})
}
</ul>
);
5.组件可以直接当做Dom标签一样使用，像button@H_403_8@,h1@H_403_8@等
6.与Javascript DOM中一样的写法，class@H_403_8@对于className@H_403_8@,html@H_403_8@对应于htmlFor@H_403_8@；另外，对于非html内置的属性，一定要加上data-@H_403_8@，如<div data-custom-attribute="foo" />@H_403_8@
`
7.JSX 的基本语法规则
8.this.props 和 this.state不同点
由于 this.props@H_403_8@ 和 this.state@H_403_8@ 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是,this.props@H_403_8@表示那些一旦定义，就不再改变的特性，而 this.state @H_403_8@是会随着用户互动而产生变化的特性。
9.组件中样式的写法：style="opacity:{this.state.opacity};"@H_403_8@这种方式错误；使用 style={{opacity: this.state.opacity}}@H_403_8@这种方式，第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。
10.在componentDidMount@H_403_8@中的设置请求返回的数据需要特别注意只有当数据返回回来才有效，通过 this.isMounted()@H_403_8@ 判读，或者直接使用promise@H_403_8@的then@H_403_8@方法.查看示例12
参考文档
1.阮一峰老师的[react-demos](https://github.com/ruanyf/react-demos)@H_403_8@
