1. why hooks?
React没有提供将可重用行为“附加”到组件的方法（例如，将其连接到store）。如果你已经使用React一段时间，你可能熟悉渲染道具和高阶组件等模式，试图解决这个问题。但是这些模式要求你在使用它们时重构组件，这可能很麻烦并且使代码更难以遵循。如果你看一下React DevTools中一个典型的React应用程序，你可能会发现一个由包含提供者，消费者，高阶组件，渲染道具和其他抽象层的组件组成的“包装器地狱”。虽然我们可以在DevTools中过滤它们，但这指出了一个更深层次的基本问题：React需要一个更好的原语来共享有状态逻辑。
使用Hook，你可以从组件中提取有状态逻辑，以便可以独立测试并重用。Hook允许您在不更改组件层次结构的情况下重用有状态逻辑。 这样可以轻松地在许多组件之间或与社区共享Hook。
2.what is react hooks？
hook是允许从功能组件(function component)“挂钩”React状态和生命周期功能的功能。钩子在类内部不起作用 - 它们允许你在没有类（class）的情况下使用React。
React提供了一些像useState这样的内置Hook。你还可以创建自定义Hook以在不同组件之间重用有状态行为。我们先来看看内置的Hooks。
Effect Hook
你之前可能已经从React组件执行数据提取，订阅或手动更改DOM。我们将这些操作称为“副作用”（或简称为“效果”），因为它们会影响其他组件，并且在渲染过程中无法完成。
Effect Hook中的useEffect增加了在功能组件执行副作用的功能。它与React类中的componentDidMount，componentDidUpdate和componentWillUnmount具有相同的用途，但统一为单个API。(我们将在使用Effect Hook时显示将useEffect与这些方法进行比较的示例。）
import { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// 类似componentDidMount 和 componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return ( <div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}> Click me </button>
</div> );
}
当你调用useEffect时，你就在告诉react运行你的‘效果’函数当刷新对DOM的更改后(你可以认为是render之后)。
效果在组件内声明，因此可以访问其props和state。默认情况下，React在每次渲染后运行效果 - 包括第一次渲染。
Effects还可以通过指定返回函数来清理他们。
