reacthooksuseState赋值优化解决⽅案//性能优化⼀点，极少成多，⽹页会成为⼤⼚所青睐的⽹页
//如下⼀个hooks函数
import React,{useState} from 'react';
// import TodoList from './TodoList';
function App() {
let a=1;
console.log(1) //可以看到数据更新，就执⾏⼀次，上⾯的let a 也执⾏，数据较多时损耗性能。
const [b,setb]=useState(a);  //hooks解构赋值
return (
<div className="App">
{b}
<button onClick={()=>{setb(b+1)}}></button>
</div>
);
}
export default App;
  //可以采⽤如下⽅式
import React,{useState} from 'react';
// import TodoList from './TodoList';
function App() {
// console.log(1)
const [b,setb]=useState(()=>{
let a=1;
console.log(a);  //可以看到采⽤这种⽅式，数据只在第⼀次初始化，当数据较多时，节省性能。
return a;
});
return (
<div className="App">
{b}
<button onClick={()=>{setb(b+1)}}></button>
</div>
);
}
reacthooks理解
export default App;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。