1 Elements and components

const div = React.createElement('div',...)
Copy the code

This is a React element (d lowercase)

const Div = () => React.createElement('div'...)
Copy the code

This is a React component (capital D)

What is a component?

For now, a function that returns a React element is a component

2 React Two components

  • Function component

    function Welcome(props){
  return <h1> hello, {props.name} </h1>; } <Welcome name ="frank"/>
Copy the code

  • Class components

class Welcome extends React.Component{
  render(){
    return <h1> Hello,{this.props.name}</h1>}} How to use:<Welcome name = "frank"/>
Copy the code

3 <Welcome/>

  • What will it be translated into

    • <div />Will be translated intoReact.createElement('div')
    • <Welcome />Will be translated intoReact.createElement(Welcome)

  • The React. The createElement method of logic

    • If a string ‘div’ is passed, a div(virtual DOM) is created

    • If a function is passed in, the function is called and its return value is retrieved

    • If a class is passed in, call new in front of the class (which causes constructor to be executed), get a component object, and then call the render method of the object to get its return value

    class Welcome extends React.Component{
  constructor(){
    super(a)this.state = {n : 0} / / initialization
  }
  render(){
    return <h1> Hello,{this.props.name}</h1>}}new Welcome()
<Welcome name = "frank"/>
Copy the code

4 Adding props (External Data)

Props can’t write, they can only read!

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">dad<Son />{/* subtags can be class */}</div>
  );
}

class Son extends React.Component {
  / / initialization
  constructor() {
    super(a);this.state = {
      n: 0
    };
  }
  add() {
    // this.state. N += 1
    this.setState({ n: this.state.n + 1 });
  }
  render() {
    return (
      <div className="Son">The son n: {this. State. N}<button onClick={()= > this.add()}>+1</button>
        <Grandson />
      </div>); }}const Grandson = () = > {
  // Destruct assignment
  // const array = React.useState(0);
  // const n = array[0]
  // const setN = array[1] returns a new n instead of changing the original n
  const [n, setN] = React.useState(0);
  return (
    <div className="Grandson">The grandson n: {n}<button onClick={()= > setN(n + 1)}>+1</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
// App is a function that calls App() to create a div and place it in root
Copy the code
<Son messageForSon = "Hello, son." />
<Son messageForSon = {a} /> / / variable
<Son messageForSon = "{hi}" /> / / string
Copy the code
  • The class component reads the this.props. XXX property directly
[{this.props.messageForSon}]
Copy the code
  • The function component reads the parameter props. XXX directly
[{props.messageForGrandson}]
Copy the code

5 Add state (internal data)

(Data in Vue)

  • Use state in class components

    Read with this.state and write with this.setState

class Son extends React.Component {
  
  constructor() {
    super(a);this.state = {
      n: 0
    };
  }
  // Initialize the data
  
  add() {
    // React doesn't listen in real time, so this.state.n += 1 doesn't work
    // create a new object (asynchronous)
    this.setState({ n: this.state.n + 1 });
    // Pass in an old state (asynchronous)
    this.setState((state) = > {
      return {n : state.n + 1}})/ / writing 3
    this.setState((state) = > {
      const n = state.n + 1
      return {n}
    })
  }
  
  render() {
    return (
      <div className="Son">Son n: {this.state.n} {/* Read the value of state this.state.n */}<button onClick={()= > this.add()}>+1</button>{/* Write the value of state. Call this.setState */} with this.add().<Grandson />
      </div>); }}Copy the code

Matters needing attention:

  1. This.state. n+=1 invalid? The N has been modified for the variations, but the UI will not be updated automatically

    Using setState will trigger UI updates

    React doesn’t listen on data the way Vue listens on data

  2. Setstate updates the Ui asynchronously

    After setState, the state doesn’t change right away, reading state right away will fail and the more recommended way is setState (function)

  3. This.setstate (this.state) is not recommended

    React: setState ((n: state.n+1))

  • Use state in function components

    Use useState to return an array of initial values, the first item read, the second item written

const Grandson = () = > {
  // Initialize const [read, write]
  const [n, setN] = React.useState(0);
  return (
    <div className="Grandson">SetN :{n} {/* Write state setN does not change n, but asynchronously generates a new n*/}<button onClick={()= > setN(n + 1)}>+1</button>
    </div>
  );
};
Copy the code

Matters needing attention:

  1. Something like a class component

    Also update the UI with setX(new value)

  2. Different from class components

    Without this, use parameters and variables

6. How to deal with complex states

  • Class components have n and m

    class Son extends React.Component {
  constructor() {
    super(a);this.state = {
      n: 0.m: 0
    };
  }
  
	addN() {
    this.setState({ n: this.state.n + 1 });
    // will m be overwritten as undefined?
    // If you change only one part of the setState in the class component, the rest of the component automatically uses the last value
  }
  addM() {
    this.setState({ m: this.state.m + 1 });
    // will n be overwritten as undefined?
  }
  render() {
    return (
      <div className="Son">The son n: {this. State. N}<button onClick={()= > this.addN()}>n+1</button>
        m: {this.state.m}
        <button onClick={()= > this.addM()}>m+1</button>
        <Grandson />
      </div>); }}Copy the code

    The setState of a class component automatically merges layer 1 properties, but not layer 2 properties.

    With… Operator or Object.assign

    class Son extends React.Component {
  constructor() {
    super(a);this.state = {
      n: 0.m: 0.user: {
        name: "frank".age: 18}}; }changeUser() {
    this.setState({
      // m and n will not be null
      user: {
        ...this.state.user,
        // const user = Object.assign({},this.state.user);
        // equivalent to const user = {... this.state.user}
        name: "jack"
        // age is null
      }
      // If not... The {name: "frank", the age: 18} = > {name: "jack"}
    });
  }
  render() {
    return (
      <div className="Son">
        <button onClick={()= > this.changeUser()}>change user</button>
      </div>); }}Copy the code

  • Function components have n and m

    const Grandson = () = > {
  const [n, setN] = React.useState(0);
  const [m, setM] = React.useState(0);
  return (
    <div className="Grandson">The grandson n: {n}<button onClick={()= > setN(n + 1)}>n+1</button>
      m:{m}
      <button onClick={()= > setM(m + 1)}>m+1</button>
    </div>
  );
};
Copy the code

    Function components generally do not write setState because multiple attributes are not automatically merged

7 Event Binding

  • Class component event binding

    • Better to write it this way
    <button onClick = {() = > this.addN()}> n+1 </button>
Copy the code

    Just pass a function to onClick

    Can be rewritten as

    this._addN = () = > this.addN()
<button onClick = {this._addN}> n+1 </button>
Copy the code

    In the end of writing

    class Son extends React.Component{
  addN = () = > this.setState({n: this.state.n + 1});
	render(){
    return <button onClick={this.addN}>n+1</button>}}Copy the code
    • I can’t write that
    <button onClick = {this.addN}> n+1 </button>
// button.onClick.call(null, event)
// this === null =>window
Copy the code

    This causes this in this.addN to become window

    • There’s another way to write it
    <button onClick = {this.addN.bind(this)}> n+1 </button>
Copy the code

    It returns a new function bound to the current this

  • Function component event binding

function App() {
  const [n, setN] = React.useState(0)
  return ( 
    <div className="App">
      n: {n} 
      <button onClick={()= >setN(n+1)}>+1</button>
    </div>
  );
}
Copy the code