React component directory structure

React declares components in two ways

  1. Class components

The state declared by the class component (uppercase) is either an object or null

class App extends React.Component{
  constructor() {
    super(a)this.state={
     data:1}}render() {
    return <h1>Hello, {this.props.title}</h1>; }}export default App;
Copy the code
  1. Function component

Return needs to have one and only one root tag

let Welcome=() = >{
  return (
    <div>

      <h1>hhh</h1>
      <p>2123</p>
    </div>)}Copy the code

A profound

Class component and function component usage details

  1. When you setN you get a new n instead of changing the old n
  2. this.setState({ n: this.state.n + 1 })}

SetState () uses an object wrapped around it, generating new objects instead of changing old data. This is the idea. 3. UseState,[n.setn]= useState (0), and does not change the original data Properties that are not set are automatically merged (only for the first level properties) function components are written separately and are not used automatically, they are overwritten (undefined) 6. Function components do not merge

<! -- Error demonstration, although executable, but do not write this -->// React doesn't listen for state like vue data does
this.state.n+=1
this.setState(this.state)
Copy the code

const [n,setN]=React.useState(0)


import React, { useState } from 'react';
import './App.css';

class App extends React.Component{
  constructor() {
    super(a)this.state=null
  }
  render() {
    return (
      <div>
        <h1>Hello, this is Grandpa component</h1>
            <Father></Father>
      </div>)}}class Father extends React.Component{
  constructor(){
    super(a)this.state={
      n:0}}render(){

      return(
        <div className="I am the father.">
            <p>i am father</p>
            <div>{this.state.n}</div>
            <button onClick={()= > this.setState({ n: this.state.n + 1 })}>click</button>
            <Son/>
        </div>)}}class Son extends React.Component{
  constructor(){
    super(a)this.state={
      nT:10}}render() {
    return(
      <div>
        <p>{this.state.nT}</p>
        <button onClick={()= >this.setState({nT:this.state.nT+10})}>+10</button>
      </div>)}}export default App;


Copy the code

New error

1.Cannot read property ‘setState’ of undefined Cause: Add does not bind this

class Son extends React.Component{
  constructor(){
    super(a)this.state={
      nT:10}}add() {
    // Write in the following format to avoid asynchronous errors.
    console.log(this)
    this.setState((state) = >{
      let nT=state.nT+10
      return {nT}
    })
  }
  render() {
    return(
      <div>
        <p>{this.state.nT}</p>
        <button onClick={this.add}>+ 10</button>
      </div>)}}Copy the code

How to resolve: Bind this

 constructor(){
    super(a)this.state={
      nT:10
    }
    this.add = this.add.bind(this)}Copy the code

Open setting.json and add the following snippet

  "emmet.includeLanguages": {"javascript":"javascriptreact"
  },
Copy the code

This refers to the window

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

Class component this

Fuck in this case is the fuck of the current instance object, equivalent to constructor. AddN is tied to the Son prototype

class Son extends React.Component{
  fuck=() = >{console.log(this)}
  constructor(){
    super(a)this.state={
      nT:10
    }
    this.add = this.add.bind(this)
  // this.add()=>{console.log(this)}
  }
  addN() {
    console.log("proto")}Copy the code

* React requires a solid js foundation,this

The React component uses a class component and a function component. In vue, a component is constructed using a constructor option. React uses JSX,vue uses template,

2. The difference between