作用：

组件表示页面的一部分，页面由组件组成

特点：

可复用 独立 可组合

创建组件：

函数组件：

  1. // 普通函数
  2. function Hello(){
  3.     return c
  4. }
  6. // 箭头函数
  7. const Hello = ()=>(<div>函数组件</div>)
  10. // 函数组件的约定
  11. // 1: 组件名以大写字母开头
  12. // 2:必须具有返回值(一般返回JSX) 如果返回null 不会对组件进行渲染

类组件：

  1. // 使用ES6中的class关键字创建组件
  3. class Hello extends React.Component{
  4.     render(){
  5.       return (<div>类组件</div>)
  6.   }
  7. }
  9. // 类组件的约定
  10. // 1:类名以大写字母开头
  11. // 2:必须继承 React.Component 父类 可以使用父类中的方法和属性
  12. // 3:必须有render方法和其返回值  返回null不渲染

组件抽离

为方便使用可以将组件抽离未单独的js文件

  1. // 创建js文件 文件名为组件名
  2. // 在文件中导入 react
  3. impoer React from 'react'
  5. // 创建组件
  6. const Hai = ()=>(<div>抽离的组件</div>)
  8. // 导出组件
  9. export default Hello

组件的渲染

渲染组件直接使用组件名作为标签名

  1. // 省略组件Hello
  2. ReactDOM.render(<Hello/>,document.getElementById('eoot'))
  4. // 如果是抽离出的组件应先导入在渲染
  5. import 'Hai' from './路径'
  6. ReactDOM.render(<Hai/>,document.getElementById('eoot'))