react 项目中的优化

  • Z时代
  • 2024-01-10
  • 分类：综合

react

react v16.6之后 的按需加载（2019.07.04更新）

React这个版本新加了lazy和Suspense这两个功能。

对于上面的按需加载，可以修改代码为：

import React, { Suspense } from 'react';
import Loading from './my-loading-component';
const LoadableComponent = React.lazy(() => import('./my-component'));
export default class App extends React.Component {
  render() {
    return  (
       <Suspense fallback={<Loading />}>
         <LoadableComponent/>;
       </Suspense>
    )
  }
}

lazy和Suspense相关文章

减少不必要的props引起的重绘

  1. shouldComponentUpdate (nextProps,nextState)

    优化性能，接下来的组件要不要更新

    如果写了shouldComponentUpdate，就一定要有返回值return true，不然为false。

    不写这个钩子函数默认返回一个true，只有在true的情况下，下面三个钩子函数才会执行

// 当state中的data发生改变的时候才触发render（返回 true 时触发 render）
shouldComponentUpdate(nextProps, nextState) {
  if (nextState.data !== this.state.data) {
    return true
  }
  return false
}

  1. useMemo

    Hooks组件则可以使用React.memo ，普通的 React.memo和PureComponent很像,对props做一层浅比较，如果没发生变更则不执行重绘。

    如果在Hooks针对特殊场景的比较，就需要传入React.memo的第二个参数compare, 来手动判断是否需要渲染。例如对于一个普通受控组件，当defaultValue发生变更时无需重绘组件，所以可以用下面的代码实现。

function MyComponent({ defaultValue, value, onChange }) {
  return null;
}
function compare(prevProps, props) {
  return prevProps.value === props.value && 
         prevProps.onChange === props.onChange;
}
export default React.memo(MyComponent, compare);

减少不必要state引起的重绘

在进入Hooks时代之后，我们使用 useState代替了setState, useState的一条最佳实践是将state尽可能的颗粒化，

这样会引入一个问题，在异步回调中同时更新多个状态时会触发多次渲染。

比如：下面是一个关于列表的分页信息

const [current, setCurrent] = useState(1); // 当前页数
const [pageSize, setPageSize] = useState("20"); // 每页条数

改成:

const [pagination, setPagination] = useState({
  current：1，
  pageSize："20"
});

在数量比较大得时候，就能明显得减少 render 次数。

以上是 react 项目中的优化 的全部内容， 来源链接： utcz.com/z/382008.html

回到顶部