组件可以将ui切分成一些独立的，可复用的部件。
组件从概念上来说是函数，它可以接收任意的输入值props，并返回一个需要在页面上展示的React元素。
1.组件(函数定义、类定义)
定义的组件名字开头一定要大写，否则不识别为组件
//函数定义
function Welcome(props){
return <h1>hello {props.name}</h1>；
}
//ES6类定义组件
class Welcome extends React.Component{
render(){
return <h1>hello，{this.props.name}</h1>
}
}
以上的2个组件在React中是相同的。
但是有他们的优劣不同。
2.组件渲染
React元素可以是DOM标签，也可以是自定义组件。
如果React遇到的元素是用户自定义的组件，他会将jsx属性作为单个对象传递给该组件。这个对象称为props，比如这里的props的key是name，值是salar
function Welcome(props){
return <h1>hello,{props.name}</h1>
}
const element = <Welcome name="kolento" />
ReactDOM.render(
element,document.getElementById('root')
)
渲染步骤
①首页使用es6 class定义一个Welcome的组件
②把组件复制给 element，并且用它调用了ReactDOM方法
③React将props{name:"kolento"}传入并且调用组件
④组建中获得props，把name显示在组件节点中并且返回
⑤ReactDOM最后将DOM进行更新完成
警告:
组件名称必须以大写字母开头。
例如，<div /> 表示一个DOM标签，但 <Welcome /> 表示一个组件，并且在使用该组件时你必须定义或引入它。
3.组合组件
组件可以在他的输出中引用其他组件，同一个组件可以抽象出任意层次的细节，在React应用中，表单，按钮，整个屏幕的内容，都可以被表示为组件。
//定义一个Welcome组件
function Welcome(){
return (<h1>hello,{props.name}</h1>)
}
//定义一个App组件,并且嵌套Welcome组件
function App(){
return (
<div>
<Welcome name="aaaa" />
<Welcome name="bbbb" />
<Welcome name="cccc" />
</div>
)
}
//挂载相应的组件和内容
ReactDOM.render(
<App />,document.getElementById('root')
)
// hello aaaa
// hello bbbb
// hello cccc
警告:
组件的返回值只能有一个根元素。这也是我们要用一个<div>来包裹所有<Welcome />元素的原因。
4.提取组件
原始组件demo，包含用户头像、姓名、评论和时间4个部分
//comment代表获取的数据
const comment = {
date: new Date().toLocaleTimeString(),
text: 'I hope you enjoy learning React!',
author: {
name: 'Hello Kitty',
avatarUrl: 'http://placekitten.com/g/64/64'
}
};
//此处定义一个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">{props.date}</div>
</div>
)
}
//挂载ReactDOM上，并且传入comment数据进入组件显示在页面上
ReactDOM.render(
<Comment date={comment.date} text={comment.text} author={comment.author}/>,
document.getElementById('root')
)
优化组件，拆分组件利于复用
在大型应用中，组件的复用与提取可以提高工作效率
//头像组件
function Avatar(props){
return (
<img className="Avatar" src={props.user.avatarUrl} alt={props.user.name}/>
)
}
// 提取useinfo组件
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">{props.date}</div>
</div>
)
}
ReactDOM.render(
<Comment date={comment.date} text={comment.text} author={comment.author}/>,
document.getElementById('root')
)
5.props的只读性
无论使用函数或者类声明一个组件，他都不能修改他们的props属性和值
所有的React必须像纯函数那样使用它们的props
纯函数：
不能通过函数中的运算修改他们的输入值
