React的组件

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

一个React应用就是由一个个的组件组成的

创建组件的两种方式

函数组件

不能定义状态

 
function Header(){
    return <div>我是标题组件</div> 
}
// 函数名就是组件名
ReactDom.render(<Header></Header>, document.getElementById('root'))
                
// 注意:
1. 组件名首字母必须大写. 因为react以此来区分组件和react元素
2. 必须有返回值.返回的内容就是组件呈现的结构, 如果返回值为 null，表示不渲染任何内容
3. 组件内部如果有多个标签,必须使用一个根标签包裹.只能有一个根标签

类组件

可以定义状态(状态: 组件内部私有的数据)

class Header extends React.Component{
    render(){
    	return <div>我是标题组件</div>
    }
}
// 如果组件没有子节点,也可以写成自闭和标签
ReactDom.render(<Header />, document.getElementById('root'))

//注意: 
1. 组件名首字母必须大写.
2. 类组件中必须要声明一个render函数
3. render函数中必须有返回值.
4. 类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或属性 
5. 组件内部如果有多个标签,必须使用一个根标签包裹.只能有一个根标签