钩（hook）是指一种具有弯曲形状的物体。

React公式的描述如下所示。

钩子（hook）是在React 16.8中新增的一项新功能，它使得我们无需编写类即可使用React的功能，如状态等。

首先，我们先澄清一下“state”到底是什么意思，然后再进行整理。

state是指

在React中，根据用户的操作而变化的值被称为state。
像下面的例子一样，在constructor中将state定义为一个对象。
一旦定义，可以通过this.state.属性名来获取设置的值。
另外，可以通过this.setState({属性:设置的值})来改变属性的值。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0 // countプロパティを定義(初期値は0)
    };
  }
  handleClick(){
    // countの値を変更
    this.setState({count:this.state.count+1});
  }
  render() {
    return (
      <div>
        <h1>
          {this.state.count}
        </h1>
        <button onClick={()=>{this.handleClick()}} >+</button>

      </div>
    );
  }
}

使用状态切换

hook是一个函数，用于使得在函数组件内部可以使用类似state的功能。之前的例子中我们是在类内部使用state，但可以像下面这样编写。

import React, { useState } from 'react';

function Example() {
  // countを定義(初期値は0)
  const [count, setCount] = useState(0);

  handleClick(){
    // countの値を変更
    setCount(count + 1);
  }
  return (
    <div>
      <h1>
        {count}
      </h1>
      <button onClick={()=>{this.handleClick()}} >+</button>
    </div>
  );
}

使用 useState 这个 hook 来管理 count 的值，并且在更新数值时使用 setCount。使用 hook 可以使代码更加简洁明了。这就是所谓的 hook。

使用useEffect

useEffect在每次渲染后执行相应的操作，类似于componentDidMount和componentDidUpdate。

import React, { useState, useEffect } from 'react';

function Example() {
  // countを定義(初期値は0)
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  handleClick(){
    // countの値を変更
    setCount(count + 1);
  }
  return (
    <div>
      <h1>
        {count}
      </h1>
      <button onClick={()=>{this.handleClick()}} >+</button>
    </div>
  );
}```