React中如何性能优化

# 是什么

通过一些手段减少不必要的计算及render次数

# 怎么用

PureComponent/ShouldComponentUpdate

PureComponent 会对 props 与 state 做浅比较，所以一定要保证 props 与 state 中的数据是 immutable 的。
如果你的数据不是 immutable 的，或许你可以自己手动通过 ShouldComponentUpdate 来进行深比较。当然深比较的性能一般都不好，不到万不得已，最好不要这样搞。

React.memo
useMemo
useCallback

# 常规手段

避免内联函数
使用<>空标签
使用immutable数据 Immutable通过is方法则可以完成对比，而无需像一样通过深度比较的方式比较
使用懒加载
事件绑定方式优化
服务端渲染

# 原理

// 内联函数每次都重新创建
import React from "react";
export default class InlineFunctionComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Welcome Guest</h1>
        <input type="button" onClick={(e) => { this.setState({inputValue: e.target.value}) }} value="Click For Inline Function" />
      </div>
    )
  }
}

// 空标签
export default class NestedRoutingComponent extends React.Component {
    render() {
        return (
            <>
                <h1>This is the Header Component</h1>
                <h2>Welcome To Demo Page</h2>
            </>
        )
    }
}

// 懒加载
const johanComponent = React.lazy(() => import(/* webpackChunkName: "johanComponent" */ './myAwesome.component'));
 
export const johanAsyncComponent = props => (
  <React.Suspense fallback={<Spinner />}>
    <johanComponent {...props} />
  </React.Suspense>
);


import { renderToString } from "react-dom/server";
import MyPage from "./MyPage";
app.get("/", (req, res) => {
  res.write("<!DOCTYPE html><html><head><title>My Page</title></head><body>");
  res.write("<div id='content'>");  
  res.write(renderToString(<MyPage/>));
  res.write("</div></body></html>");
  res.end();
});

import ReactDOM from 'react-dom';
import MyPage from "./MyPage";
ReactDOM.render(<MyPage />, document.getElementById('app'));

# FAQ

#react

上次更新: 2021/12/19, 18:05:42

← 谈谈React中key的作用 React中hooks能取代redux吗→