react18【系列实用教程】useState (2024最新版)

类似 vue 的 data 选项

功能

向组件添加响应式变量,当响应式变量变化时,组件的视图UI也会跟着变化【数据驱动视图】

语法

  • 参数为变量的初始值
  • 返回值为一个只有两个元素的数组,第一项元素为传入的参数,第二项元素是一个setter 函数

使用范例 -- 响应式变量

js 复制代码
import { useState } from "react";
const Demo = () => {
  const [count, setCount] = useState(0);
  function addOne() {
    setCount(count + 1);
  }
  return <button onClick={addOne}>{count}</button>;
};

export default Demo;
  • 声明了响应式变量 count ,初始值为 0
  • 通过 [] 进行了数组的解构赋值,将 0 赋值给了 count ,可响应式改变 count 值的 setter 函数赋值给了
  • 通过 setCount 可修改 count 的值 (setCount 可以自定义为其他名称,如 updateCount , 但推荐统一 set 开头)
  • setCount 的语法是将 count 的新值作为参数传入
  • setCount 的作用是触发视图根据 count 的新值重新渲染

使用范例 -- 响应式对象

js 复制代码
  const [person, setPerson] = useState({
    firstName: 'Barbara',
    lastName: 'Hepworth',
    email: 'bhepworth@sculpture.com'
  });

  function handleFirstNameChange(e) {
     // 修改属性值
     setPerson({
      ...person,
      firstName: e.target.value
    });
  }

修改嵌套的属性值

js 复制代码
  const [person, setPerson] = useState({
    name: 'Niki de Saint Phalle',
    artwork: {
      title: 'Blue Nana',
      city: 'Hamburg',
      image: 'https://i.imgur.com/Sd1AgUOm.jpg',
    }
  });

  function handleNameChange(e) {
    setPerson({
      ...person,
      name: e.target.value
    });
  }

  function handleTitleChange(e) {
    setPerson({
      ...person,
      artwork: {
        ...person.artwork,
        title: e.target.value
      }
    });
  }

显然,非常麻烦,可以用 Immer 库编写简洁的更新逻辑

复制代码
npm install use-immer
js 复制代码
import { useImmer } from 'use-immer';
js 复制代码
  const [person, updatePerson] = useImmer({
    name: 'Niki de Saint Phalle',
    artwork: {
      title: 'Blue Nana',
      city: 'Hamburg',
      image: 'https://i.imgur.com/Sd1AgUOm.jpg',
    }
  });

  function handleNameChange(e) {
    updatePerson(draft => {
      draft.name = e.target.value;
    });
  }

  function handleTitleChange(e) {
    updatePerson(draft => {
      draft.artwork.title = e.target.value;
    });
  }

使用范例 -- 响应式数组

js 复制代码
  const [fruitList, setFruitList] = useState([]);

  function changeHandler(e) {
    let newValue = e.target.value;

    if (fruitList.includes(newValue)) {
      // 数组删除元素
      setFruitList(fruitList.filter((item) => item !== newValue));
    } else {
      // 数组新增元素
      setFruitList([...fruitList, newValue]);
    }
  }
相关推荐
lypzcgf3 小时前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台
叫我阿柒啊1 天前
Java全栈工程师的实战面试:从Vue到Spring Boot的技术旅程
java·spring boot·微服务·vue·api·react·rest
OEC小胖胖2 天前
React学习之路永无止境:下一步,去向何方?
前端·javascript·学习·react.js·前端框架·react·web
OEC小胖胖2 天前
给你的应用穿上“外衣”:React中的CSS方案对比与实践
前端·前端框架·react·web
lypzcgf2 天前
Coze源码分析-资源库-创建提示词-前端源码
前端·人工智能·typescript·系统架构·开源软件·react·安全架构
袋鼠云数栈前端4 天前
实现一个 AI 编辑器 - 行内代码生成篇
大数据·ai·react
lypzcgf5 天前
Coze源码分析-工作空间-项目开发-前端源码
前端·人工智能·typescript·系统架构·开源软件·react·安全架构
OEC小胖胖5 天前
掌握表单:React中的受控组件与表单处理
前端·javascript·react.js·前端框架·react·web
阿࿆杰࿆15 天前
solon-flow基于bpmnJs的流程设计器
vue·流程图·react