### 二、复合组件 > 一个组件可以拆分为多个更小的组件，这样能更便于小组件的重复使用。 ``` class Comment extends React.Component { 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,date作为props，并用于描述一条评论。但它的耦合性很高，不利于利用其中的某个部分，因此我们可以对它内部进行组件封装 #### 2.1 提取头像组件Avatar ``` class Avatar extends Component{ return ( <img className="Avatar" src={props.user.avatarUrl} alt={props.user.name} /> ) } # 简化原Comment组件 class Comment extends React.Component { 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> ); } ``` - Avatar组件不关心它在Comment中是如何渲染的 - 建议从组件本身的角度来命名props而不是它被使用的上下文环境 #### 2.2 提取UserInfo组件 ``` class UserInfo extends React.Component{ render(){ return ( <div className="userInfo"> <Avatar user={props.user} /> <div className="userInfo-name">{props.user.name}</div> </div> ) } } # 再次简单Comment组件 class Comment extends React.Component { return ( <div className="Comment"> <UserInfo user={props.author} /> <div className="Comment-text"> {props.text} </div> <div className="Comment-date"> {formatDate(props.date)} </div> </div> ); } ``` > 提取组件可能看起来是一个繁琐的工作，但是在大型的 Apps 中可以回报给我们的是大量的可复用组件。一个好的经验准则是如果你 UI 的一部分需要用多次 (Button，Panel，Avatar)，或者本身足够复杂(App，FeedStory，Comment)，最好的做法是使其成为可复用组件。