React and Redux performance

React

  1. React Server Render improves first screen rendering speed

    • Conducive to SEO
    • Speed up rendering time on the first screen
    • The front and back ends share data sources

    Using Reacr renderToString, React. RenderToStaticMarkup.

  2. Place the bind of methods in constructor to avoid multiple bind.

  3. Pass only props that Component needs. Don’t say

    .

  4. Components that don’t need to pass in state are written as const elements to speed up the initial rendering of that element.

  5. Set a peer unique key in the DOM that can be recognized by React, otherwise the situation may not be rerendered.

  6. Use ‘Stateless Functional Component’ as a Stateless Component

    • Class is not necessary
    • There is no this keyword
    • Stateless components have less code to write,
    • To facilitate the test

React’s stateless components are an elegant way to implement reusable components. Chestnuts are as follows:

const Pane = (props) => <div>{props.children}</div>;

Pane.propTypes = {
  label: React.PropTypes.string.isRequired,
  children: React.PropTypes.element.isRequired
};

  1. Use pureRender to avoid meaningless rendering of components, and immutable to reduce rendering.

  2. Use react-CSS-modules to solve naming chaos, global pollution, and dependency management problems, which sometimes lead to style conflicts in collaborative development. One caveat is that if the following two are reversed, they will be wrong.

@connect(mapStateToProps, mapDispatchToProps)
@CSSModules(styles)

Redux

Data

Problems caused by flat and non-flat project data:

  1. Data copy is more time-consuming
  2. It’s a bit of a hassle to get the data

The combineReducers of Redux can flatten data very well. If immutable is used, it is highly intrusive. Not only do you need to modify the combineReducers (because the combineReducers implementation is mutable data), but also you need to pay attention to whether the data is immutable, so as not to null. If immutable is used, redux-immutable is recommended.

return { ... state, newData }Copy the code

This is itself an immutable form, but requires that the data level be not too deep. Immutable is recommended for complex data.

Pure-render -decorator is recommended as a convenient way to control component rendering.

	import pureRender from 'pure-render-decorator';
	@pureRender
	class ...
Copy the code

When immutable is used, the data is converted as follows:

  • Mutable changes can be done on the Reducer of redux
  • Immutable variables are performed at mapStateToProps and getState()

Redux-immutable, seamless- Immutable is smaller and more compatible. Only Arrays and Objects are supported.

Data screeningreselect

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

Whenever the Store changes, connect triggers recalculation, and the selector function needs to be cached in order to reduce repeated unnecessary computations and reduce the performance cost of large projects. Reactjs/resELECT is recommended. The code for caching is shown below.

export function defaultMemoize(func, equalityCheck = defaultEqualityCheck) { let lastArgs = null let lastResult = null const isEqualToLastArg = (value, index) => equalityCheck(value, lastArgs[index]) return (... args) => { if ( lastArgs === null || lastArgs.length ! == args.length || ! args.every(isEqualToLastArg) ) { lastResult = func(... args) } lastArgs = args return lastResult } }

If the values of the input-selectors are the same as the previous call to the selector, it will return the previously computed value instead of calling the transform function.

If the data provided by Todos in state. Todos is not changed, the result calculated before will be returned, so that much calculation cost can be reduced. The implementation can be found at github.com/reactjs/res…

Specific usage: modify the reUDx official demo below

import { createSelector } from 'reselect' const getVisibilityFilter = (state) => state.visibilityFilter const getTodos =  (state) => state.todos export const getVisibleTodos = createSelector( [ getVisibilityFilter, getTodos ], (visibilityFilter, todos) => { switch (visibilityFilter) { case 'SHOW_ALL': return todos case 'SHOW_COMPLETED': return todos.filter(t => t.completed) case 'SHOW_ACTIVE': return todos.filter(t => ! t.completed) } } )

Batched actions

If we need to send many actions at the same time, for example:

dispatch(action1)
dispatch(action2)
dispatch(action3)
Copy the code

To reduce unnecessary calculations, redux-batched-actions is recommended

dispatch(batchActions[action1, action2, action3])
Copy the code

The source is very simple github.com/tshelburne/…

Redux DevTools

Use DevTools in your development. You are advised to use Google plug-ins. You are not advised to insert DevTools into the page structure.

redux-devtools-extension

Remove devTools from your development and production environments to avoid unnecessary performance overhead and file sizes. Chestnuts are as follows:

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./configureStore.prod');
} else {
  module.exports = require('./configureStore.dev');
}

Note: The DefinePlugin plugin needs to be used in webpack.

new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('production')
  }
}),
Copy the code

related

  • Disable redux-devTools during mobile terminal development. This may cause lag

Past collection of articles, blogs

React performance engineering — A Better File for testing the React performance of A front-end system based on Flux React/Redux Applications Getting Started with Redux React REACT&REDUX SCROLL LIST package redux-Axios-Middleware AXIOS is compatible with IE9 and provides promise. React – Router Immutable router Immutable Router Immutable

Probably the whole project specific optimization on these, the details of the plug-in and implementation you go to see the documentation. I will continue to update it later, and my favorite friend Star will give me some support.