1. JSX syntax

  • This helps prevent XSS because ReactDom escapes any values embedded in JSX before rendering, so it does not inject anything that has not been written in the program.
  • Babel will convert JSX to syntax to object (use react.createElement)

2. Render elements

  • ReactDom. Render (elements, doucument. GetElementById (” root “));
  • React elements are immutable and can be changed through stateful components (see below).
  • Elements that only change with that content (virtual Dom, Dom diff algorithm)

3, components,

  • Stateless component: A pure function that does not change the value passed in (returns a new value) and returns the same result for the same input.
  • State component: also called class component, has render function, has lifecycle, has state
  • The React element is immutable, so you need to set the react component as a class component (state component).

1. Define this.state from constructor

2, define the tick function, tick function call setState to change this. State (state can not be directly modified, must call setState modification oh! Otherwise the page will not be updated, and setState may be asynchronous (consistent, better performance), it will put all the states that need to be changed into a queue and will not update immediately, so you cannot rely on their values to calculate the next state)

3. Call the TICK function in the life Cycle componentDidMount loop. Once the state changes, the component re-invokes the Render lifecycle function to render the updated page

4, events,

  • React Trigger event 1: Trigger the event using onClick = {this.handleSome}. Bind this in constructor
  • React trigger event 2: Trigger event directly using the arrow function onClick = {()=> this.handlesome}
  • Conditional rendering: The process is to start function A and call setState inside function A to change the Boolean value of state

5, list

  • Use the map method to quickly create a list
list = arr.map((number) => 
    <li> key={number.toString()}>
         {number}
    </li>
)
Copy the code

Note: Keys are a must (if you want your program to be more optimized). Keys are set for better performance, like hash tables, unique keys for each element, and better diff algorithms

6. Controlled and uncontrolled components

  • Controlled components: Input form elements whose values are controlled by React (which store their own state or update based on user input, such as input,textarea,select) are called “controlled components.”

7. Life cycle

The interview component is all about life cycle, so…

The life cycle of Act16.8 + is divided into three phases. Mount phase, update phase, uninstall phase

Mount stage:

  • We usually initialize state in the constructor of a component and bind this.
  • getDerivedStateFromProps
  • render
  • ComponentDidMount: The component is already installed and can manipulate the DOM, remember to cancel the event in conponentwillUnmount. Recommended location for asynchronous requests.

Update phase:

  • getDerivedStateFromProps
  • ShouldComponentUpdate: update the state
  • render
  • getSnapshotBeforeUpdate:
  • ComponentDidUpdate: has been updated

Unloading stage:

  • componentWillUnmount

SetState synchronous or asynchronous?

  • SetState is only asynchronous, its execution process is synchronous, but the order of the synthesis event and the hook function is before the update, and the setState update is in shouldComponentUpdate, so that the synthesis event and the hook function can not get the update value immediately. So it’s asynchronous.
  • SetState update is also batch update. If setState is performed for a value for several times, the last time will be executed instead of real-time update. Batch update is also to ensure better performance.

8 key.

  • During development, we need to ensure that an element’s key is unique among its siblings. In the React Diff algorithm, React uses the Key value of an element to determine whether the element is newly created or moved, thus reducing unnecessary element re-rendering.

9 refs.

  • Refs is a handle to a DOM element or component instance that React provides us with secure access. We can add the ref attribute to the element and then accept the element’s handle to the DOM tree in the callback function, which is returned as the first argument to the callback function:
class CustomForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}
Copy the code

10, redux

* The biggest feature is the “one-way flow” of data.

  • User access to View

  • The View emits the user’s Action

  • Dispatcher receives Action requesting Store to update accordingly

  • After Store updates, issue a “change” event

  • View updates the page after receiving the “change” event

11. Controlled and uncontrolled components

  • The difference is who controls the form data. React controls are controlled components and DOM controls are uncontrolled components