render渲染优化

如果当一个组件不再依赖于某个值时，则组件不需要更新，react 在默认情况下render 所有组件如何解决？

graph TD
classComponent --> render --> purComponent --> 类组件继承 --> purComponents
FunctionComponent --> render --> meno --> 函数式组件meon -->包裹函数组件

函数式组件
import { memo } from 'react';
const ProductList = memo(() => {
  console.log('Product Render');

  return (
    <div>ProductList </div>
  )
})

export default ProductList


类组件
import { PureComponent } from 'react'
import Home from './components/Home'
import ProductList from './components/ProductList'
interface AppState {
  message: string
}
export default class App extends PureComponent {
  constructor(props: App) {
    super(props)
    this.state = {
      message: '五花肉'
    } as AppState
  }
  update() {
    this.setState({ message: '111ss' })
  }

  shouldComponentUpdate(nextProps: Readonly<AppState>, nextState: Readonly<{}>, nextContext: any): boolean {
    const { message } = this.state as AppState
    if (message !== nextProps.message) {
      return true
    }
    else {
      return false
    }

  }
  render() {
    const { message } = this.state as AppState
    return (
      <div>
        <div>这是一个{message}</div>
        <button onClick={() => this.update()}>点击更新</button>
        <Home message={message} />
        <ProductList />
      </div>
    )
  }
}

purComponents 原理

在类组件继承 pureComponents ，setstate 更新时如果引用的是同一个地址值时，视图将不会更新

原理：React内部通过 shouldComponentUpdate 新的 props 和旧的 props 进行浅层比较，如果是同一个引用地址则React 会认为没有发生更新。

React 类组件与函数式组件 render 性能优化

render渲染优化

purComponents 原理