Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Function & Class Components

When defining a component, you can use either a function or a class. Such as:

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

This one up here is a function.

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

This one is defined using classes. The effect is the same.

Extracting Components

Here is a Comment component. How can I simplify it by extracting the component?

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>
    );
}
Copy the code

First extract an Avatar component

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

With the Avatar component, the code can be optimized to:

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>
    );
}
Copy the code

When I first saw the code, it was a little confusing because I didn’t know props was actually an object. React passes the props {user: {props. Author}} object when starting Avatar. In this object, the key is user and the value is {props. Author}; SRC ={props. User. AvartarUrl}, props. User ={props.

Extract a UserInfo component

Next, we extract a UserInfo component as we did the Avatar component above.

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

After extraction, the Comment component can be simplified as follows:

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>
    );
}
Copy the code

Let me go over the details again for the Comment component above:

  • React call UserInfo component, the props passed in is{user: {props.author}}This object;
  • React Call Avatar component, props props is{user: {props.author}}This object;