React code specification

Methods that need to bind this can be done beforehand in the component’s constructor

constructor(props) {
    super(props);
    this.listClose = this.listClose.bind(this);
}
<div onClick={this.listClose}>X</div>
listClose() {
    
}
Copy the code

The setState method can return a function, which is more canonical, by saving this or the value of this outside the function. The function accepts the PrevState, equivalent to this.props

inputChange(e) {
    const value = e.target.value
    this.setState((PrevState) = > ({
      inputValue: value
    }))
}
Copy the code
  • Methods can be declared and then called using destruct assignment
import React, { Component } from 'react';
Copy the code
  • Longer JSX content that requires looping can be split into method calls, making the code look cleaner
getTodoItem() {
    return this.state.list.map((item,index) = > {
      return (
        <div>
          <TodoItem content = {item} itemIndex={index} listClose={this.listClose.bind(this)}></TodoItem>
        </div>)})}Copy the code

The React features

  • React is a one-way data flow and allows only the parent component to transmit values to its child components. The value of the parent component cannot be changed.
  • React can coexist with other frameworks or libraries
  • React development mode is component development
  • React is the framework of the view layer, which is only responsible for view data processing. Rdaux and other frameworks are required for complex value transfer problems
  • React is easy to program and maintain as a function