Preface,

React! React! React

I have learned about React and how React works, so I decided to start my React learning journey directly from components

Elements and Components

The React elements:

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

The React module:

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

The difference between an element and a component is that the component must return a function and be named with a capital letter!

What is a component

  • An example from life is that an object that can be combined with other objects is a component,
  • In Vue, for example, a construct option can represent a component.
  • React officially states that components are essentially JavaScript functions

React has two types of components: function components and class components

Function component

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
Copy the code

Usage:

<Welcome name="Wangpf"/>
Copy the code

The class components

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>; }}Copy the code

Usage:

<Welcome name="Wangpf"/>
Copy the code

The above two components are equivalent in React.

then<Welcome />Will be translated as React. CreateElement (….)

Let me use Babel Online to demonstrate this

Conclusion:

  1. If you pass in onestringFor example, “div” will create a div
  2. If you pass in onefunction, the function will be called,Gets its return value
  3. If you pass in oneclass, which causes constructor to be executed, gets a component object, and then calls the render method of the object,Gets its return value

A profound

Write props(external data, parameter passing) and state (internal data) in two component ways:

import React from 'react';
import "./style.css";

function App() {
  return (
    <div className="App">The parent component<Son messageForSon="I'm your boss." />
    </div>
  );
}

class Son extends React.Component {
  constructor() {
    super(a)this.state = {
      n: 0}}render() {
    return (
      <div className="Son">Child components<span> n: {this.state.n} </span>
        <button onClick={()= > { this.add() }}> +1</button>
        <p>I'm the child, and the parent says to me: {this.props. MessageForSon}</p>
        <Grandson messageForGrandson="I'm your boss, you're my boss's grandson." />
      </div>)}add() {
    // this.setState({
    // n: this.state.n + 1
    // })

    this.setState(state= > {
      const n = state.n + 1
      // console.log(n);
      return { n }
    })
  }
 }

const Grandson = (props) = > {
  const [n, setN] = React.useState(0)
  return (
    <div className="Grandson">Sun components<span> n : {n} </span>
      <button onClick={()= > { setN(n + 1) }}> +1</button>
      <p>I'm grandson, child said to me: {props. MessageForGrandson}</p>
    </div>)}export default App
Copy the code

Conclusion:

Using props (External data)

  • The class component reads directlyattribute this.props.xxx
  • The function component reads directlyparameter props.xxx

Use state (internal data)

  • Class components are read with this.state and written with this.setState
  • The function component returns an array using useState, the first item being read and the second item being written
    • const [n, setN] = React.useState(0)