Hook是react 16.8 新增的特性
是希望在不编写 class的情况下 去操作state和其他react特性
Hook的话 就不建议大家使用class的形式了 当然也可以用 这个他只是不推荐

我们还是先创建一个普通的react项目

我们之前写一个react组件可以这样写

import React from "react";
export default class AppRouter extends React.Component{render(){return (<div>Hello World</div>)}
}

简单说 就是声明一个类对象 然后在里面 写组件的基本内容

然后 就还有一种函数式的写法

import React from "react";
function dom1(){return (<div>Hello World</div>)
}export default dom1

这两种写法界面效果没有什么不同

甚至我们直接这样写

import React from "react";
export default () => {return (<div>Hello World</div>)
}

也是可以出界面的

但是 这样问题就来了 我们在这里面是没办法 创建 state和生命周期的

在中我们可以这样写

import React from "react";
import axios from "axios";export default class AppRouter extends React.Component{state = {name: "小猫猫"}render(){return (<div>{ this.state.name }</div>)}
}

这样 就可以创建state
但函数这样去声明显然是没用的

那么 我们皆可以这样写

import React, { useState } from "react";const MyComponent = () => {const [name] = useState("小猫猫");return (<div>{name}</div>);
};export default MyComponent;

运行结果如下

这样 我们这种函数式就能用State数据了
然后 我们修改他也可以

import React, { useState } from "react";const MyComponent = () => {const [name,setName] = useState("小猫猫");return (<div>{name}<button onClick={ ()=> { setName("大猫猫")} }>更改</button></div>);
};export default MyComponent;

注意 他这里修改数据的方法是你在声明变量时一起声明的 你要它叫什么 他就叫什么

例如 我这里 声明name变量 然后修改的值的函数 我声明叫 setName 你也可以写其他名字
然后我们点击按钮调用setName 参数就是要更改后的新值

我们运行代码

然后点击更改按钮

我们的变量就改变了

然后 我们来写两个值

import React, { useState } from "react";const MyComponent = () => {const [name,setName] = useState("小猫猫");const [age,setAge] = useState(2);return (<div>{name}{age}<button onClick={ ()=> { setName("大猫猫")} }>更改</button><button onClick={ ()=> { setAge(age+1)} }>又一年</button></div>);
};export default MyComponent;

运行项目

我们更改和又一年都点一下

也是没有任何问题