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;

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM