react 类组件和函数组件以及vscode添加react代码提示react组件目录结构 react 声明组件的两种方

react组件 目录结构

react 声明组件的两种方式

类组件类组件(首字母大写) 声明的state要是一个对象或者为空

class App extends React.Component{
  constructor() {
    super()
   this.state={
     data:1
   }
  }
  render() {
    return <h1>Hello, {this.props.title}</h1>;
  }
}

export default App;

函数组件 return 需要有一个且只能有一个根标签

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

      <h1>hhh</h1>
      <p>2123</p>
    </div>
  )
}

小试牛刀

类组件和函数组件使用细节

当setN 时是得到一个新的n 而不是改变原有的n
this.setState({ n: this.state.n + 1 })} setState()使用一个对象包裹着,产生新的对象而不是改变原有的数据,这是一个理念
setState是异步的!
setState 类组件是等一会(异步函数)更新数据,useState,[n.setN]=usestate(0) 马上更新,并且不会改变原有的数据
setState 类组件里有n,m 没有被设置的属性会自动合并(仅仅针对第一层属性) 函数组件要分开写,并且不会自动沿用，会被覆盖掉(undefined)
函数组件不会合并

<!-- 错误示范,虽然可以执行,但是不要这么写 -->
// react 没有像vue data一样监听state
this.state.n+=1
this.setState(this.state)

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


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

class App extends React.Component{
  constructor() {
    super()
   this.state=null
  }
  render() {
    return (
      <div>
        <h1>Hello, 我是爷爷组件</h1>
            <Father></Father>
      </div>
  )}
}

class Father extends React.Component{
  constructor(){
    super()
    this.state={
      n:0
    }
  }

  render(){

      return(
        <div className="我是爸爸">
            <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()
    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;

新手报错

1.Cannot read property 'setState' of undefined 原因:add 没有绑定this

class Son extends React.Component{
  constructor(){
    super()
    this.state={
      nT:10
    }
    
  }
  add() {
    // 按照如下格式写,避免异步带来的错误。
    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>
    )
  }
}

如何解决: 绑定this

 constructor(){
    super()
    this.state={
      nT:10
    }
    this.add = this.add.bind(this)
  }

vscode如何添加react代码提示功能呢 打开setting.json 添加如下片段

  "emmet.includeLanguages":{
    "javascript":"javascriptreact"
  },

this的疑问 this 指向window

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

类组件的this

此时的fuck是当前实例对象的fuck，等价于constructor里。 addN 是绑在Son的原型上

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

*this的面试题 react需要扎实的js基础,this

*vue和react区别 1 react和vue的相同点 react组件用的是类组件和函数组件，vue中是通过一个构造选项构造一个组件都提供了createlment的xml写法，react 用的是jsx,vue用的是template模板写法,

2.不同点