The story begins:

My last project, which was developed using React16.0 and fully using the hook-API, failed to pay attention to the React component rendering mechanism, resulting in significantly lower performance than expected. Development at that time, only to find that after the completion of the react hooks is the use of machinery, has failed to get the essence, in another react16.0 learning, saw to react. The memo this method, know the API is crucial for the component rendering optimization point.

Scene representation:

Take a look at the following code

//react 
const Child = (props) = > {
  console.log('child update')
  return (
  <div>
    {props.text}
  </div>)}const App = () = > {
  const [text, setText] = useState('I am text');
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={()= > setCount(count + 1)}>{count}</button>
      <Child text={text}/>
    </div>)}Copy the code

Why does the console print ‘Child Update’ every time I click a button?

What does the console output when the button button is manually clicked after the page is initialized? The answer is: Every time I click a button and count changes, the console prints’ Child Update ‘, meaning that the Child component has been rerendered, so why does count change affect the Child component? If you are a VUE user, you probably won’t have such doubts, because under VUE, this situation will never happen. For example:

//child 
<template>
	<div>{{text}}</div>
</template>

export default {
    props: {
    	text: {
        	type: String.default: ' '}},mounted() {
    	console.log('child mounted')},updated() {
    	console.log('child update')}}// parent
<template>
	<div>
    	<button @click='countAdd'>
        	{{count}}
        </button>
        <Child :text='text'/>
    </div>
</template>

export default {
    data() {
    	return {
            count: 0.text: 'child'}},methods: {
    	countAdd() {
        	this.count ++; }}mounted() {
    	console.log('child mounted')},updated() {
    	console.log('child update')}}Copy the code

For vue, this is easy to explain. The child depends on the text passed by the parent, and the count in the parent changes. The text does not change, so the child component does not need to be updated. In React, the state of the parent component changes, and the child component that does not depend on the changed data is re-rendered.

A one-way flow of data

Used for vue, because is the manner in which data was hijacked, so can easily know where the data was updated, because you know the location of the data changes, the components of rendering can be controlled, within the framework, the vue himself has optimized the component rendering time, to prevent a single data changes caused by large-scale component rendering, React causes unnecessary performance waste, but React is a one-way data flow, with data being passed primarily from parent nodes to child nodes (via props). If one of the props at the top level changes, React will re-render all the child nodes, but this will cause a lot of wasted performance. In react 16, we can use shouldComponentDidMount or PureComponent to control component rendering. In react 16, we can use shouldComponentDidMount or PureComponent to control component rendering

React.memo

This API allows a component to rerender only when its props change. Normally, the React component in the component tree will go through the rendering process whenever there is a change. But with react.Memo (), we can render only certain components.Copy the code

So for the scheme above of repeatedly rendering sub-components, only a minor modification is required

//react 
import {memo} from 'react';
const Child = memo((props) = > {
  console.log('child update')
  return (
  <div>
    {props.text}
  </div>)})Copy the code

Now that the react component is optimized, multiple clicks on the Button console will no longer print ‘Child Update’ multiple times.

Aside:

In fact, the above problems are solved very quickly, baidu search, one minute, but under the problem, there are more internal factors we need to actively understand, the business code is the same, but the internal coding ideas do need to be deeply thought.