[JavaScript知识库]React之类组件与函数组件

类组件

所谓类组件，就是用ES6的class来定义组件

定义类组件

import React, { Component } from "react";

export default class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hello: "hello world",
        };
    }

    handleClick = () => {
        this.setState({hello:"hello react"})
    }

    render() {
        const { hello } = this.state;
        return (
            <>
                <div>{hello}</div>
                {/* 不需要加括号 */}
                <button onClick={this.handleClick}>点击修改</button>
            </>
        );
    }
}

类组件中的函数

• 上面例子中所使用的函数是箭头函数，众所周知，箭头函数没有this，那么这里的this就是使用的外部的this，实例化之后也就是指，实例化之后的对象
• 所以，如果不用箭头函数来定义函数的话，需要在constructor绑定一下this

constructor(props) {
    super(props);
    this.state = {
        hello: "hello world",
    };
    this.handleClick = this.handleClick.bind(this)
}

handleClick(){
    this.setState({hello:"hello react"})
}

函数组件

• 在react-hooks之前，函数组件本身没有this，所以自身不能存放状态，一般用于传递数据进行展示

函数组件

export default function MyComponent2(){
    console.log(this);
    return <div>Hello,函数组件</div>
}

我们打印this，就会发现他是undefined

阅读世界，共赴山海

423全民读书节，邀你共读