各位好，上一篇文章我们介绍了React基础元素的使用和JSX等一些知识,现在我们继续来学习React。
组件
组件的概念想必大家都已经明白，就是一些常用功能的模块化，可以大大提高项目构建速度。并且组件将UI分割成独立的、可重用的部分，并将问题集中到一个地方。
从概念上来讲，React的组件有些像JS的Function，举个栗子：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
看起来和函数一模一样。下面我们用ES6的Class来创建组件：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
将两个组件渲染在页面之后，在视觉效果上完全一样，但是后者具有更多的特性，我们后面再详细讨论。
注意：组件名称一定要以大写字母开头。
渲染组件
在上一篇文章中，我们介绍了React element可以代表一个标签：
const element = <h1>Hello, world</h1>;
其实她也可以代表一个组件：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
类似的，我们使用 ReactDOM.render(）将其渲染在页面上。
你可以在CodePen上尝试一下，会在页面打印出“Hello,Sara”。
组装组件
组件的输出能够嵌套别的组件，这给了我们相当灵活的编码空间，你可随意的设计和抽象你的页面组件结构。
我们举个简单的例子：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
你可以在CodePen上尝试一下，会在页面打印出
Hello,Sara
Hello,Cahal
Hello,Edite
提取组件
不要害怕细化你的代码，通常有效的提取能够大大提高代码的可阅读行和可维护性。举个例子：
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<Avatar user={props.author} />
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
这是一个用户评论的组件，其实这么分也能用，但是还是有点麻烦，现在我们再来细化一下：
function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);
}
function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
这样看起来是不是更加清晰明了？
下一节，我们讲的是组件的状态和生命周期，这是重中之重，所以我打算单独作为一节来将。
好的，先写这么多。如果对你的学习有用，请关注我~~
