React3.组件基础

Posted 2022-05-17 阿拉的梦想

【React】3.组件基础

• 1. 组件介绍
• 2. React组件的两种创建方式
• • 2.1 通过函数创建组件
  • 2.2. 使用类创建组件
• 3. 抽离为独立JS文件

1. 组件介绍

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

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

2.1 通过函数创建组件

• 函数组件：使用 JS 的函数（或箭头函数）创建的组件
• 规定1：函数名称必须以大写字母开头
• 规定2：函数组件必须有返回值，表示该组件的结构
• 如果返回值为 null ，表示不渲染任何内容

代码示例：

import React from 'react'
import ReactDOM from 'react-dom/client'

//定义一个函数作为组件，首字母大写，有返回值
function Fun1()
 // return "函数组件"
 //return null
 //或者返回jsx
 return (
   <div>函数组件</div>
 )

//箭头函数也可以
const Fun2 =()=>(
  <div>函数组件2</div>
)

const root = ReactDOM.createRoot(document.getElementById("root"))
//使用组件,用标签符号来调用组件
root.render(<Fun1/>)

使用函数创建组件

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

效果

2.2. 使用类创建组件

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

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

import  render  from '@testing-library/react'
import React from 'react'
import ReactDOM from 'react-dom/client'

/**
 * 定义一个类组件
 */
class Fun3 extends React.Component 
  render() 
    //return null;

    return (
      <div>类组件</div>
    )
  


const root = ReactDOM.createRoot(document.getElementById("root"))
//使用组件,用标签符号来调用组件
root.render(<Fun3 />)

3. 抽离为独立JS文件

步骤：

1. 创建Hello.js
2. 在Hello.js 中导入React
3. 创建组件（函数或类）
4. 在Hello.js 中导出该组件
5. 在index.js 中导入Hello 组件
6. 渲染组件

在common文件夹下创建Fun3.js

import React from 'react'


/**
 * 定义一个类组件
 */
 class Fun3 extends React.Component 
    render() 
      //return null;
  
      return (
        <div>类组件,独立js</div>
      )
    
  

  //导出组件，以供使用
  export default Fun3

index.js中使用组件

import  render  from '@testing-library/react'
import React from 'react'
import ReactDOM from 'react-dom/client'

//导入组件
import Fun3 from './common/Fun3'

const root = ReactDOM.createRoot(document.getElementById("root"))
//使用组件,用标签符号来调用组件
root.render(<Fun3 />)

效果：