当前位置：首页 > news >正文

React 中，构建组件的方式

news 2025/7/17 0:59:11

1. 函数组件（Function Components）

函数组件是最简单的组件形式，通常用于展示性的组件，不涉及复杂的生命周期方法。

import React from 'react';function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}export default Welcome;

2. 类组件（Class Components）

类组件是早期 React 推荐的组件形式，支持状态管理和生命周期方法。虽然现在函数组件结合 Hooks 可以实现相同的功能，但类组件仍然在很多项目中使用。

import React, { Component } from 'react';class Welcome extends Component {constructor(props) {super(props);this.state = {name: props.name};}componentDidMount() {// 组件挂载后执行的操作}render() {return <h1>Hello, {this.state.name}</h1>;}
}export default Welcome;

3. 纯函数组件（Pure Function Components）

纯函数组件是函数组件的一种特殊情况，使用 React.memo 包装，可以避免不必要的重新渲染。

import React from 'react';const Welcome = React.memo(function Welcome(props) {return <h1>Hello, {props.name}</h1>;
});export default Welcome;

4. Hooks

React 16.8 引入了 Hooks，允许在函数组件中使用状态和其他 React 特性，如 useState、useEffect 等。

import React, { useState, useEffect } from 'react';function Welcome(props) {const [name, setName] = useState(props.name);useEffect(() => {// 组件挂载后执行的操作console.log('Component did mount');}, []);return <h1>Hello, {name}</h1>;
}export default Welcome;

5. 高阶组件（Higher-Order Components, HOC）

高阶组件是一种模式，用于在组件之间复用代码。HOC 是一个函数，接受一个组件并返回一个新的组件。

import React from 'react';function withWelcome(WrappedComponent) {return function EnhancedComponent(props) {return <WrappedComponent {...props} name="World" />;};
}function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}const EnhancedWelcome = withWelcome(Welcome);export default EnhancedWelcome;

6. Render Props

Render Props 是一种在组件之间共享代码的模式。通过将一个函数作为 prop 传递，可以在组件之间传递渲染逻辑。

import React from 'react';class WelcomeProvider extends React.Component {state = {name: 'World'};render() {return this.props.render(this.state.name);}
}function Welcome(props) {return (<WelcomeProvider render={(name) => <h1>Hello, {name}</h1>} />);
}export default Welcome;

7. Context API

Context API 用于在组件树中传递数据，而无需手动将 props 一层层传递下去。适用于全局状态管理。

import React, { useContext } from 'react';const NameContext = React.createContext();function Welcome() {const name = useContext(NameContext);return <h1>Hello, {name}</h1>;
}function App() {return (<NameContext.Provider value="World"><Welcome /></NameContext.Provider>);
}export default App;