强军网网站建设,俄语网站设计,下载关键词推广软件,深圳市公租房官网文档
useState useState如果是以函数作为参数#xff0c;那要求是一个纯函数#xff0c;不接受任何参数#xff0c;同时需要一个任意类型的返回值作为初始值。 useState可以传入任何类型的参数作为初始值#xff0c;当以一个函数作为参数进行传入的时候需要注意#xff…文档
useState useState如果是以函数作为参数那要求是一个纯函数不接受任何参数同时需要一个任意类型的返回值作为初始值。 useState可以传入任何类型的参数作为初始值当以一个函数作为参数进行传入的时候需要注意 如果只传入了函数名那么这个函数参数只会在初始化渲染的时候被调用后续页面发生变化也不会触发函数如果传入的是函数调用后的结果那么当初始化渲染和后续页面变化的时候都会触发函数。 import { useState } from react;export default function Counter() {const [age, setAge] useState(increment); // 因为传入的是函数名所以只有在初始化的时候才触发因此只有一个输出const [age, setAge] useState(increment()); // 传入的是函数返回的内容所以当点击1的按钮进行更新的时候也会触发increment函数所以一直会有输出function increment() {console.log(-----输出)return 0}function add(){setAge(a a 1);}return (h1Your age: {age}/h1button onClick{() {add();}}1/button/);
}箭头函数同理 import { useState } from react;export default function Counter() {const [age, setAge] useState(() {console.log(-----输出);return 0;});const [age, setAge] useState((() {console.log(-----输出);return 0;})());function add() {setAge((a) a 1);}return (h1Your age: {age}/h1buttononClick{() {add();}}1/button/);
}setState是变更state的方法它接受任何类型的值包括函数。需要注意的是set函数不会更新已经运行代码中的state状态变量因此 当一个运行中的代码存在同时多次触发同一个set函数的时候set中的state值其实都是之前没变化时的同一个。如果需要解决这个问题可以向set函数传递一个更新函数它必须是纯函数只接受待定的 state 作为其唯一参数并应返回下一个状态。此时更新函数将会获取待定状态并从中计算下一个状态。 //假设 age 为 42这个处理函数三次调用 setAge(age 1)
function add() {setAge(age 1); // setAge(42 1)因为add函数已经运行了set函数不会更新里面的age值所以取得全是上一次的值即42因此每个 setAge(age 1) 调用变成了 setAge(43)setAge(age 1); // setAge(42 1)setAge(age 1); // setAge(42 1)
}解决这个问题你可以向 setAge 传递一个更新函数而不是下一个状态 function handleClick() {setAge(a a 1); // setAge(42 43)setAge(a a 1); // setAge(43 44)setAge(a a 1); // setAge(44 45)
}这里a a 1 是更新函数。它获取待定状态并从中计算下一个状态。 React 将更新函数放入队列中。然后在下一次渲染期间它将按照相同的顺序调用它们 a a 1 将接收 42 作为待定状态并返回 43 作为下一个状态。 a a 1 将接收 43 作为待定状态并返回 44 作为下一个状态。 a a 1 将接收 44 作为待定状态并返回 45 作为下一个状态。 现在没有其他排队的更新因此 React 最终将存储 45 作为当前状态。 按照惯例通常将待定状态参数命名为状态变量名称的第一个字母如 age 为 a。然而你也可以把它命名为 prevAge 或者其他你觉得更清楚的名称。
其他参考 React Hooks中常用Hooks的用法详解 React Hooks中常用Hooks钩子的用法详解
