首页 > 代码库 > 浅谈 React
浅谈 React
机缘巧合认识React，翻了2天的资料，又整理了1天，也算是简单入门了;之前也学过angular，相比来说，的确React代码逻辑更加简单明了，理解起来也相对容易。
React 具备以下特性：1.声明式设计 ?React采用声明范式，可以轻松描述应用。
2.高效 ?React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 ?React可以与已知的库或框架很好地配合。
4.JSX ? JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 ? 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 ? React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
下面是我整理的一些关于React的入门知识
注：下面所示事例中只引入react.js（核心JS）、react-dom.js（关于DOM的JS）、browser.min.js（JSX解读），可直接到官网下载最新的源码：https://facebook.github.io/react/
一、ReactDOM.render 是 React 的最基本方法：用于将模板转为 HTML 语言，并插入指定的 DOM 节点
ReactDOM.render(
<h1>Hellow World!</h1>,
document.getElementById(‘example‘)
);
二、JSX 语法 -- React 首次提出的一种语言
JSX 语法：HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写；
JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员,添加到模板。
例1：var names = [‘Alice‘, ‘Emily‘, ‘Kate‘];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div><span>Hello, {name}!</span></div>
})
}
</div>,
document.getElementById(‘example‘)
);
例2：var arr = [
<h1>I have a dream!</h1>,
<h2>I have a day！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById(‘example‘)
);
JSX具备以下优点：1.JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
2.它是类型安全的，在编译过程中就能发现错误。
3.使用 JSX 编写模板更加简单快速。
三、组件 API
1.设置状态：setState
2.替换状态：replaceState
3.设置属性setProps
4.替换属性replaceProps
5.强制更新：forceUpdate
6.获取DOM节点：findDOMNode
7.判断组件挂载状态：isMounted
8.生成组件类：createClass
（关于createClass）：React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类
注意：添加组件属性，需要注意的就是 class 属性需要写成 className ，for 属性需要写成 htmlFor，因为for与class 是 JS 中的关键字（其他属性可直接使用）
例：
var HelloMessage = React.createClass({
render: function() {
return (
<div>
<h1>{this.props.name}</h1>
<a href=http://www.mamicode.com/{this.props.site}>{this.props.site}
</div>
)
}
});
ReactDOM.render(
<HelloMessage name="百度" site="www.baidu.com"/>,
document.getElementById(‘example‘)
);
复合组件：通过创建多个组件来合成一个组件
var HelloMessage = React.createClass({
render: function() {
return (
<div>
<Name name={this.props.name}/>
<Site site={this.props.site}/>
</div>
)
}
});
var Name = React.createClass({
render: function() {
return <h1>{this.props.name}</h1>
}
});
var Site = React.createClass({
render: function() {
return <a href=http://www.mamicode.com/{this.props.site}>{this.props.site}
}
});
ReactDOM.render(
<HelloMessage name="百度" site="www.baidu.com"/>,
document.getElementById(‘example‘)
);
四、this.props.children 属性
前面的例子中提到：this.props 表示对象的属性与组件的属性一一对应；但是 this.props.children 属性表示组件的所有子节点
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
)
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>LiLei</span>
<span>HanMeimei</span>
</NotesList>,
document.getElementById(‘example‘)
);
this.props.children 的值有三种可能: 1.如果当前组件没有子节点，它就是 undefined
2.如果有一个子节点，数据类型是 object
3.如果有多个子节点，数据类型就是 array
五、React State (状态)
与用户互动，导致状态变化，根据新的 state 重新渲染用户界面（常用于输入框中）
var Input = React.createClass({
getInitialState: function() {
return {value: ‘Hello!‘};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = http://www.mamicode.com/this.state.value;
return (
<div>
<input type="text" value=http://www.mamicode.com/{value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input/>, document.getElementById(‘example‘));
注：由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，特性是不再改变的，而 this.state 特性是会随着用户互动而产生变化的。
六、PropTypes 属性
就是用来验证组件实例的属性是否符合要求：有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求（提供给代码人员自己识别）
var data = http://www.mamicode.com/‘123‘;
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.number,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title={data} />,
document.getElementById(‘example‘)
);
结果：正常输出“123”，打开开发者工具会有一段错误输出（具体可自己试试）
七、refs 属性
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
this.refs[myRefsName] 获取真实的DOM节点
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="http://www.mamicode.com/点击进行编写" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById(‘example‘)
);
八、组件的生命周期
组件的生命周期分成三个状态：
1、Mounting：已插入真实 DOM
2、Updating：正在被重新渲染
3、Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用,三种状态共计五种处理函数 + 两种特殊状态的处理函数；
具体参见：https://facebook.github.io/react/docs/react-component.html
九、React AJAX
React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据库可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI
当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。
var UserGist = React.createClass({
getInitialState: function() {
return {
username: ‘‘,
userhobby: ‘‘
};
},
componentDidMount: function() {
$.get(this.props.source, function (result) {
this.setState({
username: result.name,
userhobby: result.hobby
});
}.bind(this),‘json‘);
},
render: function() {
return (
<div>
<p>姓名：{this.state.username} </p>
<p>爱好：{this.state.userhobby} </p>
</div>
);
}
});
ReactDOM.render(
<UserGist source="http://localhost/testdata.php" />,
document.getElementById(‘example‘)
);
浅谈 React