React类组件与函数组件有什么区别？

首先注意定义组件有两个要求：

1.组件名称首字母必须以大写字母开头

2.组件返回值只能有一个根元素

---

以下总结不看hooks

--先上代码看看写法上的区别--

类组件：

在 React 中，类组件就是基于 ES6 语法，通过继承 React.Component 得到的组件。

class Welcome extends React.Component {
  render() {
    return (
      <h1>Welcome { this.props.name }</h1>
    );
  }
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));

函数组件：

函数组件也称无状态组件，顾名思义就是以函数形态存在的 React 组件。

function Welcome (props) {
  return <h1>Welcome {props.name}</h1>
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));

---

--下面说说它们的共同点与区别--

共同点：

1.无论是使用函数组件还是类组件，它都不能修改自己的 props 属性。

2.React是单向数据流，父组件改变了属性，那么子组件视图会更新。

3.函数组件和类组件都可以接收 props 属性并且返回React元素。

4.属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改。

区别：

当然函数组件和类组件是有区别的，而且函数组件比类组件性能好，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件（多写无状态组件，少写有状态组件）。

区别	类组件	函数组件
是否有this	有	没有
是否有生命周期	有	没有
是否有状态state	有	没有

---

简而言之：

类组件有this，有生命周期，有状态state。

函数组件没有this，没有生命周期，没有状态state。

这也是有状态组件和无状态组件的区别。