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)
    
  • 相关阅读:
    吴裕雄--天生自然 JAVASCRIPT开发学习:函数定义
    吴裕雄--天生自然 JAVASCRIPT开发学习: JSON
    吴裕雄--天生自然 JAVASCRIPT开发学习: this 关键字
    吴裕雄--天生自然 JAVASCRIPT开发学习: 验证 API
    吴裕雄--天生自然 JAVASCRIPT开发学习: 表单验证
    吴裕雄--天生自然 JAVASCRIPT开发学习: 表单
    吴裕雄--天生自然 JAVASCRIPT开发学习: 变量提升
    吴裕雄--天生自然 JAVASCRIPT开发学习: 错误
    【codeforces 742A】Arpa’s hard exam and Mehrdad’s naive cheat
    【codeforces 742B】Arpa’s obvious problem and Mehrdad’s terrible solution
  • 原文地址:https://www.cnblogs.com/xutongbao/p/14876262.html
Copyright © 2011-2022 走看看