8、React开发全解析：组件、钩子与应用搭建

React开发全解析：组件、钩子与应用搭建

1. React组件基础

1.1 组件定义

在React中，组件是构建用户界面的基础。我们可以通过JSX表达式来定义组件，它实现特定的接口并返回JSX元素。以下是一个简单的天气组件示例：

// 假设在App.tsx文件中
interface WeatherProps {
    weather: string;
}

const WeatherComponent = (props: WeatherProps) => {
    return (
        <h1>
            The weather is {props.weather}
        </h1>
    );
};

export default function App() {
    return <WeatherComponent weather="sunny" />;
}

将上述代码粘贴到 App.tsx 文件中，浏览器预览窗格会渲染一个包含文本 “The weather is sunny” 的 h1 HTML元素。当点击该文本时，会弹出一个警告框再次显示该文本。我们还可以更改 weather 属性的值来显示不同的天气字符串。

1.2 类组件与函数组件

React中有两种类型的组件：类组件和函数组件。

1.2.1 函数组件