React中useState如何保存函数

admin 2022年10月7日22:32:14评论66 views字数 2189阅读7分17秒阅读模式

useState想要保存函数的坑

先要明确一个概念:

React中useState如何保存函数
React中useState如何保存函数

useState右边括号中初始值为类似0这种类型的时候,其左边数组中初始值的类型也就为对应的number类型;

用一句简单的话来说,右边赋什么,左边就是什么,也就是说useState是能存储这些数据的,但是有一种类型除外,就是函数,见下图

React中useState如何保存函数

当右边为函数的时候,左边居然为void类型,怎么解决??

React中useState如何保存函数

只需将你想要保存的函数作为返回值即可!(其实这里利用了惰性加载,参见例a旁的注解)

  const [fn,setFn ] = React.useState(()=>()=>{});

useState中保存函数的实战与方案

注意比较下面的两个例子:

例a:(注意:useState中的函数一开始渲染的时候会立即执行!就是说useState右边括号中的函数在组件的初始渲染中会立即执行)

React中useState如何保存函数

例b:(完成了对函数的保存与更改)

React中useState如何保存函数
React中useState如何保存函数
React中useState如何保存函数
React中useState如何保存函数
import React from "react";
import "./styles.css";

export default function App2() {
const [fn, setFn] = React.useState(() => () => {
alert("I am init function");
});

console.log("fn: ", fn);

return (
<div className="App">
<button onClick={() => setFn(() => () => alert("update function"))}>
setCallback
</button>
<button onClick={fn}> callback </button>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>

);
}

React中useState如何保存函数

使用useRef的解决方案

使用useRef解决这个问题的坑:

import React from "react";
import "./styles.css";

export default function App3() {
const callbackRef = React.useRef(() => {
alert("I am init function");
});

const callback = callbackRef.current

console.log("callback: ", callback);

return (
<div className="App">
<button onClick={() => (callbackRef.current=() => alert("update function"))}>
setCallback
</button>
<button onClick={callback}> callback </button>
{/*s12*/}
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>

);
}

点击callback按钮:

React中useState如何保存函数

点击setCallback:

React中useState如何保存函数

再次点击callback按钮(发现没有变化,调用的还是原来的函数)

React中useState如何保存函数

上面问题的原因是什么?

useRef不是state,用useRef定义的只是普通的变量,不是本组件的状态,useRef这个容器里保存的值改变的时候,state不会改变,故不会触发渲染;

故s12处的callback还是第一次渲染时的callback!怎么解决这个问题??

只要将改变之后的callbackRef.current()重新读取出来即可,而不是读取之前的那个值

import React from "react";
import "./styles.css";

export default function App4() {
const callbackRef = React.useRef(() => alert("I am init function"));

const callback = callbackRef.current;

console.log("callback: ", callback);

return (
<div className="App">
<button
onClick={() =>
(callbackRef.current = () => alert("update function"))}
>
setCallback
</button>
{/*下面一行很重要!!!如果写成callbackRef.current也还是不行,这样读取的还是之前的值,并没有重新读取 */}
<button onClick={() => callbackRef.current()}> call callback </button>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>

);
}

React中useState如何保存函数
React中useState如何保存函数
React中useState如何保存函数

总结

本文主要小结了useState是如何保存函数的,主要是采用柯里化的方式,即类似于如下这种解决方式(主要是将你想要保存的函数作为返回值):

 const [fn, setFn] = React.useState(() => () => {
console.log("I am Currying")
});

至此,又解决了一个useState的坑


原文始发于微信公众号(迪哥讲事):React中useState如何保存函数

  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年10月7日22:32:14
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                   React中useState如何保存函数https://cn-sec.com/archives/1334773.html

发表评论

匿名网友 填写信息