There are two ways to create Class components

  • ES5 mode (obsolete)
import React from 'react';

const A = React.createClass({
  render() {
    return (
       <div>hi</div>)}})export default A
// This is possible because ES5 does not support class
Copy the code
  • ES6 way
import React from 'react';

class B extends React.Component {
   constructor(props) {
      super(props);
   }
   return() {
     return (
        <div> hi </div>)}}export defailt B;
// Constructor must say super(), otherwise do not.
Copy the code

What kind of good

  • ES6 class mode is good
  • If the company you are interviewing is still working on IE8, would you like to change to another company

Props

  • Pass props to component B
class Parent extends React.Component {
   constructor(props){
       super(props)
       this.state = {name:'frank'}
     }
     onClick = () = >{}
     return() {return <B name={this.state.name}
                  onClick={this.onClick}>hi</B>}}// External data is wrapped as an object
   // {name:'frank',onClick:... ,children:'hi'}
   // onClick is a callback
Copy the code
  • Initialize the
class B extends React.Component {
   constructor(props) {
      super(props);
      }
      render(){}Copy the code

Either uninitialized (i.e., no constructor) or initialized, and must write all of it.

  • After doing this, this.props is the address of the external data object

  • read

class B extends React.Component {
   constructor(props) {
      super(props);
      }
      render(){
         return <div onClick={this.props.onClick}>
            {this.props.name}
            <div>
               {this.props.children}
            </div>
           </div>}}// read from this.props. XXX
Copy the code

How to read props? How to write props? No write props!!!!!!!!!!!!!!!!!!!!

Write Props

  • Change the value of props (an address)

    this.props={/Another object/}

    Don’t write code like this, it doesn’t make sense

    Reason: Since the data is external, it should be updated externally
  • This.props. XXX =’hi’.props. XXX =’hi’.props
  • Rules should be made to the data by its owner

The hook

  • ComponentWillReceiveProps hooks When the component to accept the new props, triggers the hook What is a hook? Slang, can be understood as “special function”
  • This hook has been abandoned renamed UNSAFE_componentWillReceiveProps to sum up, do not use this hook
  • No, why write it out because this hook was recommended in the past, so you can read old code

The role of Props

  • Accept external data can only be read but not written external data is passed by the parent component
  • Accept external functions and, when appropriate, call that function which is usually a function of the parent component

State & setState

Initialize the State

  • code
class B extends React.Component{
   constructor(props) {
      super(props);
      this.state = { 
         user: {name:'frank'.age:18}}}render() {/ *... * /}}Copy the code

The State of reading and writing

  • Read with this. The state this. State. XXX. Yyy. ZZZ
  • Written by enclosing setState (????? ,fn) this.setState(newState,fn) Note that setState does not immediately change this.state. This.setstate ((state,props)=>newState,fn).setState((state,props)=>newState,fn
  • Shallow Merge setState automatically merges the new state with the old state on write time

Don’t behave

  • N +=1 this.setState(this.state) Not recommended, but can be used (React can’t prevent you from writing this)

.

This article is originally published by FJL. The copyright of this article belongs to me and Hungry People Valley