18号面试了杭州的又拍云，其中面试官问了React函数组件和类组件之间的区别，当时我只回答了有无生命周期、有无this以及state，面试完后，顿时感觉回答的很笼统，很拉，用React这么久了，连函数组件和类组件的区别都说不准，着实拉了，所以今天得空总结总结自己对于函数组件和类组件的区别：

　　React是基于组件的声明式UI库，其中关键词 组件 和 声明式，今天就来说说组件

　　Component（组件）可以是类组件（class component）也可以是函数组件（function component）

　　定义组件：

　　　　1.类组件：

　　　　　　　　类组件使用了ES6的class 来定义组件：　

1 class Welcome extends React.Component {
2   render() {
3     return <h1>Hello, {this.props.name}</h1>;
4   }
5 }

　　　 2.函数组件：

　　　　　　通过编写JavaScript函数方式来定义组件：

1 function Welcome(props) {
2   return <h1>Hello, {props.name}</h1>;
3 }

　　组件传参：

　　　　例：传入一个参数‘hello,world‘，

　　　　<Component name="hello,world" />

　　　　1.类组件：需要this来引用　　　

1 class ClassComponent extends React.Component {
2   render() {
3     const { name } = this.props;
4     return <h1>Hello, { name }</h1>;
5  }
6 }

　　　 2.函数组件：作为函数参数传递

1 const FunctionalComponent = ({ name }) => {
2  return <h1>Hello, {name}</h1>;
3 };

　　state&生命周期：

　　　　state：众所周知，在 React 项目中，我们无法避免处理state变量。以前，处理state只能在类组件中进行，但从 React 16.8开始，引入了 React Hook useState，允许开发人员编写有state的函数组件。

　　　　我们要做一个简单的计数器，从0开始，点击一次按钮就会将计数加1。

　　　　1.类组件：　　　　　　

 1 class ClassComponent extends React.Component {
 2  constructor(props) {
 3    super(props);
 4    this.state = {
 5      count: 0
 6    };
 7  }
 8 
 9  render() {
10    return (
11      <div>
12        <p>count: {this.state.count} times</p>
13        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
14          Click
15        </button>
16      </div>
17    );
18  }
19 }

　　　　2.函数组件：　　　　　

 1 const FunctionalComponent = () => {
 2  const [count, setCount] = React.useState(0);
 3 
 4  return (
 5    <div>
 6      <p>count: {count}</p>
 7      <button onClick={() => setCount(count + 1)}>Click</button>
 8    </div>
 9  );
10 };

　　　　生命周期：只存在于类组件中：

　　　　　　　　　　　　　　　　　　1.constructor（）:　①初始化内部的state ②为事件处理函数绑定实例

　　　　　　　　　　　　　　　　　　2.componentDidMount() :  会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。

　　　　　　　　　　　　　　　　　　3.componentDidUpdate(): 会在更新后会被立即调用。首次渲染不会执行此方法。

　　　　　　　　　　　　　　　　　　4.componentWillUnmount():会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。

　　获取渲染时的值：

　　　　https://zhuanlan.zhihu.com/p/104126843，可以参考这篇文章

React 函数组件和类组件的区别