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

React第十四节useState使用详解差异

article 2025/1/18 21:11:07

一、useState() Hook 使用

useState视图更新用法

1、写法：

import { useState } from 'react'
const [name, setName] = useState('Andy')

利用数组解构写法，
第一个参数是自定义的属性，用于初始化时候渲染，如上面代码，初始化时候渲染为 ‘Andy’
第二个参数是set 函数，用于将 name 的值进行更新并渲染到视图上；必须以setXxx写法，固定写法；

2、注意事项：

2.1、useState() 使用必须在最顶层，不能在循环或者条件语句中调用；/
2.2、useState() 在React会被两次调用用于初始化函数，来寻找意外的不纯粹性，这种调用只在开发阶段会出现，在生产环境中不会有影响；/
2.3、set函数，只会更新下次渲染状态的变量，如果在调用set函数后，立马读取变量，会发现变量依旧是旧值，但是视图已更新为新值；此时若要读取最新的值，需要使用新的变量接收；
2.4、当设置set函数 中的前后两个值一样时，React会自动跳过第二次的渲染
2.5、当有多个事件处理更新同一个属性时，React会将所有事件批量处理完之后再调用set函数更新视图，这样可以避免多次调用set函数更新视图，影响性能；
2.6、若当前使用的状态是通过其他state或者props获取到的，那么可以将这个状态移除；

3、key 的其他用途

通常我们在列表渲染时候，需要传入唯一的 key 用于在视图更新时候进行新旧虚拟DOM树对比；
然而，当我们需要重置一个input 或者其他表单时候，我们可以通过传入不一样的key 进行重新渲染视图

import { useState } from 'react';

export default function App() {
  const [version, setVersion] = useState(0);

  function handleReset() {
    setVersion(version + 1);
  }

  return (
    <>
      <button onClick={handleReset}>Reset</button>
      <Form key={version} />
    </>
  );
}

function Form() {
  const [name, setName] = useState('Taylor');

  return (
    <>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
      />
      <p>Hello, {name}.</p>
    </>
  );
}