React学习分享（二）

各位好，上一篇文章我们介绍了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>
  );
}

这样看起来是不是更加清晰明了？

下一节，我们讲的是组件的状态和生命周期，这是重中之重，所以我打算单独作为一节来将。

好的，先写这么多。如果对你的学习有用，请关注我~~