Components and Props

组件让你把UI分离成独立的，可再用的；

从概念上来讲：组件就像JavaScript函数，它接受任意的输入并且返回应该出现在屏幕上的React元素，

函数式的和类式的组件

这最简单的定义组件的方法是写一个JavaScript函数，

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

这个函数是一个有效的React组件因为它接受单一的"props" 数据参数并且返回一个React元素，我们可以称这样的组件为函数组件，因为它们是真正的函数。

你也可以用ES6 class来定义一个组件；

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定义这个组件为一个单独的对象，我们称为"props".；

例如，

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