React基础-组件&Props
概念
React组件可将UI切分成一些独立的、可复用的部件，这样修改局部的样式就不会造成全局污染，也方便了团队协做。
React组件从概念上看就像是函数，它可接收任意的输入值（props）,并返回一个在页面上需要展示的React元素。
定义组件
（1）函数定义组件（JavaScript函数）
function Welcome (props) {
return <h1>Hello, {props.name}</h1>;
}
实例代码：
页面效果：
（2）ES6 class 定义组件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
自定义组件
// 自定义组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcom name="LJ" />;
ReactDOM.render(
element,
document.getElementById('root')
);
! 注意：组件名称必须以大写字母开头。
组合组件
组件可以在它输出中引用其他组件。在React应用中，按钮、表单、对话框以及整个屏幕的内容都可被表示为组件。
// 创建一个App组件，用来多次渲染Welcom组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function MyApp() {
return (
<div>
<Welcome name="LJ" />
<Welcome name="Sara" />
<Welcome name="Cahal" />
</div>
);
}
ReactDOM.render(<MyApp />,document.getElementById('root'));
! 注意：组件名称必须以大写字母开头。
! 注意：组件返回值只能有一个根元素。
Props的只读性
无论是使用函数或是类来声明一个组件，它都不能修改它自己的props值。
// 纯函数
function sum (a,b){
return a+b;
}
类似于以上的这种函数称为"纯函数"，它没有改变它自己的输入值，当传入的值相同时，总是会返回相同的结果。
// 非纯函数
funciton winthdraw (account,amount){
account.total -= amount;
}
！注意：React是非常灵活的，但它也有一个严格的规则——所有的React组件必须像纯函数那样使用它们的props。
参考网址：
