函数组件的两个问题
React v16.8.0推出了Hooks API主要解决了以下的两个问题：
- 函数组件没有state ；
- 函数组件没有生命周期 。
一旦接受Hooks会发现这两个问题迎刃而解。对比React的两种组件，我们很明显的发现class组件相对来说略为繁琐。拿同样的点击+1的例子来说，
class组件的用法：
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
n: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.n} times</p>
<button onClick={() => this.setState({ n: this.state.n + 1 })}>
Click me
</button>
</div>
);
}
}
而使用函数组件HooksAPI
import React, { useState } from 'react';
function App() {
// 声明一个叫 "count" 的 state 变量
const [n, setN] = useState(0);
return (
<div>
<p>You clicked {n} times</p>
<button onClick={() => setN(n + 1)}>
Click me
</button>
</div>
);
}
那么Hooks是什么？
-
Hook 是一个特殊的函数，它可以让你“钩入” React 的特性，相当于Vue的生命周期钩子。例如，useState 是允许你在 React 函数组件中添加 state 的 Hook。
-
如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其转化为 class。现在你可以在现有的函数组件中使用 Hook。
Hooks的优点
-
class组件比起 函数组件多了几行似乎不太能用三两句话就能理解的代码，这是我推崇函数组件的主要原因。
-
Hook使你在无需修改组件结构的情况下复用状态逻辑。我们经常维护一些组件，组件起初很简单，但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。
-
Hooks将组件中相互关联的部分拆分成更小的函数，并且使你在非 class 的情况下可以使用更多的 React 特性。 Hook 提供了问题的解决方案，无需学习复杂的函数式或响应式编程技术。
-
React 组件一直更像是函数，而Hooks则拥抱了函数，使得React的框架理念更接近于Javascript。
-
Hook 和现有代码可以同时工作，你可以渐进式地使用，无需放弃原有的class组件。
