React 组件&Props

组件&Props

组件&Props

组件可以将UI切分成一些独立的、可复用的部件，这样你就只需要专注于构建每一个单独的组件。

组件从概念上看就像是函数，它可以接受任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。

函数定义/类定义组件

定义一个组件最简单的方式是使用javascript函数：

function Welcome(props){
    return <h1>hello,{props.name}</h1>;
}

该函数是一个有效的React组件，它接受一个单一的“props”对象，并返回一个React元素。我们之所以称这种类型的组件为函数定义组件，是因为从字面上来看，它就是一个javascript函数。

你也可以使用ES6 class来定义一个组件:

class Welcome extends React.Component{
    render(){
        return <h1>hello,{this.props.name}</h1>;
    }
}

上面两个组件在React中是相同的。

组件渲染

在前面，我们遇到的React元素都只是DOM标签：

const element = <div/>;

然而React元素也可以是用户自定义的组件：

const element = <Welcome name="Sara"/>;

当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”。

例如，这段代码会在页面上渲染出“hello，Sara”：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

这个例子中发生了这些事：

1. 我们对<Welcome name=Sara/>元素调用了ReactDOM.render()方法。
2. React将{name：'Sara'}作为props传入并调用Welcome组件。
3. Welcome组件将<h1>Hello, Sara</h1>元素作为结果返回。
4. React DOM将DOM更新为<h1>Hello, Sara</h1>。

注意：组件名称必须以大写字母开头。
例如，<div/>表示一个DOM标签，但<Welcome />表示一个组件，并且在使用该组件时必须定义或引入它。

组合组件

组件可以在它的输出中引用其他组件，这就可以让我们用同一组件来抽象出任意层次的细节。在React应用中，按钮，表单，对话框，整个屏幕的内容等，这些通常被表示为组件：

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')
);

通常一个新的React应用程序的顶部是一个App组件。但是，如果要将React集成到现有应用程序中，则可以从下而上使用像Button这样的小组件作为开始，并逐渐运用到视图层的顶部。

注意：组件的返回值只能有一个根元素。这也是我们要用一个div来包裹所有<Welcome/>元素的原因。

提取组件

你可以将组件且分为更小的组件，这没什么好担心的。

例如下面的Comment组件：

function Comment(props){
    return (
        <div ClassName="Comment"> 
            <div className="userInfo">
                <img 
                    src = {props.author.avatatUrl}
                    alt = {props.author.name}
                />
            </div>
            <div className="userInfo-name">{props.author.name}</div>
        <div/>
        <div className="Comment-text">
            {props.text}
        </div>
        <div className="Comment-date">
            {formatDate(props.date)}
        </div>
    )
}

这个组件接受author对象，text字符串，以及date时间对象作为props，用来描述一个社交媒体网站上的评论。

这个组件由于嵌套，变得难以被修改，可复用的部分也难以被复用。所以我们从这个组件中提取出一些小组件。

首先，提取Avatar组件：

function Avatar(props){
    return (
        <img  className="Avatar"
            src = {props.user.avatatUrl}
            alt = {props.user.name}
        />
    )
}

Avatar作为Comment的内部组件，不需要知道是否被渲染。因此我们将author改为一个更通用的名字user。

我们建议从组件自身角度来命名props，而不是根据组件的上下文命名。

现在我们可以对Comment组件做出以下小小的调整：

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
       <Avatar user={props.author} /> //抽离出的Avatar组件
        <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>
  );
}

下面，提取一个UserInfo组件，用来渲染Avatar旁边的用户名：

function UserInfo(props){
    return (
        <div className="UserInfo">
            <Avatar user={props.user} />
            <div userInfo-name>
                {props.user.name}
            </div>
        </div>
    )
}

提取组件后使Comment组件看起来更加简洁。