React 组件复合

Posted 2020-08-29

React组件复合

·　　通过React写组件时，应当尽可能地将组件分为更小的更多的组件，然后再复合组件。

　　比如下面的评论组件就是一个组件，一个庞大的组件，这时我们还没有将之分解，更没有复合：　

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（字符串）和一个data(data对象)作为props。

　　因为这样的复杂嵌套关系导致如果我们需要修改这个组件变得非常棘手，并且在这种情况下，我们很难能够重用其中的小的组件，因此，这时候我们就需要将这个大的组件分解为几个小的组件，这样对于大的app，我们的工作就会变得越来越容易。

　　我们将之分解如下：

　　

function formatDate(date) {
  return date.toLocaleDateString();
}

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

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

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

const comment = {
  date: new Date(),
  text: ‘I hope you enjoy learning React!‘,
  author: {
    name: ‘Hello Kitty‘,
    avatarUrl: ‘http://placekitten.com/g/64/64‘
  }
};
ReactDOM.render(
  <Comment
    date={comment.date}
    text={comment.text}
    author={comment.author} />,
  document.getElementById(‘root‘)
);

　　这样，我们就把一个大的组件分解成了几个小的组件并且组合起来，这样更有利于代码的重用以及后期的维护。