二十二、React.Component用法
组件(Components)允许您将UI拆分为独立的可重用的部分，并单独的考虑每个部分。
总览
React.Component是一个抽象基类。这意味着直接引用React.Component是毫无意义的。你可以实现一个它的子类，并且至少定义一个render()方法即可使用。
你可以使用ES6中class定义一个React组件：
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</hr>;
}
}如果你还没有使用ES6，你可以使用React.createClass()。
组件的生命周期方法
每个组件都有几个『生命周期方法』，您可以重写这些方法，已便在React执行过程中的指定时间运行自己的代码。前缀为Will的生命周期方法会在在一些事情发生之前被调用，带有Did前缀的方法在某些事情发生之后被调用。
Mounting(加载组件)
当创建组件的实例并将其插入DOM时，会依次调用这些方法：
constructor()componentWillMount()render()componentDidMount()
Updating(更新状态)
更新可以由prop或者state的改变引起。在重新渲染组件时依次调用这些方法：
componentWillReceiveProps()shouldComponentUpdate()componentWillUpdate()render()componentDidUpdate()
Unmounting(卸载组件)
当从DOM中删除组件时，将调用此方法：
componentWillUnmount()
其他API
每个组件还提供了一些其他API：
setState()forceUpdate()
组件属性
defaultPropsdisplayNamepropTypes
实例内部属性
propsstate
使用方法
render()
render() {
// return React Elements
}注意：render()方法是必须写的。
当这个方法被调用时，它会检测this.props和this.state并返回一个React元素。此元素可以是本地DOM组件的形式，例如<div/>，也可以是您自己定义的一个复合组件。
你也可以返回null或false来表示你不想做任何渲染操作。当返回null或false时，ReactDOM.findDOMNode(this)将返回null。
render()方法应该是纯的(pure function，见函数式编程)，这意味着它并不会修改组件state，每次调用它时都会返回相同的结果，它不会直接与浏览器交互。如果您需要与浏览器直接交互，请改用componentDidMount()方法或者其他生命周期方法来执行你的逻辑。保持render()的纯可以让组件更容易去思考自己应该做什么。
提示
如果shouldComponentUpdate()返回false，那么render()不会被执行。
constructor()
constructor(props)在装载组件(mounting)之前调用会React组件的构造函数。当实现React.Component子类的构造函数时，应该在任何其他语句之前调用super(props)。否则，this.props将在构造函数中未定义，这可能导致错误。
构造函数是初始化state的标准位置。如果不初始化state，并且不绑定组件内部方法的this指向，则不需要为React组件实现构造函数。
如果你知道你在做什么的话，你可以根据props来初始化state。这里有一个有效的React.Component子类构造函数的例子：
constructor(props) {
super(props);
this.state = {
color: props.initialColor
};
}注意这种模式，因为它会将props复制一份在state中，这就可能导致一个意外的bug。所以不应该将props复制到state中。相反，你需要使用提升state的技巧，该技巧我们在前面的文章提到过。
如果你使用props复制到state中，你还需要实现componentWillReceiveProps(nextProps)来保持state是最新的。这个时候使用提升state的方法反而会更容易，也能产生更少的bug。
componentWillMount()
componentWillMount()componentWillMount()是在装载(mounting)发生之前被调用。它在render()之前调用，所以在此方法中的设置state不会造成重新渲染。另外，应该避免在此方法中引入有任何副作用的东西(见函数式编程)。
在服务器渲染上这是唯一一个调用的生命周期钩子函数。一般来说，我们建议使用constructor()。
componentDidMount()
componentDidMount()componentDidMount()在组件装载到DOM后立即调用。如果需要进行DOM节点的初始化则应该在这里来执行该逻辑。如果需要从远程端点加载数据(ajax)，那么这是处理网络请求的最好地方。在此方法中设置state会去重新渲染DOM。
componentWillReceiveProps()
componentWillReceiveProps(nextProps)componentWillReceiveProps()在安装好的组件接收新props之前被调用。 如果你需要更新state用来响应props的更改（例如，重置它），你可以在此方法中比较this.props和nextProps并使用this.setState()来替换并重置state。
注意，即使props没有改变，React也可以调用这个方法，因此如果你只想处理props改变的情况，请确保比较当前值和下一个值是否不同。 当父组件引起你的组件重新渲染时，就有可能会发生这种情况。
如果你只是调用this.setState()，那么componentWillReceiveProps()不会被调用。
shouldComponentUpdate()
shouldComponentUpdate(nextProps, netState)使用shouldComponentUpdate()让React知道组件是否受当前state或props变化的影响。 默认行为是在每次state更改时都会去重新渲染DOM，在绝大多数情况下，你应该依赖于这个默认行为。
当接收到新的props或state时，shouldComponentUpdate()在渲染之前被调用。 默认为true对于初始渲染或使用forceUpdate()，不调用此方法。
返回false不会阻止子组件在state更改时重新渲染。
目前，如果shouldComponentUpdate()返回false，那么将不会调用componentWillUpdate()，render()和componentDidUpdate()。 注意，在将来React可以将shouldComponentUpdate()作为提示而不是严格的操作指令，返回false仍然可能导致组件的重新渲染。
如果你确定某些组件在某些操作时有点缓慢，你可以让它继承React.PureComponent，而不是继承React.Component。
React.PureComponent实现了props和state进行浅比较的shouldComponentUpdate()方法。 如果你确定想人肉处理这个浅比较操作，你可以自己在这个函数中比较this.props和nextProps、this.state和nextState是否相同。相同返回false，不同返回true，那么React就会根据返回值来确认是否跳过本次DOM渲染。
componentWilUpdate()
componentWillUpdate(nextProps, nextState)当组件在收到新的props或state时，componentWillUpdate()在渲染之前会立即调用这个方法。 使用这个方法来判断是非需要重新渲染DOM。 第一次渲染DOM不调用此方法。
注意，this.setState()不会调用此方法。 如果你需要根据state和props来进行重新渲染DOM，请改用componentWillReceiveProps()。
note
如果shouldComponentUpdate()返回false，则不会调用componentWillUpdate()。
componentDidUpdate()
componentDidUpdate(prevProps, prevState)componentDidUpdate()在重新渲染DOM之后被调用。 第一次渲染不调用此方法。
当组件已经重新渲染后，此方法是一个执行DOM操作的好机会，同时也是一个处理网络请求的好地方，前提是你需要比较当前props与之前的props是否相同（例如，如果props没有改变，那么可能不需要进行网络请求）。
note
如果shouldComponentUpdate()返回false，则不会调用componentDidUpdate()。
componentWillUnmount()
componentWillUnmount()componentWillUnmount()在组件被卸载和销毁之前立即被调用。 此方法可以执行任何有必要的清理工作，例如清理计时器，取消网络请求或清理在componentDidMount()中创建的DOM元素。
setState()
setState(nextState, callback)将nextState和当前state进行浅合并。 这是用于从事件处理函数和服务器请求回调中触发UI重新渲染的主要方法。
第一个参数可以是一个对象（包含一个或多个要更新的state属性），也可以是返回将要引起重新渲染的对象（state和props）。
这里有一个简单的用法：
this.setState({myKey: 'my new value'});它也可以传入一个带有参数的函数function（state，props）=> newState。 例如，假设我们想要当前state中的myInteger加上props.step：
this.setState(prevState, props) => {
return {myInteger: prevState.myInteger + props.step};
}第二种参数是回调函数，一旦setState完成并且组件被重新渲染，它就会被执行。 通常我们建议使用componentDidUpdate()代替这样的逻辑。
setState()不会立即改变this.state，但会创建并挂起state的修改。 所以在调用此方法中访问this.state可能会返回现有值。
不能保证对setState的所以调用都是同步操作，因为这样做是为了将多次state修改合并为一次以便提高性能。
setState()总会重新渲染DOM，除非shouldComponentUpdate()回false。 如果你正在使用可突变对象，并且无法在shouldComponentUpdate()实现条件渲染逻辑，则只有当新state与先前state不同时调用setState()才能避免不必要的重新渲染。
forceUpdate()
component.forceUpdate(callback)默认情况下，当组件的state或props改变时，组件将重新渲染。 如果你的render()方法依赖于一些其他数据，你可以告诉React组件需要通过调用forceUpdate()来重新渲染。
调用forceUpdate()会导致在组件上调用render()，跳过shouldComponentUpdate() 这将触发子组件的正常生命周期方法，包括每个子组件的shouldComponentUpdate()方法。 如果标记更改，React仍将更新DOM。
通常你应该尽量避免forceUpdate()的所有使用，并且只能从render()中的this.props和this.state中读取。
类属性
defaultProps
defaultProps是类组件本身的属性，用来设置类组件的默认props。 可以用来给未传入值的props设置默认值。 例如：
class CustomButton extends React.Component {
// ...
}
CustomButton.defaultProps = {
color: 'blue';
}如果props.color没有定义，就是将它设置为默认值blue：
render() {
return <CustomButton />; // props.color will be set to blue
}如果props.color被设置为null，那么它将会被重新赋值为null：
render() {
return <CustomButton color={null} />; // props.color will remain null
}displayName
displayName字符串用于调试消息。 JSX自动设置此值;
propTypes
propTypes也是类组件本身上的一个属性，用来规范props应该是什么类型。 它是从props的名称到React.PropTypes中定义的类型的映射。 在开发模式下，当为prop设置一个不是指定格式的无效值时，会在JavaScript控制台中显示警告信息。 在生产模式下，为了提高效率，不会进行propTypes检查。
例如，此代码确保颜色prop是一个字符串：
class CustomButton extends React.Component {
// ...
}
CustomButton.propTypes = {
color: React.PropTypes.string
};我们建议尽可能使用Flow，以便在编译时进行类型检查，而不是在运行时进行类型检查。 Flow在React中内置支持，因此可以轻松地在React应用程序上运行静态分析。
// @flow
function foo(x) {
return x * 10;
}
foo('Hello, world!');
// @flow
function bar(x): string {
return x.length;
}
bar('Hello, world!');实例属性
props
this.props包含由此组件的调用者定义的props。
特别地，this.props.children是一个特殊的props，通常由JSX表达式中的子标签而不是标签本身定义。
state
state包含特定于此组件的数据，可能随时间更改。 state是用户定义的，它应该是纯JavaScript对象。
如果你不在render()中使用它，它不应该设置state。 例如，您可以将定时器ID直接放在实例上。
永远不要直接改变this.state，因为调用setState()之后可以替换你所做的各种变化， 通常应该把this.state看作是不可变的。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。