zoukankan      html  css  js  c++  java
  • 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;
    

      

  • 相关阅读:
    CPP STL学习笔记
    CPP 设计模式学习
    blackarch 安装指南
    通过 Http 请求获取 GitHub 文件内容
    实践
    升级
    部署-MySql 之Linux篇
    数据库
    RxJs
    Vue
  • 原文地址:https://www.cnblogs.com/uimeigui/p/12622895.html
Copyright © 2011-2022 走看看