本文将首先讲述如何通过React nodes创建基础的React组件，然后进一步剖析React组件内部的点滴，包括该如何理解React组件，获取React组件实例的两种办法，React事件系统，对React生命周期函数的理解，获取React组件的子组件和子节点的方法，字符串
ref和函数式ref,以及触发React组件重新渲染的四种方法。
本文是React启蒙系列的第六章，依旧讲的是React的基础使用方法，但是如果你对上面提到的概念有不理解或不熟悉的地方，跳到对应地方观看阅读，你应该会能有所收获。
理解React组件
在具体说明如何创建React组件的语法之前，对什么是React组件，其存在的意思及其划分依据等做一个论述是很有必要的。
我们设想现在有一个webApp，这个app可以用来实现很多功能，依据功能，我们可以把其划分为多个功能碎片。要实现这么一个功能碎片，可能需要更多更小的逻辑单元，甚至还可以继续分。而我们编程其实就是在有一个总体轮廓的前提下，通过解决一个个小小的问题来解决一个小问题，解决一个个小问题来实现软件的开发。React组件就是这样，你可以就把它当做一个个可组合的功能单元。
以一个登陆框为例，登录框本身就是网站的一个组件，但是其内包含诸如文本输入框，登陆按钮等，当然如果你想要做的只是最基础的功能，输入框和按钮等可以只是一个个React 节点，但是如果你想为输入框加上输入检测，输入框可能就有必要写成一个单独的组件了，这样也有利于复用，之后需要做的可能只是简单的通过props传入不同的参数就可以实现不同的检测。假想我们现在的登录框组件，包含React <Button>元素形成登录按钮，也包含多个文本输入检测组件。那么父组件的作用一方面在于聚合小组件形成更复杂的功能单元，另一方面在于为子组件信息的沟通提供渠道（比如说在满足一定的输入条件后，登录按钮的状态从不可点击变为可点击）。
创建React组件
React组件通过调用React.createClass()方法创建，该方法需要传入一个对象形式的参数。在该对象中可以为所创建组件配置各种参数，其可用参数如下表：
| 方法(配置参数)名称 | 描述 |
|---|---|
| render() | 必填，通常为一个返回React nodes或者其它组件的函数 |
| getInitialState() | 一个用于设置最初的state的函数，返回一个对象 |
| getDefaultProps() | 一个用于设置默认props的函数，返回值为一个对象 |
| propTypes | 一个用于验证特定props类型的对象 |
| mixins | 组件间共享方法的途径 |
| statics | 一个由多个静态方法组成的对象，静态方法中不能直接调用props和state（可通过参数） |
| displayName | 是一个用于命名组件的字符串，用于展示调试信息，使用JSX时将自动设置？？ |
| componentWillMount() | 在组件首次渲染前触发，只会触发一次 |
| componentDidMount() | 在组件首次渲染后触发，只会触发一次 |
| componentWillReceiveProps() | 在组件将接受新props时触发 |
| shouldComponentUpdate() | 组件再次渲染前触发，可用于判断是否需要再次渲染 |
| componentWillUpdate() | 组件再次渲染前立即触发 |
| componentDidUpdate() | 组件渲染后立即触发 |
| componentWillUnmount() | 组件卸载前立即触发 |
在上述所以方法中，最重要且必不可少的是render()，它的作用是返回React节点和组件，其它所有的方法是可选的。
实际写一个例子总比空说要容易理解，以下是使用React的React.createClass()创建的Timer组件
var Timer = React.createClass({
getInitialState: function() {
return {
secondsElapsed: Number(this.props.startTime) || 0
};
},tick: function() { //自定义方法
this.setState({
secondsElapsed: this.state.secondsElapsed + 1
});
},componentDidMount: function() {//生命周期函数
this.interval = setInterval(this.tick,1000);
},componentWillUnmount: function() {//生命周期函数
clearInterval(this.interval);
},render: function() { //使用JSX返回节点
return (
<div>
Seconds Elapsed: {this.state.secondsElapsed}
</div>
);
}
});
ReactDOM.render(< Timer startTime = "60" / >,app); //pass startTime prop,used for state
现在如果对上述组件创建的代码有所疑惑也不要紧，本文接下来将一步步的介绍上述代码中设计都的各个概念，包括this,生命周期函数，React返回值的格式，如何在React中自定义函数，以及React组件中事件的定义等等。
在此需要注意的是组件名是以大写开头的。
当一个组件被创建（挂载）以后，我们就可以使用组件的API了，一个组件包含以下四个API
this.setState()，
this.setState({mykey: 'my new value'});
this.setState(function(prevIoUsState,currentProps)
{ return {myInteger: prevIoUsState.myInteger + 1};
});
作用：
用以重新渲染组件或者子组件
replaceState()
this.replceState({mykey: 'my new value'});
作用：
效果和`setState()`类似，不过并不会和老的状态合并，而是直接删除老的状态，应用新的状态。
forceUpdate()
this.forceUpdate(function(){//callback});
作用：
调用此方法将跳过组件的`shouldComponentUpdate()`事件，直接调用`render()`
isMounted()
this.isMounted()
作用
判断组件是否被挂载在DOM中，组件被挂载返回`true`,否则返回`false`
最常用的组件API是setState()，后文还会细讲。
小结
componentWillUnmount,componentDidUpdate,componentWillUpdate,shouldComponentUpdate,componentWillReceiveProps,componentDidMount,componentWillMount等方法被称作React 组件的生命周期函数，它们会在组件生命过程的不同阶段被触发。React.createClass()是一个方便的创建组件实例的方法；render()方法应该保持纯洁；
render()方法中不能更改组件状态
React组件的返回值
上文已经提到每个React组件必须有的方法就是render()，这个方法的返回值只能是一个react 节点或一个react组件，这个节点或组件中可以包含任意多的子节点或者子元素。在下面的例子中我们可以看到在<reactNode>中包含了多个子节点。
var MyComponent = React.createClass({
render: function() {
return <reactNode> <span>test</span> <span>test</span> </reactNode>;
}
});
ReactDOM.render(<MyComponent />,app);
值得注意的地方在于，如果你想返回的react 节点超过一行，应该用括号把返回值包围起来，如下所示
var MyComponent = React.createClass({
render: function() {
return (
<reactNode>
<span>test</span>
<span>test</span>
</reactNode>
);
}
});
ReactDOM.render(<MyComponent />,app);
另一个值得注意的地方是返回值最外层不能出现多个节点（组件），否者会报错
var MyComponent = React.createClass({
render: function() {
return (
<span>test</span>
<span>test</span>
);
}
});
ReactDOM.render(<MyComponent />,app);
上述代码就会报错，报错信息如下
babel.js:62789 Uncaught SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag (10:3) 8 | return ( 9 | <span>test</span> > 10 | <span>test</span> | ^ 11 | ); 12 | } 13 | });
一般来说开发者会在最外层加上一个<div>元素包裹其它节点以避免此类错误。
同样，如果return()中的最外层出现了多个组件，也会出错。
获取组件实例的两种方法
当一个组件被render后，一个组件便通过传入的参数实例化了，我们有两种办法获取这个实例及其内部属性（this.props和this.setState()）。
第一种方法就是使用this关键字，在组件内部的方法中使用this我们发现，这个this指向的就是该组件实例。
var Foo = React.createClass({
componentWillMount:function(){ console.log(this) },componentDidMount:function(){ console.log(this) },render: function() {
return <div>{console.log(this)}</div>;
}
});
ReactDOM.render(<Foo />,document.getElementById('app'));
获取某组件实例的另外一种方法是调用ReactDOM.render()方法，这个方法的返回值是最外层的组件实例。
看如下代码可以更好的理解这句话
var Bar = React.createClass({
render: function() {
return <div></div>;
}
});
var foo; //store a reference to the instance outside of function
var Foo = React.createClass({
render: function() {
return <Bar>{foo = this}</Bar>;
}
});
var FooInstance = ReactDOM.render(<Foo />,document.getElementById('app'));
console.log(FooInstance === foo); //true，说明返回值和指向一致
小结this的最常见用法就是在一个组件内调用该组件的各个属性和方法，如this.props.[NAME OF PROP]，this.props.children,this.state,this.setState(),this.replaceState()等。
在组件上定义事件
第四章和第五章已经多次介绍过React的事件系统，事件可以被直接添加都React节点上，下面的代码示例中，我们添加了两个React事件（onClick&onMouSEOver）到React<div>节点中
var MyComponent = React.createClass({
mouSEOverHandler:function mouSEOverHandler(e) {
console.log('you moused over');
console.log(e); //e is sysnthetic event instance
},clickHandler:function clickhandler(e) {
console.log('you clicked');
console.log(e); //e is sysnthetic event instance
},render:function(){
return (
<div onClick={this.clickHandler} onMouSEOver={this.mouSEOverHandler}>click or mouse over</div>
)
}
});
ReactDOM.render(<MyComponent />,document.getElementById('app'));
事件可以被看做是特殊的props，只是React对这些特殊的props的处理方式和普通的props有所不同。
这种不同表现在会自动为事件的回调函数绑定上下文，在下面的示例中，回调函数中的this指向了组件实例本身。
var MyComponent = React.createClass({
mouSEOverHandler:function mouSEOverHandler(e) {
console.log(this); //this is component instance
console.log(e); //e is sysnthetic event instance
},render:function(){
return (
<div onMouSEOver={this.mouSEOverHandler}>mouse over me</div>
)
}
});
ReactDOM.render(<MyComponent />,document.getElementById('app'));
小结
React规范化了事件在不同浏览器中的表现，你可以放心的跨浏览器使用；
React事件默认在事件冒泡阶段（bubbling）触发，如果想在事件捕获阶段触发需要在事件名后加上
Capture（如onClick变为onClickCapture）;如果你想获知浏览器事件的详情，你可以通过在回调函数中查看
SyntheticEvent对象中的nativeEvent值；React实际上并未直接为React nodes添加事件，它使用的是event delegation事件委托机制
想要阻止事件冒泡，需要手动调用
e.stopPropagation()或e.preventDefault()，不要直接使用returning false,React其实并没有支持所有的JS事件，不过它还提供额外的生命周期函数以供使用React lifecycle methods.
组件组合
React组件的render()方法中可以包含对其它组件的引用，这使得组件之间可以嵌套，一般我们把被嵌套的组件称为嵌套组件的子组件。
下例中组件BadgeList包含了BadgeBill和BadgeTom两个组件。
var BadgeBill = React.createClass({
render: function() {return <div>Bill</div>;}
});
var BadgeTom = React.createClass({
render: function() {return <div>Tom</div>;}
});
var BadgeList = React.createClass({
render: function() {
return (<div>
<BadgeBill/>
<BadgeTom />
</div>);
}
});
ReactDOM.render(<BadgeList />,document.getElementById('app'));
此处为展示嵌套关系，代码有所简化。
小结
编写可维护性UI的关键之一在于可组合组件，React组件天然适用这一原理；
在
render方法中，组件和HTML可以组合使用；
React组件的生命周期函数
每个组件都具有一系列的发生在其生命中不同阶段的事件，这些事件被称为生命周期函数。
生命周期函数可以理解为React为组件的不同阶段提供了的钩子函数，用以更好的操作组件，下例是一个定时器组件，其在不同生命周期函数中执行了不同的事件
var Timer = React.createClass({
getInitialState: function() {
console.log('getInitialState lifecycle method ran!');
return {secondsElapsed: Number(this.props.startTime) || 0};
},tick: function() {
console.log(ReactDOM.findDOMNode(this));
if(this.state.secondsElapsed === 65){
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);
return;
}
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},componentDidMount: function() {
console.log('componentDidMount lifecycle method ran!');
this.interval = setInterval(this.tick,componentWillUnmount: function() {
console.log('componentWillUnmount lifecycle method ran!');
clearInterval(this.interval);
},render: function() {
return (<div>Seconds Elapsed: {this.state.secondsElapsed}</div>);
}
});
ReactDOM.render(< Timer startTime = "60" / >,app);
组件的生命周期可被分为挂载（Mounting），更新（Updating）和卸载（UnMounting）三个阶段。
下面将对不同阶段各函数的功能及用途进行描述，弄清这一点很重要
挂载阶段
这是React组件生命周期的第一个阶段，也可以称为组件出生阶段，这个阶段组件被初始化，获得初始的
props并定义将会用到的state,此阶段结束时，组件及其子元素都会在UI中被渲染（DOM，UIview等），我们还可以对渲染后的组件进行进一步的加工。这个阶段的所有方法在组件生命中只会被触发一次。React-in-depth
对挂载阶段的生命周期函数的描述
| 方法 | 描述 |
| ------| ------ |
| getInitialState() | 在组件挂载前被触发，富状态组件应该调用此方法以获得初始的状态值 |
| componentWiillMount() | 在组件挂载前被触发，富状态组件应该调用此方法以获得初始的状态值 |
| componentWillMount() | 组件被挂载后立即触发，在此可以对DOM进行操作了 |
更新阶段
这个阶段的函数会在组件的整个生命周期中不断被触发，这是组件一生中最长的时期。这个阶段的函数可以获得新的
props,可以更改state，可以对用户的交互进行反应。React-in-depth
对更新阶段的生命周期函数的描述
| 方法 | 描述 |
|---|---|
componentWillReceiveProps(object nextProps) |
在组件接受新的props时被触发，可以用来比较新老props，并使用this.setState()来改变组件状态 |
shouldComponentUpdate(object nextProps,object nextState) |
此组件可以对比新老props和state，用以确认该组件是否需要重新渲染，如果返回值为false，将跳过此次渲染，此方法常用于优化React性能 |
componentWillUpdate(object nextProps,object nextState) |
在组件重新渲染前被触发，此时不能再调用this.setState()对state进行更改 |
componentDidUpdate(object prevProps,object prevState) |
在重新渲染后立即被触发，此时可调用新的DOM了 |
卸载阶段
这是组件生命的最后一个阶段，也可以被称为是组件的死亡阶段，此阶段对应组件从Native UI中卸载之时，具体说来可能是用户切换了页面，或者页面改变去除了某个组件，卸载阶段的函数只会被触发一次，然后该组件就会被加入浏览器的垃圾回收机制。React-in-depth
对此阶段的生命周期函数的描述
| 方法 | 描述 |
|---|---|
componentWillUnmount() |
组件卸载前立即被触发，此阶段常用来执行一些清理工作（比如说清除setInterval） |
小结
componentDidMount和componentDidUpdate常用来加载第三方的库（此时真实DOM存在，可加载各种图表库）。-
组件挂载阶段的各事件执行顺序如下
Initialize / Construction
获取初始的props，ES5中使用
getDefaultProps()(React.createClass),ES6中使用MyComponent.defaultProps(ES6 class)初始组件的
state值，ES5中使用getInitialState()(React.createClass),ES6中使用this.state = ...(ES6 constructor)componentWillMount()render()第一次渲染Children initialization & life cycle kickoff，子组件重复上述(1~5步)过程；
componentDidMount()
@H_403_635@
通过上面的过程分析，我们可以知道，在父元素执行
componentDidMount()时,子元素和子组件都已经存在于真实DOM中了，因此在此可以放心调用。
获取子组件和子节点的方法
如果一个组件包含子组件或React节点(如<Parent><Child /></Parent> 或 <Parent><span>test<span></Parent>)，这些子节点和子组件可以通过React的this.props.children的方法来获取。
下面的例子展示了如何使用this.props.children
var Parent2 = React.createClass({
componentDidMount: function() {
//将会获得<span>child2text</span>,console.log(this.props.children);
//将会获得 child2text,或得了子元素<span>的子元素
console.log(this.props.children.props.children);
},render: function() {return <div />;}
});
var Parent = React.createClass({
componentDidMount: function() {
//获得了一个数组 <div>test</div> <div>test</div>
console.log(this.props.children);
//获得了这个数组中的对应子元素中的子元素 childtext,console.log(this.props.children[1].props.children);
},render: function() {return <Parent2><span>child2text</span></Parent2>;}
});
ReactDOM.render(
<Parent><div>child</div><div>childtext</div></Parent>,document.getElementById('app')
);
观察上述的代码可以看出以下几点
Parent组件实例的
this.props.children获取到由直系子元素组成的数组，可以对子元素套用此方法获得子元素（组件）的子元素（组件）（this.props.children[1].props.children）;子元素指的是由该实例围起来的元素，而非该实例内部元素；
为了更好的操作this.props.children包含的是一组元素，React还提供了以下方法
| 方法 | 描述 |
|---|---|
React.Children.map(this.props.children,function(){}) |
在每一个直接子级（包含在 children 参数中的）上调用 fn 函数，此函数中的 this 指向 上下文。如果 children 是一个内嵌的对象或者数组，它将被遍历,每个键值对都会添加到新的 Map。如果 children 参数是 null 或者 undefined，那么返回 null 或者 undefined 而不是一个空对象。 |
React.Children.forEach(this.props.children,function(){}) |
类似于Children.map()但是不会反回数组 |
React.Children.count(this.props.children) |
返回组件子元素的总数量，其数目等于Children.map()和Children.forEach()的执行次数。 |
React.Children.only(this.props.children) |
返回唯一的子元素否则报错 |
React.Children.toArray(this.props.children) |
返回一个由各子元素组成的数组，如果你想在render事件中操作子元素的集合时，这个方法特别有用，尤其是在重新排序或分割子元素时 |
小结
当只有一个子元素时，
this.props.children之间返回该子元素，不会用一个数组包裹着该子元素；需要注意的是
children并非某组件内部的节点，而是由该组件包裹的组件或节点‘
两种ref
ref属性使得我们获取了对某一个React节点或某一个子组件的引用，这个在你需要直接操作DOM时非常有用。
字符串ref的使用很简单，可分为两步：
不过还存在一种函数式的ref，看下面的例子
var C2 = React.createClass({
render: function() {return <span ref={function(span) {console.log(span)}} />}
});
var C1 = React.createClass({
render: function() {return(
<div>
<C2 ref={function(c2) {console.log(c2)}}></C2>
<div ref={function(div) {console.log(div)}}></div>
</div>)}
});
ReactDOM.render(<C1 ref={function(ci) {console.log(ci)}} />,document.getElementById('app'));
上述例子的console结果都是指向ref所在的组件或元素，通过console的结果我们也可以发现，打印结果说明其指向的是真实的HTML DOM而非Virtual DOM。
如果不想用字符串ref，通过下面的方法也可以引用到你想引用的节点
var MyComponent = React.createClass({
handleClick: function() {
// focus()对真实DOM元素有效
this.textInput.focus();
},render: function() {
// ref中传入了一个回调函数，把该节点本身赋值给this.input
return (
<div>
<input type="text" ref={(thisInput) => {this.textInput = thisInput}} />
<input
type="button"
value="Focus the text input"
onClick={this.handleClick}
/>
</div>
);
}
});
ReactDOM.render(
<MyComponent />,document.getElementById('app')
);
小结
对无状态函数式组件不能使用
ref，因为这种组件并不会返回一个实例；ref有两种，字符串ref和函数式ref，不过字符串ref（通过refs调用这种）在未来可能被放弃，函数式ref是趋势；
使用行内函数表达式使用ref意味着每次更新React都会将其视为一个不同的函数对象，ref中的函数会以null为参数被立即执行（和在实例中调用不冲突）。比如说，当ref所指向的对象被卸载时，或者ref改变时，老的的ref函数都会以null为参数被调用。
-
对应ref的使用，React官方有两点建议：
重新渲染一个组件
我们已经接触了ReactDOM.render()方法，这个方法使得组件及其子组件被初始化渲染。在这次渲染之后，React为我们提供了两种方法来重新渲染某个组件
- @H_403_635@
每当一个组件被重新渲染时，其子组件也会被重新渲染（在Virtual DOM中发生，在真实DOM中表现出来）。不过需要注意的是Virtual DOM的改变并不是一定在真实DOM中就会有所表现。
在下面的例子中，ReactDOM.render(< App / >,app)初始化渲染了<App/>及其子组件<Timer/>，接下来的<App/>中的setInterval()事件调用this.setState()致使两个组件被重新渲染。在5秒后，setInterval()被清除，而在十秒后this.forceUpdate()被触发又使得页面被重新渲染。
var Timer = React.createClass({
render: function() {
return (
<div>{this.props.now}</div>
)
}
});
var App = React.createClass({
getInitialState: function() {
return {now: Date.now()};
},componentDidMount: function() {
var foo = setInterval(function() {
this.setState({now: Date.now()});
}.bind(this),1000);
setTimeout(function(){ clearInterval(foo); },5000);
//DON'T DO THIS,JUST DEMONSTRATING .forceUpdate()
setTimeout(function(){ this.state.now = 'foo'; this.forceUpdate() }.bind(this),10000);
},render: function() {
return (
<Timer now={this.state.now}></Timer>
)
}
});
ReactDOM.render(< App / >,app);
后文
从开始翻译本书到现在已有一个多月，基础的翻译工作终于算是告一段落。
《React Enlightenment》的第七章和第八章讲述的是React的props和state已由@linda102翻译完成。
在大概一个多月前看到本书原文时，我已经用了快五个月React，但是看完本书还是挺有收获。
翻译本书的初衷有两点，一是加强自己对React基础的理解，二是回想起，我在初学React时曾购买过国内的一本关于React的基础书籍，价格是四十多，但是其实看完并未有太多收获，该书大多就是翻译的官方文档，而且翻译的也不全面，并不那么容易理解，所以希望这篇译文对初学者友好，让初学者少走弯路。
由于翻译时间和水平都有限，译文内部不可避免存在一些不恰当的地方，如果您在阅读的过程中有好的建议，请直接提出，我会尽快修改。谢谢
