美文网首页React
React 组件 & Props

React 组件 & Props

作者: Rising_life | 来源:发表于2019-03-29 18:01 被阅读0次

    组件可以将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元素也可以是用户自定义的组件:

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

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

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

    解析:

    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应用中,按钮、表单、对话框、整个屏幕的内容等,这些通常都被表示为组件。

    我们可以创建一个App组件,用来多次渲染Welcome组件:

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

    注意:

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

    提取组件

    我们可以将组件切分为更小的组件,

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

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

    首先,我们来提取Avatar组件:

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

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

    现在我们可以对Comment组件做一些小小的调整:

    提取 UserInfo 组件,用来渲染Avatar 旁边的用户名:

    进一步简化Comment组件:

    Props的只读性

    无论是使用函数或是类来声明一个组件,它决不能修改它自己的props。来看这个sum函数:

    function sum(a, b) {

        return a + b;

      }

    类似于上面的这种函数称为“纯函数”,它没有改变它自己的输入值,当传入的值相同时,总是会返回相同的结果。

    与之相对的是非纯函数,它会改变它自身的输入值:

    React是非常灵活的,但它也有一个严格的规则:

    function withdraw(account, amount) {

                    account.total -= amount;

     }

    所有的React组件必须像纯函数那样使用它们的props。

    State可以在不违反上述规则的情况下,根据用户操作、网络响应、或者其他状态变化,使组件动态的响应并改变组件的输出。

    相关文章

      网友评论

        本文标题:React 组件 & Props

        本文链接:https://www.haomeiwen.com/subject/jyxrbqtx.html