zoukankan      html  css  js  c++  java
  • 使用useMemo优化性能

    使用useMemo优化性能:

    import React, { Suspense, useMemo } from 'react'
    import { Switch, Route } from 'react-router-dom'
    import { connect } from 'react-redux'
    import Loading from '../../../components/light/Loading'
    import Header from './Header'
    import Nav from './Nav'
    
    function List(props) {
      const { router } = props
     
    
      // 只有router变化时才会重新渲染listDom,useMemo函数可以起到性能优化的作用
      const listDom = useMemo(() => {
        const listDom = []
        const listRender = (arr) => {
          arr.forEach((item) => {
            if (item.children) {
              listRender(item.children)
            } else {
              listDom.push(
                <Route
                  key={item.path}
                  path={item.path}
                  component={item.component}
                ></Route>
              )
            }
          })
        }
        listRender(router.toJS())
        return listDom
      }, [router])
    
      return (
        <div className="m-list">
          <Header></Header>
          <div className="m-list-info">
            <Nav></Nav>
            <Suspense fallback={<Loading isLazyLoading={true}></Loading>}>
              <Switch>{listDom}</Switch>
            </Suspense>
          </div>
        </div>
      )
    }
    
    const mapStateToProps = (state) => {
      return {
        router: state.getIn(['light', 'router']),
        theme: state.getIn(['light', 'theme']),
      }
    }
    
    const mapDispatchToProps = (dispatch) => {
      return {
        onSetState(key, value) {
          dispatch({ type: 'SET_LIGHT_STATE', key, value })
        },
        onDispatch(action) {
          dispatch(action)
        },
      }
    }
    
    export default connect(mapStateToProps, mapDispatchToProps)(List)
    

    使用useEffect也可以优化性能:

    import React, { Suspense, useEffect, useState} from 'react'
    import { Switch, Route } from 'react-router-dom'
    import { connect } from 'react-redux'
    import Loading from '../../../components/light/Loading'
    import Header from './Header'
    import Nav from './Nav'
    
    function List(props) {
      const [listDom, setListDom] = useState([])
      const { router } = props
    
    
      // 只有router变化时才会重新渲染listDom,useEffect函数可以起到性能优化的作用
      useEffect(() => {
        const listDom = []
        const listRender = (arr) => {
          arr.forEach((item) => {
            if (item.children) {
              listRender(item.children)
            } else {
              listDom.push(
                <Route
                  key={item.path}
                  path={item.path}
                  component={item.component}
                ></Route>
              )
            }
          })
        }
        listRender(router.toJS())
        setListDom(listDom)
      }, [router])
    
    
      return (
        <div className="m-list">
          <Header></Header>
          <div className="m-list-info">
            <Nav></Nav>
            <Suspense fallback={<Loading isLazyLoading={true}></Loading>}>
              <Switch>{listDom}</Switch>
            </Suspense>
          </div>
        </div>
      )
    }
    
    const mapStateToProps = (state) => {
      return {
        router: state.getIn(['light', 'router']),
        theme: state.getIn(['light', 'theme']),
      }
    }
    
    const mapDispatchToProps = (dispatch) => {
      return {
        onSetState(key, value) {
          dispatch({ type: 'SET_LIGHT_STATE', key, value })
        },
        onDispatch(action) {
          dispatch(action)
        },
      }
    }
    
    export default connect(mapStateToProps, mapDispatchToProps)(List)
    
  • 相关阅读:
    table導出excel | 後臺
    web导出excel文件的几种方法
    请求ajax失败或者不执行的原因
    css冲突
    css之底部风格
    1.5 (SQL学习笔记)事务处理
    1.4(SQL学习笔记)分组、子查询、联结、组合查询
    1.3(SQL学习笔记)计算字段及函数
    1.2(SQL学习笔记)高级数据过滤
    1.1(SQL学习笔记)SQL基础
  • 原文地址:https://www.cnblogs.com/xutongbao/p/14876262.html
Copyright © 2011-2022 走看看