React入门四：React组件的使用

这是我参与8月更文挑战的第三天

1.组件介绍

• 使用React就是在使用组件
• 组件表示页面中的部分功能
• 组合多个组件实现完整的页面功能
• 特点：可复用、独立、可组合

在这里插入图片描述

2. 组件的两种创建方式 2.1 使用函数创建组件

• 使用js的函数（箭头函数）创建的组件
• 约定1：函数名称必须以大写字母开头              如果是小写字母开头则报错

在这里插入图片描述

• 约定2：函数组件必须有返回值，表示该组件的结构 (return null 也可以 只是什么都不渲染，但是不会报错)

在这里插入图片描述

• 渲染函数组件：用函数名作为组件标签名
• 组件标签也可以是双标签

function Hello(){
 return(
     <div>这是函数组件</div>
 )
}
ReactDOM.render(<Hello/>,document.getElementById('root'))

2.2 使用类创建组件

• 类组件：使用ES6 的class创建的组件
• 约定1：类名称必须以大写字母开头
• 约定2：类组件继承自React.Component父类，从而可以使用父类中提供的方法或属性
• 约定3：类组件必须提供render() 方法
• 约定4：render()方法必须有返回值 表示该组件的结构

class Hello extends React.Component{
    render(){
      return <div>Hello class Component！</div>
    }
}
ReactDOM.render(<Hlello/>,document.getElementById('root'))

2.3 抽离为独立的JS文件

思考：项目中的组件多了后，该如何组织这些组件那？ 选择1：将所有组件都写在一个js文件中 选择2：将所有组件都放到单独的js文件中 组件作为一个独立的个体，一般会放到一个单独的js文件中。

• 创建Hello.js
• 在Hello.js中导入React
• 创建组件（函数 或 类）
• 在Hello.js中导入该组件
• 在index.js中导入Hello组件
• 渲染组件

hello.js

import React from 'react'
class Hello extends React.Component{
  render(){
    return(
      <div>这是第一个组件</div>
    )
  }
}
// 导出
export default Hello;

index.js

// ES6 中模块化语法
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// 导入Hello组件
import Hello from './Hello'
ReactDOM.render(<Hello/>,document.getElementById('root'))