React.js 实战 - 组件 & Props

0 联系我

1. Java开发技术交流Q群

2.完整博客连接

3.我的知乎

4.gayhub

组件能够将UI切分红一些独立的、可复用的部件,这样你就只需专一于构建每个单独的部件.

组件从概念上看就像是函数，它能够接收任意的输入值（称之为“props”），并返回一个须要在页面上展现的React元素.

1 函数定义/类定义组件

定义一个组件最简单的方式是使用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中是相同的.

咱们将在[下一节]讨论类的一些额外特性。在那以前，咱们都将使用较为简洁的函数定义组件。

2 组件渲染

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

const element = <div />;复制代码

然而，React元素也能够是用户自定义的组件

const element = <Welcome name="Sara" />;复制代码

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

例如,这段代码会在页面上渲染出”Hello,Sara”:

咱们来回顾一下在这个例子中发生了什么：

• 咱们对<Welcome name="Sara" />元素调用了ReactDOM.render()方法
• React将{name: 'Sara'}做为props传入并调用Welcome组件
• Welcome组件将<h1>Hello, Sara</h1>元素做为结果返回。
• React DOM将DOM更新为<h1>Hello, Sara</h1>。

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

3 组合组件

组件能够在它的输出中引用其它组件，这就可让咱们用同一组件来抽象出任意层次的细节.
在React应用中，按钮、表单、对话框、整个屏幕的内容等，这些一般都被表示为组件.

例如，咱们能够建立一个App组件，用来屡次渲染Welcome组件

一般，一个新的React应用程序的顶部是一个App组件.
可是，若是要将React集成到现有应用程序中，则能够从下而上使用像Button这样的小组件做为开始，并逐渐运用到视图层的顶部.

组件的返回值只能有一个根元素。这也是咱们要用一个<div>来包裹全部<Welcome />元素的缘由。

4 提取组件

能够将组件切分为更小的组件

例如，来看看这个Comment组件

function formatDate(date) {
  return date.toLocaleDateString();
}

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
             src={props.author.avatarUrl}
             alt={props.author.name} />
        <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>
  );
}

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'http://placekitten.com/g/64/64'
  }
};
ReactDOM.render(
  <Comment
    date={comment.date}
    text={comment.text}
    author={comment.author} />,
  document.getElementById('root')
);复制代码

这个组件接收author(对象)、text(字符串)、以及date(Date对象)做为props，用来描述一个社交媒体网站上的评论.

这个组件因为嵌套，变得难以被修改，可复用的部分也难以被复用。因此让咱们从这个组件中提取出一些小组件。

首先，咱们来提取Avatar组件

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}复制代码

Avatar做为Comment的内部组件，不须要知道是否被渲染.
所以咱们将author改成一个更通用的名字user。

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

如今咱们能够对Comment组件作一些小小的调整：