react hooks useState 赋值优化解决方案
Posted uimeigui
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react hooks useState 赋值优化解决方案相关的知识,希望对你有一定的参考价值。
//性能优化一点,极少成多,网页会成为大厂所青睐的网页
//如下一个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> ); } export default App;
以上是关于react hooks useState 赋值优化解决方案的主要内容,如果未能解决你的问题,请参考以下文章
React hooks - 如何测试多个 useState hooks