zoukankan      html  css  js  c++  java
  • 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组件看起来更加简洁。

    只研朱墨作春山
  • 相关阅读:
    利用DTrace实时检测MySQl
    改进MySQL Order By Rand()的低效率
    RDS for MySQL查询缓存 (Query Cache) 的设置和使用
    RDS For MySQL 字符集相关说明
    RDS for MySQL 通过 mysqlbinlog 查看 binlog 乱码
    RDS for MySQL Mysqldump 常见问题和处理
    RDS for MySQL Online DDL 使用
    RDS MySQL 表上 Metadata lock 的产生和处理
    RDS for MySQL 如何使用 Percona Toolkit
    北京已成为投融资诈骗重灾区:存好骗子公司黑名单,谨防上当!
  • 原文地址:https://www.cnblogs.com/guolintao/p/9003049.html
Copyright © 2011-2022 走看看