• react性能优化之useMemo,useCallback的使用


    //useMemo,useCallback
    import React, { memo, useMemo, useCallback, useState } from 'react';
    // import About from './About';
    
    const Foo = memo((props) => {
      let count = props.count;
      console.log("函数重新渲染");
      return <div onClick={props.addCount}>count:{count}</div>
    });
    
    // class App extends PureComponent {
    //   state = {
    //     count: 0,
    //     name: 0
    //   }
    //   render() {
    //     return (
    //       <Fragment>
    //         <Foo count={this.state.count} ></Foo>
    //         <button onClick={() => { this.setState(() => ({ count: this.state.count + 1 })) }}>加count</button>
    //       </Fragment>
    //     )
    //   }
    // }
    const App = memo(() => {
      const [count, setCount] = useState(0);
      let double = useMemo(() => {
        return count * 2
      }, [count==3]);
      let addCount=useCallback(()=>{    //useCallback 可以看成useMemo返回函数时的简写,赋值给onClick 不会引发函数重新渲染
        setCount((count) => count + 1)
      },[]);  //括号可以看成依赖数组,当为空时,只有第一次挂载时才会渲染,当有数据时如[count],当count改变时才会改变,有多个数据时,所有数据改变时才会改变
      // const addCount=()=>{
      //   setCount((count) => count + 1)
      // }
      return (
        <div>
          <Foo addCount={addCount} count={double}></Foo>   //防止传入函数会重复渲染,可以用上面的useMemo()或者它的简易实现useCallback 返回一个函数,节省性能
          <button onClick={()=>{setCount((count) => count + 1)}}>count+1</button>   //直接赋值当数据改变时,这个函数会重复渲染浪费性能
    </div> ) }) export default App;

      

  • 相关阅读:
    深入解析ATL 笔记1 添加一个simple object时做了什么
    分析MFC中CDialog的子类对象如何知道自己是model还是modeless的
    分析boost::signal之识别是否Trackable的派生类对象
    《转》汇编标志位
    <转> strcpy当初没有考虑到的地方
    <转>OD常用断点列表
    依赖倒转原则
    <转> xor eax, ebp” being used
    <转>NEG+SBB指令组合的用处
    函数Int3断点检测
  • 原文地址:https://www.cnblogs.com/uimeigui/p/12655619.html
Copyright © 2020-2023  润新知