Disappeared for a month, returned to the school graduation defense 👩🎓, the first week of formal entry.

1. The concept of render

React has one and only one render method per component: create a component class and declare a function, both of which return only one vertex node.

The Render method is used to render the React element into the actual DOM.

2. The triggerrendermechanism

  • It is first executed when the component is first loadedrender
  • During instantiation, when executingcomponentWillMoutAnd then it will executerenderTo mount the node to the page

Second, there are two situations in which render is triggered. First, setState causes a re-rendering of the component and second, when a new props property is received.

(1) Status update

A. Update the status of the class component inherited from react.component. b. Update the status of the class component inherited from react.component. c

import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
  render() {
    return <Foo />;
  }
}
class Foo extends React.Component {
  state = { count: 0 };
  increment = () => {
  const { count } = this.state;
  const newCount = count < 10 ? count + 1 : count;
  this.setState({ count: newCount });
};
render() {
  const { count } = this.state;
  console.log("Foo render");
  return (
    <div>
    	<h1> {count} </h1>
    	<button onClick={this.increment}>Increment</button>
    </div>
  );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Copy the code

The logic in the example code above is that clicking will update count, and after 10, it will no longer trigger. But as a result of the execution, render will still be called even if count goes above 10. To sum up, the class component inherits react.component.render is triggered when setState is called, even if the state does not change.

B. Implement the same component with a function when updating the status of a functional component, using useState Hook:

import React, { useState } from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
  render() {
  	return <Foo />;
  }
}
function Foo() {
const [count, setCount] = useState(0);
function increment() {
  const newCount = count < 10 ? count + 1 : count;
  setCount(newCount);
}
console.log("Foo render");
return (
  <div>
    <h1> {count} </h1>
    <button onClick={increment}>Increment</button>
  </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Copy the code

When the state value stops changing, the render call stops. For functional components, the render function is invoked only when the state value changes.

(2)propsThe property change

import React from "react";
    import ReactDOM from "react-dom";
    
    class App extends React.Component {
      state = { name: "App" };
      render() {
        return (
          <div className="App">
            <Foo />
            <button onClick={() => this.setState({ name: "App" })}>
              Change name
            </button>
          </div>
        );
      }
    }
    
    function Foo() {
      console.log("Foo render");
    
      return (
        <div>
          <h1> Foo </h1>
        </div>
      );
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);
Copy the code

As soon as you click the Change Name button in the App component, it will be rerendered. Also notice that Foo will be re-rendered regardless of what implementation it is. Whether the component is a class component that inherits from react.componentor a functional component, the component’s render is called again as soon as the parent container rerenders.

3.renderTrigger optimization

When the status is updated, sometimes you just want related components to be re-rendered, and not unrelated components to be re-rendered, so optimize them accordingly. There are many kinds of optimization methods. The following are two commonly used optimization methods:

  • shouldComponentUpdate(nextProps,nextState)Method isrenderA function executed before a function call can passnextProps,nextStateParameter to determine whether the current scene needs to be rerendered when
  • shouldComponentUpdatemethodsreturn trueReturn false prevents the component from rendering. In PureComponent, only the props and state parameters are accepted. If the props and state parameters are not changed, the PureComponent will not re-render, reducing the cost of render to some extent.