React useState

React Hook 总是以完全相同的顺序进行调用,出于函数顶层,不能在 if、循环、class中使用Hook。

使用useState Hook

  • useState 返回值是一个数组
  • 数组第一个值是状态(state)
  • 数组第二个值是改变该状态的函数(setState)
  // 创建一个名为:count 的状态, 状态值为4(这里是number类型),setCount: 可以改变 count 的状态。
  const [count, setCount] = useState(4);

改变状态值: 在当前状态下改变

  • 方法一 :
  // 使用当前的状态值进行改变 --- 当前值 - 1;
  setCount(count - 1);

  // 因为没有传入值类型限制,所以 `count` 状态值类型为any;可以直接设置其他类型的值。
  setCount("复制");
  • 方法二
// 使用函数,参数prevCount 是上一个状态值,减一后设置新值
setCount(prevCount => prevCount - 1);

初始化赋值

  • 方法一
 // 创建状态 count ,并直接初始化值为 4。
// 组件更新状态时都会执行一次初始化。
 const [count, setCount] = useState(4);
  • 方法二
// 创建状态 count, 并使用函数返回值,初始化值为4
// 该方法初始化执行一次。
 const [count,setCount] = useState(() => 4);

创建的状态(state)类型为Object 时

  • 注意需要改变Object 中的一个值时,需要把整个Object替换。useState Hook 没有自动合并对象的功能。
 // 初始化
const [state, setState] = useState({count:4, theme: 'blue});

// state中的count 进行加1
setState(prevState => {...prevState, count:prevState.count + 1});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.使用 useState() 进行状态管理 useState()是改变状态的开关,将状态添加到函数组件需要4个步...
    宋小菜_菜菜阅读 72,969评论 9 25
  • 概念 React Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 s...
    梦想成真213阅读 9,492评论 0 7
  • 如果你之前对于Hooks没有了解,那么你可能需要看下概述部分。你或许也可以在一些常见的问题中找到有用的信息。 基本...
    xiaohesong阅读 21,131评论 4 11
  • 先来看看类组件的生命周期Class 组件的生命周期 相对以前较老的生命周期,新增了 getDerivedState...
    CondorHero阅读 3,613评论 0 1
  • 摘要: 问题很详细,插图很好看。 原文:你要的 React 面试知识点,都在这了 作者:前端小智 Fundebug...
    Fundebug阅读 12,388评论 0 39