【react】类组件和函数组件的区别

类组件和函数组件的区别

1. 定义方式

2. 状态管理

3. 生命周期方法

4. 性能优化

5. 语法简洁性

6. Hooks 的使用

总结

函数组件和类组件是 React 中两种主要的组件形式

类组件和函数组件的区别

1. 定义方式

函数组件：使用函数定义，通常以 const 或 function 开头。

const MyFunctionComponent = (props) => {return <div>{props.message}</div>;
};

类组件：使用 ES6 类定义，继承自 React.Component。

class MyClassComponent extends React.Component {render() {return <div>{this.props.message}</div>;}
}

2. 状态管理

函数组件

在 React Hooks 出现之前，函数组件是无状态的，不能直接管理状态。但现在可以通过 useState Hook 管理状态。

类组件

类组件可以有自己的状态，通过 this.state 来管理。

class MyClassComponent extends React.Component {constructor(props) {super(props);this.state = { count: 0 };}render() {return <div>Count: {this.state.count}</div>;}
}

3. 生命周期方法

函数组件：没有生命周期方法，但现在可以通过 useEffect Hook 来实现类似的功能。

const MyFunctionComponent = () => {useEffect(() => {console.log('Component mounted');return () => console.log('Component unmounted');}, []);return <div>My Function Component</div>;
};

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

class MyClassComponent extends React.Component {componentDidMount() {console.log('Component mounted');}componentWillUnmount() {console.log('Component unmounted');}render() {return <div>My Class Component</div>;}
}


//函数组件
const MyFunctionComponent = (props) => {const [state, setState] = useState({loading:true,data: [],model:props.model || '',});//类组件
class MyFunctionComponent extends React.Component {constructor(props) {super(props);this.state = {loading: true,model: props.model || '',}}//函数组件useEffect(() => {if (props.model) {setState((prevState) => ({...prevState,model: props.model,}));}sync();}, [props.model, props.data]);const sync = () => {const { data } = props;const wrappedData = wrapDataNew(data);setState((prevState) => ({...prevState,loading: false,...wrappedData,}));};
//类组件componentDidMount() {const { model } = this.props;if (model) this.setState({ model });this.sync();}sync = () => {const { data } = this.props;let wrappedData = this.wrapDataNew(data);this.setState({ loading: false, ...wrappedData });};render(){return
}};

以上为举例区别函数组件和类组件的写作方式，实际无意义

4. 性能优化

函数组件

可以使用 React.memo 进行性能优化，避免不必要的重渲染。

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

类组件

可以使用 shouldComponentUpdate 方法来控制组件是否更新。

class MyClassComponent extends React.Component {shouldComponentUpdate(nextProps, nextState) {return nextProps.value !== this.props.value;}render() {return <div>{this.props.value}</div>;}
}