React 性能优化之非必要的渲染问题解决_React
时间:2022-07-19 09:19 来源:网络 作者:清浅 点击:次
1. 非必要组件渲染在 React 工程中,在改变 React 状态时,我们希望对整个页面的影响越小越好。然而实际情况是更改掉某些属性之后,除了会导致组件本身的重新渲染,也可能会导致其相关的组件也发生重新渲染。请看下面的例子:
// 父组件: import React, { Component } from 'react' import Child from './Child' class Parent extends Component { constructor(props) { super(props) this.state = { parentInfo: 'parent', sonInfo: 'son' } this.changeParentInfo = this.changeParentInfo.bind(this) } changeParentInfo() { this.setState({ parentInfo: `改变了父组件state:${Date.now()}` }) } render() { console.log('Parent Component render') return ( <div> <p>{this.state.parentInfo}</p> <button onClick={this.changeParentInfo}>改变父组件state</button> <br/> <Child son={this.state.sonInfo}></Child> </div> ) } } export default Parent // 子组件: import React, {Component} from 'react' class Child extends Component { constructor(props) { super(props) this.state = {} } render() { console.log('Child Component render') return ( <div> 这里是child子组件: <p>{this.props.son}</p> </div> ) } } export default Child
打开控制台,我们可以观察到,在点击按钮的时候控制台会输出 在这个例子中,点击按钮,仅仅改变了父组件相关的状态,而子组件的状态不变。因此,最理想的情况是只重新渲染父组件,而子组件则不会被重新渲染。 为了提高其性能,我们需要通过某种手段来抑制状态未发生改变的组件的渲染。
2. 解决方案之 shouldComponentUpdate
3. 解决方案之 PureComponent
浅比较:首先比较两个对象的 key 长度是否一致,然后检测每一个 key 是否两者都有,并且是否是一个引用。
使用方法和普通的组件差不多,只是在类组件创建的时候将扩展的 import React, { PureComponent} from 'react' export default class myComponent extends PureComponent { //... render() { // ... } }
4. 解决方案之 React.memo
和 在 Hooks 诞生之前,函数组件是没有状态的。因此,React.memo 仅仅会检查 props 是否发生变更。如果函数组件的实现包括 useState 或者 useContext 这些 Hooks,状态发生变化时,他也会重新渲染。
5.
|