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

React--函数组件和类组件

news 来源：原创 2025/5/22 9:21:35

React 中的函数组件和类组件是两种定义组件的方式，它们有以下主要区别：

1. 语法与定义方式

函数组件： 是 JavaScript 函数，接收 props 作为参数，返回 JSX。

const MyComponent = (props) => {return <div>Hello, {props.name}</div>;
};

类组件： 继承自 React.Component，必须定义 render() 方法返回 JSX。

class MyComponent extends React.Component {render() {return <div>Hello, {this.props.name}</div>;}
}

2. 状态管理

函数组件： 最初无状态，需使用 Hooks（如 useState）管理状态。

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

类组件： 通过 this.state 和 this.setState 管理状态。

class Counter extends React.Component {state = { count: 0 };increment = () => {this.setState({ count: this.state.count + 1 });};render() {return <button onClick={this.increment}>{this.state.count}</button>;}
}

3. 生命周期方法

函数组件： 使用 useEffect Hook 替代生命周期方法。

useEffect(() => {// 组件挂载后执行return () => {// 组件卸载前执行};
}, []); // 依赖项为空数组时，等效于 componentDidMount 和 componentWillUnmount

类组件： 有完整的生命周期方法（如 componentDidMount、componentDidUpdate、componentWillUnmount）。

class MyComponent extends React.Component {componentDidMount() {// 组件挂载后执行}componentWillUnmount() {// 组件卸载前执行}
}

4. 性能优化

函数组件： 通过 React.memo 浅比较 props 避免重复渲染。

const MyComponent = React.memo((props) => {return <div>{props.value}</div>;
});

类组件： 通过 shouldComponentUpdate 或继承 React.PureComponent 实现。

class MyComponent extends React.PureComponent {// 自动浅比较 props 和 state
}

5. 上下文与 refs

函数组件： 使用 useContext 和 useRef Hooks。

const value = useContext(MyContext);
const ref = useRef(null);

类组件： 通过 static contextType 或 Context.Consumer，以及 React.createRef()。
```
static contextType = MyContext;
ref = React.createRef();
```

6. 适用场景

函数组件： 更简洁，适合无状态组件或逻辑简单的组件，是 React 的推荐写法。
类组件： 适合复杂逻辑（如需要访问生命周期方法或使用 this），但逐渐被函数组件替代。

总结

特性	函数组件	类组件
语法	函数 / 箭头函数	继承 React.Component
状态管理	Hooks（如 useState）	this.state 和 setState
生命周期	useEffect Hook	完整生命周期方法
性能优化	React.memo	shouldComponentUpdate
适用场景	无状态 / 简单逻辑	复杂逻辑 / 生命周期依赖