React基础 —— 组件和道具

一、什么是组件？

组件就像JavaScript函数。它们接受任意输入(称为“道具”)并返回描述屏幕上应显示内容的React元素。

二、如何定义组件

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

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

此函数是一个有效的React组件，因为它接受单个“props”（代表属性）对象参数与数据并返回一个React元素。我们将这些组件称之为“功能组件”，它们实际上是JavaScript函数。

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

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

三、渲染组件

以前我们只遇到代表DOM标记的React元素：

const element = <div />

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

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

当React看到表示用户定义组件的元素时，他将JSX属性作为单个对象传递给此组件。我们称这个对象为“道具”。

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

注意：React将以小写字母开头的组件视为DOM标记。始终使用大写字母启动组件名称。

四、组成组件

组件可以引用其输出中的其他组件。这使我们可以对任何细节级别使用相同的组件抽象。如下：我们可以创建一个App渲染Welcome很多次的组件：

function Welcome(props) {
    return <h1>Hello,{props.name}</h1>;
}
function App(){
    return (
        <div>
            <Welcome name="Sara" />
            <Welcome name="Cahel" />
            <Welcome name="Edite" />
        </div>
    );
}
ReactDOM.render(
    <App />,
    document.getElementById('root')
);

五、提取组件

不要害怕拆分成更小的组件。

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

我们将上面的代码进行提取，首先提取Avatar:

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

我们再提取一个UserInfo组件，该组件呈现Avatar用户名的下一个：

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

最后Comment可以简化为：

function Comment(props) {
    return (
        <div>
            <UserInfo user={props.author} />
            <div className="Comment-text">
                {props.text}
            </div>
            <div>
                {formatDate(props.date)}
            </div>
        </div>
    );
}

六、道具是只读的

无论是将组件声明为函数还是类，它都不能修改自己的道具。

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

//这个函数称为“纯”，因为它们不会尝试更改其输入，并且始终为相同的输入返回相同的结果，相比之下，这个函数是不纯的，因为它改变了自己的输入：

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

所有React组件必须像其道具一样充当纯函数。