react hook

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还可以通过指定返回函数来清理他们。