React知识-----②

四、类组件

react也是组件化开发，然后主要分为类组件和函数式组件

类组件创建快捷键：rcc

import React, { Component } from 'react'

export default class Class extends Component {
  render() {
    return (
      <div>class</div>
    )
  }
}

跟es6语法类似，创建的类组件继承react中的Component

export default导出后就可以在别的地方使用

在index.js中将刚刚的类组件当成标签去使用

import React from "react";
import ReactDom from 'react-dom/client'
import App from '../src/01-base/class'
const root = ReactDom.createRoot(document.getElementById('root'))

root.render(<App></App>)

组件之间也可以嵌套使用 跟Vue中父子组件类似

在render中通过JSX语法可以返回需要渲染的页面结构，外层需要用一个div包着

----- 事件处理 -----

事件处理写法跟原生js类似，可以写在行内，也可以在类内写方法

React并不会真正将事件绑定在元素上，而是采用事件代理模式

import React, { Component } from 'react'

export default class Class extends Component {
  render() {
    return (
      <div>
        <button onClick={()=>{
            console.log(123)
        }}>click</button>
        <button onClick={()=>{
            this.say()
        }}>say</button>
      </div>
    )
  }
  say = () =>{
    console.log('hello')
  }
}

----- 状态 -----

React不像Vue那样双向绑定 所以要借助状态

正常思路是这样修改变量的 但是实际上是修改不了name的

//错误写法
import React, { Component } from 'react'

export default class Class extends Component {
    name = "frosen"
    render() {
    return (
      <div>
        <button onClick={()=>{
            this.name = 'curry'//无法修改
        }}>click</button>
        <div>{this.name}</div>
      </div>
    )
  }
}

//正确写法
import React, { Component } from 'react'

export default class Class extends Component {
    state = {
        name:'frosen'
    }
    render() {
    return (
      <div>
        <button onClick={()=>{
            this.setState({
                name:'curry'
            })//通过setState方法来修改状态里的变量
        }}>click</button>
        <div>{this.state.name}</div>
      </div>
    )
  }
}

同时注意 变量外层需要用{ }嵌套

----- 属性 -----

React属性跟Vue也有点类似，父组件向子组件传递变量，子组件通过props调用

父组件

import React, { Component } from 'react'
import Props from './01-props'

export default class index extends Component {
  render() {
    return (
      <div>
        {/* 类组件 */}
        <span>a</span>
        <Props name="a"></Props>
        <span>b</span>
        <Props name="b" isShow={false}></Props>
      </div>
    )
  }
}

子组件

import React, { Component } from 'react'

export default class props extends Component {
  //props默认值  
  static defaultProps = {
        isShow:true
    }
    render() {
        console.log(this.props)
    return (
      <div>
        {this.props.isShow&&<button>返回</button>}
        <span>名字是------{this.props.name}</span>
      </div>
    )
  }
}

this.props可以接收父组件传递的属性

----- 状态与属性的区别 -----