三、React组件
React 组件基本上是由组件的构建方式、组件内的状态属性与生命周期方法组成
- React.createClass
用 React.createClass 构建组件是 React 最传统、也是兼容性最好的方法。在 0.14 版本发布之前，这一直都是React官方唯一指定的组件写法，如下：
const Button = React.createClass({
getDefaultProps() {
return {
color: 'blue',
text: 'Confirm',
};
},
render() {
const { color, text } = this.props;
return (
<button className={`btn btn-${color}`}>
<em>{text}</em>
</button>
);
}
});
- ES6 classes
ES6 classes 的写法是通过 ES6 标准的类语法的方式构建方法：
import React, { Component } from 'react';
class Button extends Component {
constructor(props) {
super(props);
}
static defaultProps = {
color: 'blue',
text: 'Confirm',
};
render() {
const { color, text } = this.props;
return (
<button className={`btn btn-${color}`}>
<em>{text}</em>
</button>
);
}
}
四、React数据流
在 React 中，数据是自顶向下单向流动的，即从父组件到子组件。这条原则让组件之间的关系变得简单且可预测。
state与props是React组建中最重要的概念。如果顶层组件初始化props，那么React会乡下遍历整颗组件树，重新尝试渲染所有相关的子组件。而state只关心每个组件自己内部的状态，这些状态只能在组件内改变。把组件看成一个函数，那么它接受了props作为参数，内部由state作为函数的内部参数，返回一个Virtual DOM的实现。
state
state用于管理组件内部的状态，当state状态发生变化时，该组件就会尝试重新渲染。例如实现一个计数器的组件：
import React, { Component } from 'react';
class App extends Component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
count: 0,
};
}
handleClick(e) {
e.preventDefault();
this.setState({
count: this.state.count + 1,
});
}
render() {
return (
<div>
<p>{this.state.count}</p>
<a href='#' onClick={this.handleClick}>更新</a>
</div>
);
}
}
export default App;
在React中常常在事件处理方法中更新state，上述例子就是通过点击“更新”按钮不断地更新内部count的值，这样就可以把组件内状态封装在实现中。
props
props是React用来让组件之间互相联系的一种机制，通俗的说就像方法参数一样。React的单向数据流，主要的流动管道就是props。
function HelloMessage(props) {
return <h1>Hello {props.name}!</h1>;
}
const element = <HelloMessage name="Runoob"/>;
ReactDOM.render(
element,
document.getElementById('example')
);
五、React组件的生命周期
React组件的生命周期可分为三个状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
生命周期的方法有：
组件挂载时
-
componentWillMount 在render()方法前调用,在客户端也在服务端。
-
componentDidMount 在第一次render()方法后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
import React, { Component, PropTypes } from 'react';
class App extends Component{
static propTypes = {
// ...
};
static defaultPorps = {
// ...
};
constructor(props) {
super(props);
this.state = {
// ...
};
}
componentWillMount(){
// ...
}
componentDidMount(){
// ...
}
render(){
return <div>This is a demo</div>;
}
}
componentWillMount和componentDidMount只会在组件初始化时运行一次。如果在componentWillMount方法中执行setState方法，组件会更新state，但是组件只渲染一次；如果在componentDidMount中执行setState方法，初始化时组件会渲染两次
组件更新时
-
componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
-
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。 -
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
-
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
import React, { Component, PropTypes } from 'react';
class App extends Component {
componentWillReceiveProps(nextProps) {
//
}
shouldComponentUpdate(nextProps, nextState) {
//
}
componentWillUpdate(nextProps, nextState) {
//
}
componentDidUpdate(preProps, prevState) {
//
}
render(){
return <div>This is a demo</div>;
}
}
组件卸载时
- componentWillUnmount在组件从 DOM 中移除之前立刻被调用。
import React, { Component, PropTypes } from 'react';
class App extends Component {
componentWillUnmount(){
// ...
}
render(){
return <div>This is a demo</div>;
}
}
生命周期整体流程
React生命周期整体流程图
React组件API
- 设置状态：setState
setState(object nextState[, function callback])
- 替换状态：replaceState
replaceState(object nextState[, function callback])
- 设置属性：setProps
setProps(object nextProps[, function callback])
- 替换属性：replaceProps
replaceProps(object nextProps[, function callback])
- 强制更新：forceUpdate
forceUpdate([function callback])
- 获取DOM节点：findDOMNode
DOMElement findDOMNode()
- 判断组件挂载状态：isMounted
bool isMounted()
参考：
《深入React技术栈》 陈屹峰著
http://www.runoob.com/react/
网友评论