React组件定义
在React中，多数使用组件，通过组件将UI拆分为独立可复用的代码片段，实现一处组件多处使用。React组件接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
函数组件与class组件
- 函数组件：一个函数即可实现一个组件，如：
function Hello(props) {
return <h1>Hello, {props.name}</h1>;
}
- class组件：ES6中通过继承React.Component实现一个组件，如：
class Hello extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
组件渲染
React中，React元素可以是普通的DOM标签，也可以是一个组件，当React元素是一个组件时它会将JSX接收的属性转换为单个对象传递给组件，而这个对象就被成为"Props"。如
// 定义一个名称为Welcome的组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 创建一个React元素，这个元素使用了Welcome组件，并且传入了name参数
const element = <Welcome name="Sara" />;
// 渲染组件
ReactDOM.render(
element,
document.getElementById('root')
);
- 调用 ReactDOM.render() 函数，并传入
作为参数。 - React 调用 Welcome 组件，并将 {name: 'Sara'} 作为 props 传入。
- Welcome 组件将
<h1>Hello, Sara</h1>元素作为返回值。 - React DOM 将 DOM 高效地更新为
<h1>Hello, Sara</h1>
在React中，组件的名称必须以大写字母开头，且使用也必须在作用域内
组合组件
在React中，可以像嵌套DOM节点一样嵌套组件，比如：
// 定义一个名称为Welcome的组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 定义一个名称为Hello的组件，并在其中使用Welcome组件
function Hello(props) {
return (
<div>
<Welcome name="world" />
<h2>age is {props.age}</h2>
</div>
)
}
// 定义一个名称为App的组件，并在其中使用Welcome、Hello组件
function App() {
return (
<div>
<Hello age="12"/>
<Welcome name="Cahal" />
</div>
);
}
// 渲染组件，将App组件作为了React元素
ReactDOM.render(
<App />,
document.getElementById('root')
);
实现效果：
Props 的只读性
在React中组件无论是使用函数进行声明还是使用ES6的class进行声明，都不可以更改props。但是在实际的应用当中，总是需要去操作数据进行更改，且应用程序的 UI 是动态的，并会伴随着时间的推移而变化。因此React中引入了"state"的概念，在不违反上述规则的情况下，state 允许 React 组件随用户操作、网络响应或者其他变化而动态更改输出内容。
总结
通过上述内容，了解到了React中组件的定义，通过定义一个纯函数，并返回React元素即可定义一个简单组件，也可以使用class通过继承React的Component定义一个组件。同时组件支持嵌套使用，将复杂的组件进行提取为多个简单的组件，可以高效的实现组件复用。在组件中，Props参数不可改变，它将从外部接收的属性转换为对象供组件内部使用。
