20-类组件

函数组件中，响应函数直接以函数的形式定义在组件中，但是在类组件中，响应函数是以类的方法来定义

主要的区别是 this

类组件的 props

类组件的 props 是存储到类的实例对象中，可以直接通过实例对象访问this.props

类组件中 state

类组件中 state 统一存储到了实例对象的 state 属性中

可以通过 this.state 来访问 - 通过 this.setState() 对其进行修改 - 当我们通过 this.setState() 修改 state 时，React 只会修改设置了的属性

函数组件中，响应函数直接以函数的形式定义在组件中，用箭头函数，因为 this 会变

但是在类组件中，响应函数是以类的方法来定义，之前的属性都会保留 但是这你仅限于直接存储于 state 中的属性

获取 DOM 对象

1. 创建一个属性，用来存储 DOM 对象 divRef = React.createRef(); ，类比函数组件， divRef={current:null}
2. 将这个属性设置为指定元素的 ref 值

代码

import React, {Component} from 'react';

class User extends Component {

    // 创建属性存储DOM对象
    divRef = React.createRef();

    // 向state中添加属性
    state = {
        count: 0,
        test: '哈哈',
        obj: {name: '孙悟空', age: 18}
    };

    // 为了省事，在类组件中响应函数都应该以箭头函数的形式定义
    clickHandler = () => {
        this.setState({count: 10});
        this.setState(prevState => {
            return {
                 count: prevState + 1
             }
         });
        /*this.setState({
            obj:{...this.state.obj, name:'沙和尚'}
        });*/

        console.log(this.divRef);
    };


    render() {
        return (
            <div ref={this.divRef}>
                <h1>{this.state.count} --- {this.state.test}</h1>
                <h2>{this.state.obj.name} --- {this.state.obj.age}</h2>
                <button onClick={this.clickHandler}>点</button>
                <ul>
                    <li>姓名：{this.props.name}</li>
                    <li>年龄：{this.props.age}</li>
                    <li>性别：{this.props.gender}</li>
                </ul>
            </div>
        );
    }
}

export default User;

app.js

/*
*   Webstrom中的快捷方式：
*       rsc --> 函数组件（不带props）
*       rsi --> 函数组件（带props）
*       rcc --> 类组件
* */

import React, {Component} from 'react';
import './App.css';
import User from "./components/User";

class App extends Component {
    render() {
        return (
            <div className="app">
                <User name='猪八戒' age={28} gender={'男'}/>
            </div>
        );
    }
}

export default App;