React hook 之 useState

whatever who cares2024-07-28 11:45

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

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，因此你只能在组件的顶层调用它。