珠峰VUE快速入门与实战视频下载地址：https://pan.baidu.com/s/1pKB97sR

React快速入门与实战视频下载地址：https://pan.baidu.com/s/1nv7QaAP

四、组件化和属性(props)

组件允许您将UI拆分为独立的可重用的部分，并单独地考虑每个部分。从概念上讲，组件就像JavaScript函数。 它们接受任意输入（称为“props”），并返回应该出现在屏幕上的React元素。

功能性组件(functional)和类组件(class component)

定义组件的最简单的方法是编写JavaScript函数：

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

此函数是个有效的React组件，因为它接收一个带有数据的“props”对象作为参数，并返回一个React元素。 我们把这样的组件称为“功能性组件(functional)”，因为它们是个JavaScript函数。

您还可以使用ES6类来定义组件：

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

上述两个组件从React的角度来看是等效的。

类组件有一些额外的功能，我们将在下面的章节中讨论。 在那之前，我们将简单地使用功能组件。

渲染一个组件

以前，我们只遇到使用DOM标签的React元素：

const element = <div />;

但是，元素也可以表示用户自定义的组件：

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

当React看到表示用户定义组件的元素时，它将该JSX标签的所以属性放到一个对象中传递给组件。 我们称这个对象为“props”。

例如，此代码在页面上呈现“Hello，zhangyatao”：

function Welcome(props) {     return <h1>Hello, {props.name}</h1>; }  const element = <Welcome name="zhangyatao" />; ReactDOM.render(     element,     document.getElementById('root') );

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

1. 首先调用ReactDOM.render()方法，并处理<Welcome name =“zhangyatao”/>组件。

2. React使用{name：'zhangyatao'}作为props调用Welcome组件。

3. 我们的Welcome组件返回一个<h1> Hello，zhangyatao </ h1>元素作为结果。

4. React DOM有效地根据<h1> Hello，zhangyatao </ h1>来更新DOM。

警告
组件名称始终使用·首字母大写·。
例如，<div />表示一个DOM标签，但<Welcome />表示一个组件，并要求Welcome必须和ReactDOM在一个作用域内。

编写组件

组件可以在其返回值中引用去其他组件。 这允许我们对任何级别的细节使用相同的组件抽象。 一个按钮，一个表单，一个对话框，一个屏幕：在React应用程序中，所有这些通常表示为组件。
例如，我们可以创建一个App组件，让它渲染多个Welcome组件：

function Welcome(props) {    return <h1>Hello, {props.name}</h1>; }  function App() {    return (        <div>            <Welcome name="zhangyatao" />            <Welcome name="jiangyanyun" />            <Welcome name="pangyun" />        </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 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>    ); } 

它接受author（作者），text（内容）和date（日期）作为props，用来描述社交媒体网站上的评论。
这个组件可能很难改变，因为所有的嵌套，它也很难重用其中的单个部分。 让我们从中提取几个组件。

首先，我们将提取avatar：

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

avatar不需要知道它正在Comment中呈现。 这就是为什么我们给它的prop一个更通用的名称：user而不是author。
我们建议从组件自己的角度来命名props，而不是使用它的上下文。

我们现在可以对Comment组件做一点点简化：

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

接下来，我们将提取一个UserInfo组件，该组件在用户名称旁边呈现一个avatar:

function UserInfo(props) {     return (         <div className="UserInfo">             <avatar uer={props.user} />             <div className="UserInfo-name">                 {props.user.name}             </div>         </div>     ); }

这使我们可以进一步简化Comment组件：

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

让一个个可重用组件在大型应用程序中交付使用的过程中，抽离组件起初可能看起来像又脏又累的活儿。 所以有一个好的经验法则：如果UI的一部分被使用了好几次（按钮，面板，头像），或者内部比较复杂的东西（App，FeedStory，评论），一个可重用的组件对它来说可以达到最大的发挥空间。

Props是只读的

无论是将组件声明为功能组件还是类组件，它都不能修改自己的props。 考虑这个计算参数总和的函数：

function sum(a, b) {     return a + b; }

这样的函数被称为“纯函数”，因为它们不会改变它们的参数值，并且对于相同的输入总是返回相同的结果。
相反，这个函数是不纯的，因为它改变自己的参数：

function withdraw(account, amount) {     account.total -= amount; }

React非常灵活，但它有一个严格的规则：
所有React组件必须像它们的porps的纯函数那样运行。

当然，应用中的UI大部分是动态的，随时间变化。 在下一节中，我们将介绍一个“state”的新概念。 状态允许React组件响应用户操作，网络响应和其他任何内容，随时间更改其输出，而不违反此规则。