React Hooks简述

Hooks本质上就是一类特殊的函数，它们可以为你的函数型组件（function component）注入一些特殊的功能。Hooks的目标就是让你不再写class，让function一统江湖。

为什么要使用hooks？

React的核心思想是：将一个页面拆成一堆独立的，可复用的组件，并且用自上而下的单向数据流的形式将这些组件串联起来。但假如你在大型的工作项目中用React，你会发现你的项目中实际上很多react组件冗长且难以复用。尤其是那些写成class的组件，它们本身包含了状态（state），所以复用这类组件就变得很麻烦。之前官方推荐两种方式来解决这个问题，分别是渲染属性和高阶组件。渲染属性指的是使用一个值为函数的prop来传递需要动态渲染的nodes或组件。如下面的代码可以看到我们的DataProvider组件包含了所有跟状态相关的代码，而Cat组件则可以是一个单纯的展示型组件，这样一来DataProvider就可以单独复用了。

import Cat from 'components/cat'
class DataProvider extends React.Component {
   
  constructor(props) {
   
    super(props);
    this.state = {
    target: 'Zac' };
  }

  render() {
   
    return (
      <div>
        {
   this.props.render(this.state)}
      </div>
    )
  }
}

<DataProvider render={
   data => (
  <Cat target={
   data.target} />
)}/>

下面还有一种写法：

<DataProvider>
  {
   data => (
    <Cat target={
   data.target} />
  )}
</DataProvider>

高阶组件是一个函数接受一个组件作为参数，经过一系列加工后，最后返回一个新的组件。看下面的代码示例，withUser函数就是一个高阶组件，它返回了一个新的组件，这个组件具有了它提供的获取用户信息的功能。

const withUser = WrappedComponent => {
   
  const user = sessionStorage.getItem("user");
  return props => <WrappedComponent user={
   user} {
   ...props} />;
};

const UserPage = props => (
  <div class="user-container">
    <p>My name is {
   props.user}!</p>
  </div>
);
export default withUser(UserPage);

以上这两种模式看上去都挺不错的，很多库也运用了这种模式，比如我们常用的React Router。但我们仔细看这两种模式，会发现它们会增加我们代码的层级关系。所以React又通过Hooks来解决这个问题。

什么是State Hooks？

通过代码能更加清楚的理解：

import {
    useState } from 'react';

function Example() {
   
//声明一个状态变量
  const [count, setCount] =