setState

Update the data

  • SetState updates data asynchronously
  • Note: When using this syntax, the following setState() does not depend on the preceding setState().
  • SetState () can be called multiple times, triggering only one rerender
this.state = { count: 1 }
this.setState{{
    count: this.state.count + 1
}}
console.log(this.state.count)/ / 1
Copy the code

Recommend the grammar

  • Recommended: Use setState((state,props)=>{}) syntax
  • Parameter state: indicates the latest state
  • Parameter props: indicates the latest props
this.setState((state,props) = > {
    return {
       count: state.count + 1}})console.log(this.state.count)/ / 1
Copy the code

This syntax also triggers only one update

Second parameter

  • Scenario: Perform an action immediately after a status update (after the page has been rerendered)
  • Grammar: setState (update [, callback])
this.setState(
    (state,props) = > {},
    () = > {console.log('This callback will execute immediately after the status update.')})Copy the code
  • Using the second argument in the recommendation syntax, you can rely on the previous setState() in the callback function.
state = {
   count: 1}...this.setState(
    (state,props) = > {
       return {
      count: state.count + 1}},() = > {
          console.log('Status update completed'.this.state.count)// Status update completed: 2})console.log(this.state.count)/ / 1.Copy the code

JSX syntax transformation process

  • JSX is just syntactic sugar for the createElement() method (simplified syntax)
  • The JSX syntax is compiled as a createElement() method by the @babel/preset- React plug-in
  • React element: Is an object that describes what you want to see on the screen
Graph LR JSX syntax --> createElement --> React element

JSX grammar

const element = (
   <h1 className="greeting">
      Hello JSX!
   </h1>
 );
Copy the code

createElement

const element = 
React.createElement(
    'hi',
    {className: 'greeting'},
    'Hello JSX!'
);
Copy the code

The React elements

const element = {
   type: 'h1'.props: {
      className: 'greeting'.children: 'Hello JSX! '}};Copy the code

Component update mechanism

  • SetState () has two functions: 1. Modify state 2. Update component (UI)
  • Procedure: When the parent component is rerendered, the child component is also rerendered, but only the current component subtree (the current component and all its children) is rendered

Component performance optimization

To reduce the state

  • Reduce state: store only data related to component rendering (e.g. count/ list /loading, etc.)
  • Note: Data not to be rendered should not be placed in state, such as timer IDS, etc
  • For data that needs to be used in multiple methods, place it in this
class Hello extends Component {
  componentDidMount() {
    // The timerId is stored in this, not state
    this.timerId = setInterval(() = > {}, 2000)}componentWillUnmount() {
    clearInterval(this.timerId)
   }
   render(){... }}Copy the code

Avoid unnecessary re-rendering

  • Component update mechanism: It is clear that parent component updates cause components to be updated
  • Problem: Child components are rerendered without any changes
  • How do you avoid unnecessary rerendering?
  • ShouldComponentUpdate (nextProps,nextState) shouldProps
  • Function: Determines whether the component is re-rendered by returning a value, true for re-rendered, false for not re-rendered
  • Trigger time: hook function in update phase, executed before component rerenders (shouldComponentUpdate — >render)
class Hello extends Component {
   shouldComponentUpdate() {
     // Depending on the condition, decide whether to re-render the component
     return false
   }
   render(){... }}Copy the code

Pure component

  • Note: Pure component internal comparison is shallow compare
  • For reference types: only the references (addresses) of objects are compared
  • Note: When the properties in the props or state are of reference type, you should create new data, not modify the original data directly!

Virtual DOM

Implementation process

  1. For the first rendering React creates a virtual DOM object (tree) based on its initial state (Model).
  2. The real DOM is generated from the virtual DOM and rendered to the page.
  3. When the data changes (setState()), a new virtual DOM object (tree) is created based on the new data.
  4. With the virtual DOM object obtained last time, Diff algorithm is used to compare (find the difference) to get the content that needs to be updated.
  5. In the end, React simply updates the changed content into the DOM and renders it back to the page.