请记住，我们不能在函数组件中使用state ，因为它们不是类组件。Hooks 让我们在函数组件中可以使用state 和其他功能。
目前没有重大变化，我们不必放弃类组件。
Hook 不会影响你对 React 概念的理解。 恰恰相反，Hook 为已知的 React 概念提供了更直接的 API：props， state，context，refs 以及生命周期。稍后我们将看到，Hook 还提供了一种更强大的方式来组合他们。
我们可以使用一些钩子，例如useState，useEffect，useContext，useReducer等。
下面是 Hooks 的基本规则
Hooks 应该在外层使用，不应该在循环，条件或嵌套函数中使用
Hooks 应该只在函数组件中使用。
让我们看一个例子来理解 hooks。 这是一个函数组件，它采用props并在UI上显示这些props。 在useState钩子的帮助下，我们将这个函数组件转换为有状态组件。 首先，我们在第5行定义状态，这相当于
constructor(props) {super(props);this.state = {name:'myname', age:10, address:'0000 one street'}
}
Hooks 在解决什么问题
React 一直在解决一个问题，如何实现分离业务逻辑代码，实现组件内部相关业务逻辑的复用。
一般情况下，我们都是通过组件和自上而下传递的数据流将我们页面上的大型UI组织成为独立的小型UI，实现组件的重用。但是我们经常遇到很难侵入一个复杂的组件中实现重用，因为组件的逻辑是有状态的，无法提取到函数组件当中。这在处理动画和表单的时候，尤其常见，当我们在组件中连接外部的数据源，然后希望在组件中执行更多其他的操作的时候，我们就会把组件搞得特别糟糕：
难以重用和共享组件中的与状态相关的逻辑，造成产生很多巨大的组件
逻辑复杂的组件难以开发与维护，当我们的组件需要处理多个互不相关的 localstate 时，每个生命周期函数中可能会包含着各种互不相关的逻辑在里面。
复杂的模式，如渲染道具和高阶组件。
由于业务变动，函数组件不得不改为类组件。
这时候，Hooks就派上用场了。 Hooks 允许我们将组件内部的逻辑，组织成为一个可复用的隔离模块。
1.state Hooks (useState)
useState返回两个项，一个是user，另一个是setUser函数。 user 是一个可以在没有 this关键字的情况下直接使用的对象，setUser是一个可以用来设置用户点击第21行按钮的状态的函数，该函数等效于以下内容。
this.setState({name:'name changed'})import React, { useState } from "react";export const UserDisplay = ({ name, address, age }) => {const [user, setUser] = useState({name: "myname",age: 10,address: "0000 onestreet"});return (<><div><div class="label">Name:</div><div>{user.name}</div></div><div><div class="label">Address:</div><div>{user.address}</div></div><div><div class="label">Age:</div><div>{user.age}</div></div><button onClick={() => setUser({ name: "name changed" })}>Click me</button></>)
}