react 性能问题和优化

某个组件更新,子组件也会一起更新

react更新采用时间切片,vue则是依赖收集

执行更新操作为16ms,如果操过16ms,先暂停更新,让浏览器先渲染

时间切片时间是16ms,因为人眼刷新率约60帧,60hz为16ms

1.避免state改为同样的值(class用PureComponent,函数组件默认已经处理了)

2.处理子组件更新(class用PureComponent,函数组件用meno)

3.子组件的props对象/方法需要注意是否会更新,基本属性不会造成更新

 

import styles from './index.less';
import { Button } from 'antd';
import React, { useCallback, useMemo, useState } from 'react';
import Son from './components/son'
let MemoSon = React.memo(Son)
const HomePage: React.FC = () => {
  let [num, setNum] = useState(0)
  // 更新num--index组件更新--重新定义obj和f1
  // let obj = {
  //   a: 1
  // }
  // function f1() {
  //   console.log(1)
  // }
  let obj = useMemo(() => {
    return {
      a: 1
    }
  }, [])
  let f1 = useCallback(() => {
    console.log(1)
  }, [])
  let a = '1'
  return (
    <div className={styles.container}>
      <h2>性能问题和优化</h2>
      <div>某个组件更新,子组件也会一起更新</div>
      <div>react更新采用时间切片,vue则是依赖收集</div>
      <div>执行更新操作为16ms,如果操过16ms,先暂停更新,让浏览器先渲染</div>
      <div>时间切片时间是16ms,因为人眼刷新率约60帧,60hz为16ms</div>
      <div>1.避免state改为同样的值(class用PureComponent,函数组件默认已经处理了)</div>
      <div>2.处理子组件更新(class用PureComponent,函数组件用meno)</div>
      <div>3.子组件的props对象/方法需要注意是否会更新,基本属性不会造成更新</div>
      <div>{num}</div>
      <Button type="primary" size="small" onClick={() => {
        setNum(num + 1)
      }}>修改数据</Button>
      {/* 会更新子组件 */}
      {/* <Son></Son> */}
      {/* 不会更新子组件 */}
      {/* <MemoSon></MemoSon> */}
      <MemoSon obj={obj} f1={f1} a={a}></MemoSon>
    </div>
  );
};



export default HomePage;