What performance optimizations have been made to react components?

React component performance optimization includes: 1. Use as many stateless functions as possible to build components; 2. Split components into sub-components to have more fine-grained control over components; 3. Use PureRender to handle changes. Produce minimal rendering; 4. Use immutable.

React component performance optimizations include:

1. Use statelessness as much as possible Function to build components

Stateless components have only two parameters: props and context. It has no state and no life cycle method. The component itself is the render method in the stateful component construction method.

Stateless components should be used wherever appropriate. Stateless components do not create new instances when called like React.createClass and ES6 class. It always maintains an instance when it is created, avoiding unnecessary checks and memory allocation, and achieving internal optimization.

2. Split the component into sub-components and have more fine-grained control over the component

Related important concepts: Pure function

Pure function Three major principles:

Given the same input, it always returns the same output: For example, counterexamples include Math.random(), New Date()

The process has no side effects: that is, it cannot Changing external state

There are no additional state dependencies: that is, the state inside the method can only survive within the life cycle of the method, which means that shared variables cannot be used within the method.

Pure functions are very convenient for method-level testing and refactoring. It can make the program have good scalability and adaptability. Pure functions are the basis for functional expressions.

The React component itself is a pure function, that is, passing in the specified props to get a certain Virtual DOM, and the whole process is predictable.

Specific method

Split the component into sub-components to provide more fine-grained control over the components. Maintaining a pure state can make methods or components more focused, smaller, more independent, more reusable and testable.

3. Use PureRender to minimize rendering of changes

Related important concepts: PureRender

Pure of PureRender That is to say, the conditions of pure functions are met, that is, components rendered with the same props and state will get the same result.

Implementing PureRender in React requires reimplementing the shouldComponentUpdate life cycle method. shouldComponentUpdate is a special method that receives the props and state that need to be updated. Its essence is to perform correct component rendering. When it returns false, the life cycle method will no longer be executed downward; when it returns true, execution will continue downward.

The component will render a tree structure during the initialization process. When the parent node props change, ideally, only the nodes related to the changed props on one link will be rendered; however, by default, If the shouldComponentUpdate method returns true, React will re-render all nodes.

There are some official plug-ins that implement the rewriting of shouldComponentUpdate, and then you can also do some code optimization to use PureRender.

Specific method

(1) Use PureRender

Use the official plug-in react-addons-pure-render-mixin to implement shouldComponentUpdateRewriting

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
  }
  render() {
    return <div className={this.props.className}>foo</div>
  }
}

Its principle is to make a shallow comparison of objects (including props and state), that is, reference comparison, non-value comparison. For example, you only need to pay attention to whether each of the props is congruent (if the prop is an object, only the address is compared, and the address is the same), without in-depth comparison.

(2) Optimize PureRender

Avoid code writing that will trigger shouldComponentUpdate and return true no matter what.

Avoid directly setting literal arrays and objects for prop

Even if the value of the array or object passed in does not change each time, their addresses have also changed.

The following writing method will trigger shouldComponentUpdate to true every time the style is a new object when rendering:

<Account style={{color: &#39;black&#39;}} />

Improvement method: Set the literal to a reference:

const defaultStyle = {};
<Account style={this.props.style || defaultStyle} />

Avoid Bind the event every time

If you bind the event like this, a new onChange attribute value will be generated every time:

render() {
  return <input onChange={this.handleChange.bind(this)} />
}

It should be within the constructor as much as possible Binding, if the binding requires passing parameters, you should consider abstracting the subcomponent or changing the existing data structure:

constructor(props) {
  super(props);
  this.handleChange = this.handleChange.bind(this);
}
handleChange() {
  ...
}
render() {
  return <input onChange={this.handleChange} />
}

When setting up the subcomponent, override it at the parent component levelshouldComponentUpdate

4. Use immutable

Objects in JavaScript are generally mutable. Because reference assignment is used, changes to the new object will affect the original object. In order to solve this problem, deep copy or shallow copy is used, but this causes a waste of CPU and memory.

Immutable data solves this problem very well.

Immutable data is data that once created, cannot be changed. Modifying, adding, or deleting an Immutable object will return a new Immutable object. The principle of Immutable implementation is a persistent data structure. That is, when using old data to create new data, the old and new data are guaranteed to be available and unchanged at the same time. At the same time, in order to avoid the performance loss caused by deep copying, Immutable uses structural sharing, that is, if a node in the object tree changes, only this node and the parent node affected by it are modified, and other nodes are shared.

Related learning recommendations: javascript learning tutorial

The above is the detailed content of What performance optimizations have been made to react components?. For more information, please follow other related articles on the PHP Chinese website!