大型网站建设兴田德润赞扬,直播平台推荐,服务平台是什么意思,做网站工作室找客户难结论#xff1a; 16 hooks版本 默认render1次 同步中#xff0c;无论多少种类还是次数#xff0c;都render 1次。 异步中#xff0c;无论多少种类还是次数#xff0c;1个种类执行1次#xff0c;多次的话#xff0c;用n*2。 18 hooks版本 默认render2次#xff0c; 同步…结论 16 hooks版本 默认render1次 同步中无论多少种类还是次数都render 1次。 异步中无论多少种类还是次数1个种类执行1次多次的话用n*2。 18 hooks版本 默认render2次 同步中无论多少种类还是次数都render 2次。 异步中无论多少种类还是次数都render 2次。 15版本, class版本 this.setState是异步的set 3次就会合并在callback可以获取最新值 但是在setTimeout同步的。(set 3次就会执行三次) 15 class版本看这个地址 react18
import React, { useState, useEffect } from react;
// 最新的react 16
function Test() {console.log(----render) // 默认执行2次const [countA, setCountA] useState(111);const [countB, setCountB] useState(222);function onClick() {// 一个种类一个set执行2次render// 二个种类各一次set,那么执行2次render// 二个种类及以上执行2次render还是执行2次setCountA(countA 1)// setCountA(countA 1)// setCountA(countA 1)// setCountA(countA 1)// setCountB(countB 1)// setCountB(countB 1)// setCountB(countB 1)// setCountB(countB 1)setTimeout(() {// 一个种类一个set执行2次render// 二个种类各一次set,那么执行2次render// 二个种类及以上执行2次render还是执行2次// setCountA(countA 1)// setCountA(countA 1)// setCountA(countA 1)// setCountA(countA 1)// setCountB(countB 1)// setCountB(countB 1)// setCountB(countB 1)// setCountB(countB 1)});}useEffect(() {}, []);return (divp{countA}-{countB}/pbutton onClick{onClick}点击我/button/div)
}
export default Test;react16
import React, { useState, useEffect } from react;
// 最新的react 16
function Test() {console.log(--render) // 默认执行1次const [countA, setCountA] useState(111);const [countB, setCountB] useState(222);function onClick() {// 一个种类一个set执行1次render// 二个种类各一次set,那么执行1次render// 二个种类及以上执行2次render还是执行1次// setCountA(countA 1)// setCountA(countA 1)// setCountA(countA 1)// setCountA(countA 1)// setCountB(countB 1)// setCountB(countB 1)// setCountB(countB 1)// setCountB(countB 1)setTimeout(() {// 一个种类一个set执行1次render// 二个种类各一次set,那么执行2次render// 二个种类及以上n执行2次render及以上n*2setCountA(countA 1)setCountA(countA 1)setCountA(countA 1)setCountA(countA 1)setCountB(countB 1)setCountB(countB 1)setCountB(countB 1)setCountB(countB 1)});}useEffect(() {}, []);return (divp{countA}-{countB}/pbutton onClick{onClick}点击我/button/div)
}
export default Test;react16, 18
import React, { useState } from react;function App() {const [number, setNumber] useState(0);function alertNumber() {setTimeout(() {alert(number); // 操作步骤先点击弹窗然后快速按钮永远弹出的是016和18都这样子}, 3000);}return (div classNameAppp{number}/pbutton onClick{() setNumber(number 1)}/buttonbutton onClick{alertNumber}alertNumber/button/div);
}
export default App;一下的以前的博客不可靠
react刷新几次问题 15版本, class版本 this.setState是异步的set 3次就会合并在callback可以获取最新值 但是在setTimeout同步的。(set 3次就会执行三次) 15 class版本看这个地址 16版本hooks版本 setState set几次就会render几次但是有惰性。不会批处理。 18版本 批处理了。异步。可以调用同步的api。 setTimeout中的也可以批处理了。 legacy模式下命中batchedUpdates时是异步 未命中batchedUpdates时是同步的 concurrent模式下都是异步的,react 17添加了这个concurrent模式 react 16 setTimeout异步中的setA不可控制 useState会对state进行逐个处理useState的原理是用闭包机制而setTimeout中任务是无法拿到闭包中的变量的所以当遇到 setTimeout时在setTimeout拿不到最新的值。 setState会进行一个合对象的则只会处理最后一次。 当遇到 setTimeout/setInterval/Promise.then(fn)/fetch 回调/xhr 网络回调时react 都是无法控制的,这个根react本身的原因有关系。 react 18 中对setTimeout中连续两次的setA也进行了合并不知道18中setTimeout可不可以控制。 const [a, setA] useState(123);
console.log(----render);
return (div classNameApph1{a}/h1button onClick{() {// react 16 刷新两次, 结果仍然为124 react18刷新一次setA(a1);setA(a1);}}fffff/button/div
);
----------------------------------------
const [number,setNumber] useState(0);
function alertNumber(){setTimeout((){alert(number); // 不论您点击多少次下边的click这里就是0},3000);
}
return (p{number}/pbutton onClick{()setNumber(number1)}/buttonbutton onClick{alertNumber}alertNumber/button/
)
----------------------------------------
export default function App() {console.log(render----);const [ca, setCa] useState(1);const aclick () {setTimeout(() {// 会执行两次但是最后的结果只会1setCa(ca 1);setCa(ca 1);});}return (div classNameApp onClick{aclick}{ca}/div);
}
