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

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

news 来源：原创 2025/4/28 10:51:28

类组件和函数组件的区别

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>;
  }
}