当前位置：首页 > news >正文

React hook 之 useState

news 2025/8/19 4:14:52

在组件的顶部定义状态变量，并传入初始值，确保当这些状态变量的值发生变化时，页面会重新渲染。
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，因此你只能在组件的顶层调用它。

查看全文

http://www.lryc.cn/news/407479.html