从0开始学习React-4-初识组件

什么是组件？

• React中将页面分割为各个组件，然后通过组件堆砌复用的方式，最终形成了页面
• 在React项目中，一般将src/index.js作为入口文件，主要是用来在根元素中渲染根组件
• App.js一般是React的根组件
• React中的组件分为函数式组件和类组件
  • 函数式组件：本身就是一个函数，返回一个JSX
  • 类组件：通过继承React.Component来实现，必须具有render方法，返回一个JSX
  • 在实际使用中，推荐使用更简单的函数式组件
  • 组件名称的首字母必须大写
  • 组件在调用时，需要以标签的形式进行调用

实现一个小demo

目录结构

src/index.js

import ReactDOM from 'react-dom/client'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(<App/>)

src/App.js

import Button from './Button'

// 函数式组件
export default function App() {
    return <>
        <Button></Button>
        <div>我是App根组件</div>
    </>
}

src/Button.js

import React from "react";

// 类组件
export default class Button extends React.Component {
    onClick() {
        console.log('我是按钮');
    }

    render() {
        return <button onClick={this.onClick}>点我干嘛</button>
    }
}

推荐使用函数式组件的理由

• 函数式组件的编写更加简单明了
• 函数式编程也是目前广为使用的一种编程方式