Vue转React 3分钟学会useState


theme: smartblue

useState

vue2通过data,vue3中通过refreactive绑定响应式数据,来达到数据与视图同步更新的效果。 而在react中是通过useState来实现的。

useState是什么?

useState是react内置的hook,主要用于给组件添加状态变量。useState 会返回一对值:当前状态和一个让你更新它的函数,你可以在事件处理函数中或其他一些地方调用这个函数。 下面是一个计时器的例子

import { useState } from 'react';

function App() {
// 声明一个叫 “count” 的 state 变量。
const [count, setCount] = useState(0);

return (


You clicked {count} times


<button onclick=“{()” ==“”> setCount(count + 1)}>
Click me


);
}

export default App;

useState 的两种更新方式

  • 值更新
  • 函数式更新

值更新就是上面例子中的写法,直接把值传递给setCount函数,函数式更新是在setCount参数中,写一个函数拿到当前状态的值,接着进行赋值。

接着通过计时器了解这两个的区别

import { useState } from 'react';

function App() {
// 声明一个叫 “count” 的 state 变量。
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1)
setCount(count + 1)
setCount(count + 1)
}
return (


You clicked {count} times



Click me


);
}

export default App;

结果:每点一次按钮 +1,

无标题视频——使用Clipchamp制作.gif

为什么不是每次+3呢?

这是因为在每个setCount中的count的值都是当前的值,比如count为0,执行了3遍setCount(0 + 1) 所以这次更新count的结果是1

下面是函数式写法

import { useState } from 'react';

function App() {
// 声明一个叫 “count” 的 state 变量。
const [count, setCount] = useState(0);
const handleClick = () => {
setCount((count) => count + 1)
setCount((count) => count + 1)
setCount((count) => count + 1)
}
return (


You clicked {count} times



Click me


);
}

export default App;

结果:每点一次按钮 +3,

无标题视频——使用Clipchamp制作 (1).gif

通过函数式的写法,每次调用setCount函数时可以拿到本次更新count的最新状态,这样就实现在一次更新时对数据的重复操作。

引用数据类型

上面演示的是值类型的数据,对于引用类型数据需要额外注意一点,

下面看一个例子

import { useState } from 'react';

function App() {
// 声明一个叫 info 的 state 变量。
const [info, setInfo] = useState({
name: ‘张三’,
age: 18
});
const handleClick = () => {
info.name = ‘李四’
setInfo(info)
}
return (


name: {info.name} age: {info.age}



Click me


);
}

export default App;

结果:点击按钮的时候数据并没有发生改变。如果绑定一个引用类型,使用更新函数时需要改变值的引用,也就是重新去定义新数据

示例:

import { useState } from 'react';

function App() {
// 声明一个叫 info 的 state 变量。
const [info, setInfo] = useState({
name: ‘张三’,
age: 18
});
const handleClick = () => {
let newInfo = {…info}
newInfo.name = ‘李四’
setInfo(newInfo)
}
return (


name: {info.name} age: {info.age}



Click me


);
}

export default App;

immutable 编程规范

Immutable 编程规范是一种编程范式,它要求在编写程序时避免对数据进行修改,而是应该创建新的数据副本来进行修改。这样做的好处是可以避免出现意外的数据修改,提高程序的可靠性和可维护性。Immutable 编程规范通常使用不可变数据结构来实现,例如不可变对象、不可变集合等。在许多函数式编程语言中,Immutable 编程规范是被广泛采纳的一种编程风格。

在react中也就是useState创建的状态就是Immutable数据,是不可直接修改的,在修改的时候使用更新函数,而不要直接修改状态的值

另外推荐一个好用的第三方库,来约束你的行为

useImmer

安装方法: npm install use-immer --save

使用的方式和功能与useState类似,会规范你直接修改Immutable数据的行为

import { useImmer } from 'use-immer';
function App() {
  const [user, setUser] = useImmer({
    name : '张三',
    age: 16
  });
  const handleClick = () => {
    user.name = '李四'
    setUser(user)
  }
  return (
    
name: {user.name} age: {user.age}
click
) }

export default App;

直接修改user.name会报一下错误

另外使用useImmer声明的状态,推荐使用函数式写法可以拿到状态的值并修改,引用类型写法上相比useState更加方便,使用这种方式去修改状态。

import { useImmer } from 'use-immer';
function App() {
  const [user, setUser] = useImmer({
    name : '张三',
    age: 16
  });
  const handleClick = () => {
    setUser(draft => {
      draft.name = '李四'
    })
  }
  return (
    
name: {user.name} age: {user.age}
click
) }

export default App;

总结

react中使用useState创建状态变量,返回值是个数组分别是变量和更新函数,更新时要遵循immutable 编程规范使用更新函数修改数据,新手推荐看一下useImmer

以上就是对useState的总结,如有不足还请各位大佬多多指点,希望对大家有所帮助,如果喜欢可以点赞,关注,后面也会持续更新更多优质文章。


这是一个从 https://juejin.cn/post/7368372944584769577 下的原始话题分离的讨论话题