创建React组件

1.React 组件介绍

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

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

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

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

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

2.1使用函数创建组件

• 函数组件：使用JS的函数创建组件；

• 约定1：函数名称必须以大写字母开头， React 据此区分 组件 和 普通的React 元素；

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

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

2.2使用类创建组件 

使用ES6语法的class创建的组件；

约定1：类名称也必须要大写字母开头；

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

约定3：类组件必须提供 render() 方法；

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

2.3抽离为独立 JS 文件 

• 思考：项目中组件多了之后，该如何组织这些组件？

• 选择一：将所有的组件放在同一个JS文件中

• 选择二：将每个组件放到单独的JS文件中

• 组件作为一个独立的个体，一般都会放到一个单独的JS文件中