React组件的创建方式

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

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

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

🍑组件的创建方式

（1）函数创建组件

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

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

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

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

代码示例：

// 导入react
import React from 'react'
import ReactDOM from 'react-dom'

// 编写函数组件方式一
function Hello(){
    return(
        <div>编写函数组件</div>
    )
}

// 渲染组件
ReactDOM.render(<Hello />, document.getElementById('root'))

// 导入react
import React from 'react'
import ReactDOM from 'react-dom'

// 箭头函数创建的函数组件方式二
const Hello = () => <div>箭头函数创建的函数组件</div>
// 渲染组件
ReactDOM.render(<Hello />, document.getElementById('root'))

 （2）类组件

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

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

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

• 约定3：类组件必须提供 render 方法

• 约定4：render方法中必须要有return返回值

代码示例：

// 导入react
import React from 'react'
import ReactDOM from 'react-dom'

//创建类组件
class Hello extends React.Component{
    render(){
        return(
            <div>类组件</div>
        )
    }
}
//渲染组件
ReactDOM.render(<Hello/>,document.getElementById('root'))

---

🍑把每个组件变成单独的JS文件

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

步骤：

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

代码示例

 文件夹目录

// Hello.js文件
import React from "react";

//创建组件
class Hello extends React.Component{
    render(){
        return(
            <div>单个js文件的组件</div>
        )
    }
}

//导出组件
export default Hello

//index.js文件
// 导入react
import React from 'react'
import ReactDOM from 'react-dom'
//导入组件
import Hello from './Hello'
// 渲染组件
ReactDOM.render(<Hello/>,document.getElementById('root'))

---

别在最好的年纪，辜负最好的自己！