开发核心概念

创建命令

pnpm create vite@latest

类组件与函数式组件的区别

类组件

Class 组件是早期React中创建可复用、有状态组件的主要方式。它基于ES6的class语法，需要继承React.Component,并且通过this.state 来管理内部状态，通过this.setState()来更新状态，UI的内容需要放在render() 方法中

类组件

class ClassCounter extends React.Component {
    state = { count: 0}
    handleIncrement = () => {
        this.setState({count: this.state.count + 1})
    }
    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.handleIncrement}></button>
            </div>
        )
    }
}

这种写法相对固定，但也带来了额外的“模版代码”和对this关键字的复杂心智负担。

函数式组件

于此相比，函数式组件则是一个更为简洁和只管的范式。在早期，函数式组件仅仅是接收props并返回JSX的“哑”组件，无法拥有自己的状态。然而，自从React16.8引入Hooks之后，一切都改变了。
Hooks（例如useState）让函数式组件也能拥有状态和其他React特性。现在，我们可以用一种更简单、更符合Javascript函数式编程思想的方式来重写计时器组件

函数式组件

import {useState} from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);
    const handleIncrement = () => {
    setCount(count + 1);
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={handleIncrement}></button>
        </div>
    )
}

两者相比，函数式组件的优势显而易见