React组件

1、React 组件介绍

　　组件是 React 的一等公民，使用React就是在用组件。

　　组件表示页面中的部分功能

　　组合多个组件实现完整的页面功能

　　特点：可复用、独立、可组合

2、React 组件的两种创建方式

　　2.1 、使用函数创建组件

　　　　函数组件：使用JS的函数（或箭头函数）创建的组件。

　　　　约定1：函数名称必须以大写字母开头

　　　　约定2：函数组件必须有返回值，表示该组件的结构

　　　　如果返回值为null，表示不渲染任何内容

　　　　function Hello() {

　　　　　　return (

　　　　　　　　<div>这是我的第一个函数组件</div>

　　　　　　)

　　　　}

　　　　渲染函数组件：用函数名作为标签名

　　　　ReactDOM.render(<Hello />, 挂载点)

　　　　组件标签可以是单标签也可以是双标签

　　2.2、使用类创建组件

　　　　类组件：使用ES6的class创建的组件

　　　　约定1：类名称必须以大写字母开头

　　　　约定2：类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或属性

　　　　约定3：类组件必须提供 render() 方法，表示该组件的结构

　　　　约定4：render() 方法必须有返回值，表示该组件的结构

　　　　　　class Hello extends React.Component  {

　　　　　　　　render () {

　　　　　　　　　　return (

　　　　　　　　　　　　<div>Hello class Component !</div>

　　　　　　　　　　)

　　　　　　　　}

　　　　　　}

　　　2.3、抽离为独立 JS 文件

　　　　1、创建Hello.js

　　　　2、在Hello.js 中导入 react

　　　　3、创建组件（函数或类）

　　　　4、在 Hello.js 中导出该组件

　　　　5、在 index.js 中导入 Hello 组件

　　　　6、渲染组件