一、函数组件 和 类组件介绍
1. 函数组件
函数组件也称无状态组件，顾名思义就是以函数形态存在的 React 组件。
在 hooks 出现之前，react 中的函数组件通常只考虑负责UI的渲染，没有自身的状态，没有业务逻辑代码，是一个纯函数。下面这个函数组件就是一个纯函数，它的输出只由参数props决定，不受其他任何因素影响。
function DemoFunction(props) {
const { text } = props
return (
<div className="demoFunction">
<p>{`function 组件所接收到的来自外界的文本内容是：[${text}]`}</p>
</div>
);
}
但是这种函数组件一旦我们需要给组件加状
态，那就只能将组件重写为类组件，因为函数组件没有实例，没有生命周期。所以我们说在 hook 之前的函数组件和类组件最大的区别又是状态的有无。
Hook
React Hooks 是从 React 16.8 版本推出的新特性，目的是解决 React 的状态共享以及组件生命周期管理混乱的问题。React Hooks 的出现标志着，React 不会再存在无状态组件的情况，React 将只有类组件和函数组件的概念。
hooks 为函数组件提供了状态，也支持在函数组件中进行数据获取、订阅事件解绑事件等等。下面先介绍几个最基本的hook作为基础知识。
useState：通过 useState 为组件提供状态。useState 的参数是 state 的初始值，他只有在组件第一次渲染的时候会生效，他的返回值是一个数组，第一个是 state，第二个是设置state的函数。
const [count, setCount] = useState(0);
useEffect：副作用。通常在副作用中进行ajax请求，事件的绑定与解绑，设置定时器与清除等等。
// useEffect第一个参数是一个回调函数，在里面进行业务逻辑代码的书写
// 第二个参数是依赖项数组，如果数组中的依赖发生变化，那么该副作用就会重新执行，
// 如果不设置第二个参数，那么当该组件每渲染一次，副作用就会执行一次
useEffect(() => {
console.log("useEffect副作用执行");
//用setTimeout模拟ajax请求
setTimeout(() => {
setList(result);
}, 3000);
}, [list]);
useCallback：用于缓存函数，第一个参数为要缓存的函数，第二个参数为依赖项数组，如果依赖发生了变化，那么就会生成一个新的函数；否则当组件重新渲染时，不会重新定义这个函数，而是会取缓存。
useMemo：用于缓存函数的返回值，第一个参数为要缓存的函数（注意实际被缓存的是函数被执行过后的值），第二个参数为依赖项数组，如果依赖发生了变化，那么就会重新执行这个函数，得到新的返回值；否则当组件重新渲染时，不会重新执行这个函数，而是直接取被缓存的该函数的返回值。
useCallback，
useMemo 都是用作优化函数式组件性能的。
2. 类组件
在 React 中，类组件就是基于 ES6 语法，通过继承 React.component 得到的组件。
class Demo extends React.Component {
// 初始化类组件的 state
state = {
text: "111"
};
// 编写生命周期方法 didMount
componentDidMount() {
// 省略业务逻辑
}
// 编写自定义的实例方法
changeText = (newText) => {
// 更新 state
this.setState({
text: newText
});
};
// 编写生命周期方法 render
render() {
return (
<div className="demoClass">
<p>{this.state.text}</p>
<button onClick={() => this.changeText(222)}>点我修改</button>
</div>
);
}
}
二、函数组件和类组件区别
1. 表面差异：
类组件有生命周期，函数组件没有
类组件需要继承 Class，函数组件不需要
类组件可以获取实例化的 this，并且基于 this 做各种操作，函数组件不行
类组件内部可以定义并维护 state， 函数组件为无状态组件（可以通过hooks实现）
…
函数组件相比较类组件，优点是更轻量与灵活，便于逻辑的拆分复用。
2. 函数式组件捕获了渲染时所使用的值，这是两类组件最大的不同。
React框架做的本质工作就是吃入数据，吐出UI，把声明式的代码转换为命令式的 DOM 操作，把数据层面的描述映射到用户可见的 UI 变化中去。
这也就是说React的数据应该紧紧的和渲染绑定在一起，但是问题的关键就在于类组件是做不到这一点的。
