React hook 之 useState

在组件的顶部定义状态变量,并传入初始值,确保当这些状态变量的值发生变化时,页面会重新渲染。

const [something,setSomething] = useState(initialState);

useState 返回一个由两个值组成的数组:1、当前的 state,在首次渲染时,它将与你传递的 initialState 相匹配。2、set 函数,它可以让你将 state 更新为不同的值并触发重新渲染。

something是定义的状态变量,initialState是初始值,setSomething函数允许你将 state 更新为不同的值并触发重新渲染。

1、定义一个字符串变量

复制代码
import { useState } from 'react';
// 定义一个字符串变量,初始值为null;
const [name, setName] = useState(null);
// 需要改变时,直接调用setName赋值
setName('hello world');
console.log(name); // 打印结果为: hello world

2、定义一个对象变量

复制代码
import { useState } from 'react';
const [serverObj, setServerObj] = useState({ip:'',port:''});
 // 输入框变化时
  const inputChange = (val) => {
  // 调用setServerObj赋值
    setServerObj({ ...serverObj, ip: val });
  };
  // 输入框组件
<Input placeholder='IP' value={serverObj.ip} onChange={val=>{inputChange(val)}}/>

注意:useState 是一个 Hook,因此你只能在组件的顶层调用它。

相关推荐
南岸月明9 分钟前
我与技术无缘,只想副业搞钱
前端
gzzeason35 分钟前
在HTML中CSS三种使用方式
前端·css·html
hnlucky1 小时前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web
huihuihuanhuan.xin1 小时前
前端八股-promise
前端·javascript
星语卿1 小时前
浏览器重绘与重排
前端·浏览器
西瓜_号码1 小时前
React中Redux基础和路由介绍
javascript·react.js·ecmascript
小小小小宇1 小时前
前端实现合并两个已排序链表
前端
yngsqq2 小时前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk2 小时前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan2 小时前
我自建服务器部署了 Next.js 全栈项目
前端