组件 & Props
React 组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。
函数组件与 class 组件
定义组件最简单的方式就是编写 JavaScript 函数：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
ReactDOM.render(
Welcome(props),
document.getElementById('root')
)
同时还可以使用 ES6 的 class 来定义组件：
在使用Class来定义组件时，需要注意React 对于 Class 和function的区别，具体可以参考下面的文章：juejin.cn/post/684490… 。
渲染组件
React 元素也可以是用户自定义的组件：
const element = <Welcome name="Sara" />;
当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。
组合组件
组件可以在其输出中引用其他组件。这就可以让我们用同一组件来抽象出任意层次的细节。按钮，表单，对话框，甚至整个屏幕的内容：在 React 应用程序中，这些通常都会以组件的形式表示。
例如，我们可以创建一个可以多次渲染 `Welcome` 组件的 `App` 组件：
提取组件
将组件拆分为更小的组件。参考如下 Comment 组件：
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>
);
}
