react官网：
https://facebook.github.io/react/
内容来源：
http://www.ruanyifeng.com/blog/2015/03/react.html
- React 可以在浏览器运行，也可以在服务器运行
一、react网页源码（html模板）
<! DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
//React核心库
<script src="../build/react-dom.js"></script>
//提供与 DOM 相关的功能
<script src="../build/browser.min.js"></script>
//将 JSX 语法转为 JavaScript 语法
//以上3个必须首先加载
</head>
<body>
<div id="example"></div>
//type属性为text/babel，因为react有自己的JSX语法，与javascript不兼容。凡使用JSX的地方，都要用 type="text/babel"
<script type="text/babel">
// ** 代码开始地方 **
</script>
</body>
</html>
二、模板转html语言
ReactDOM.render用于将模板转为 HTML ，并插入d到指定 DOM 节点中。
ReactDOM.render(
<h1>Hello, react</h1>,
document.getElementById('example')
);
有2个参数：
ReactDOM.render(
模板,
插入位置
);
三、JSX语法
- 1、JSX语法规则：遇到html标签（以<开头）用html语法解析，遇到代码块（以{开头）用js解析
var itnames = ['react','html','css'];
ReactDOM.render(
<div>
{
itnames.map(function (name) {
return <p>hello, {name}</p>
})
}
</div>,
document.getElementById('example')
);
Paste_Image.png
- 2、JSX允许直接在模板插入js变量，若变量是一个数组，则会展开显示数组所有元素
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
Paste_Image.png
四、组件
React.createClass()方法：生成一个组件
var HelloMessage = React.createClass({
render: function () {
return <h1>hello {this.props.name} {this.props.className}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="wy" className="ceshjo"/>,
document.getElementById('example')
);
注意：
- 组件类的第一个字母必须大写
- 组件类只能包含一个顶层标签
- 组件的属性可以在组件类的 this.props 对象上获取
- class 属性需写成 className ，for 属性需写成 htmlFor ，因为 class 和 for 是 JavaScript 的保留字。
五、this.props.children
表示组件的所有子节点
返回的值有3种：（注意处理）
- undefined 组件没有子节点
- object 组件只有一个子节点
- array 组件有多个子节点
用React.Children.map 来遍历子节点，就无需考虑上述问题
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
/// this.props.children.map(function (child) {
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>//组件的子节点
<span>world</span>
</NotesList>,
document.getElementById('example')
);
Paste_Image.png
六、PropTypes
用来验证组件实例的属性是否符合要求
var data = 123;
var MyTitle = React.createClass({
propTypes: {
//title属性是必须的，且它的值必须是字符串
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title={data} />,
document.getElementById('example')
);
上述代码就会打印出警告
Paste_Image.png
getDefaultProps用来设置组件属性的默认值
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle />,
document.body
);
七、获取真实的DOM节点
组件不是真实的DOM节点，而是存在于内存中的一种数据结构，即虚拟DOM。
只有将其插入文档之后，才会成为真实的DOM。
react中，所有DOM的变动都先在虚拟DOM上发生，然后再将实际发生变动的部分反映在真实DOM上。（提高性能）
ref属性：
var MyComponent = React.createClass({
handleClick: function() {
//this.refs.[refName] 获取真实的DOM节点
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="输入框获得焦点" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
注意：
- 必须等到虚拟 DOM 插入文档以后，才能使用这个this.refs.[refName]属性
八、this.state
将组件看成一个状态机，一开始有一个初始状态，然后用户互动导致状态变化，从而触发重新渲染UI
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text}.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
- getInitialState：定义初始化状态，是一个对象，可以通过this.state读取
- this.setState：修改状态值，自动调用render再次渲染组件
九、表单
var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input/>, document.getElementById('example'));
定义一个 onChange 事件的回调函数，通过
event.target.value 读取用户输入的值，textarea 元素、select元素、radio元素都属于这种情况
十、组件的生命周期
3个状态
- 1、Mounting：已插入真实 DOM
- 2、Updating：正在被重新渲染
- 3、Unmounting：已移出真实 DOM
每个状态有两种处理函数
- will 函数在进入状态之前调用
- did 函数在进入状态之后调用
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
componentWillReceiveProps(object nextProps)
//已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)
//组件判断是否重新渲染时调用
示例：
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},
render: function () {
return (
// 第一个{}表示这是javascript，第二个{}表示样式对象
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});
ReactDOM.render(
<Hello name="world"/>,
document.getElementById('example')
);
十一、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]; //result 结果列表
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="请求接口地址" />,
document.getElementById('example')
);
