React从入门到精通系列之(4)组件化和Props传递

作者:日期:2017-02-09 19:58:25 点击:105 组件化 属性

 

四、组件化和属性(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组件响应用户操作,网络响应和其他任何内容,随时间更改其输出,而不违反此规则。

上一篇: React从入门到精通系列之(3)渲染元素

下一篇: React的一些特性概括