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 参数就是要更改后的新值
我们运行代码
然后点击更改按钮
我们的变量就改变了
然后 我们来写两个值文章来源:https://www.toymoban.com/news/detail-486532.html
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;
运行项目
我们更改和又一年都点一下
也是没有任何问题文章来源地址https://www.toymoban.com/news/detail-486532.html
到了这里,关于React Hook入门小案例 在函数式组件中使用state响应式数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!