[JavaScript知识库]React 类组件

第一章 React之类组件的使用

一、什么是类组件？

类组件必须继承React.Component
必须有render函数
render函数中必须有return

二、详细属性使用

1.props

代码如下（示例）：
类组件的props是存储到类的实例对象中，
可以直接通过实例对象访问 this.props

import React, {Component} from 'react';

class User extends Component {
	render(){
		return(
		<div>this.props.name</div>
	)	
	}
}
export default User;

2.state

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

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

代码如下（示例）：

import React, {Component} from 'react';

class User extends Component {
  // 向state中添加属性
    state = {
        count: 0,
        test: '哈哈',
        obj: {name: '孙悟空', age: 18}
    };
	render(){
		return(
		<div>this.state.count</div>
	)	
	}
}
export default User;

3.ref

• 创建一个属性，用来存储DOM对象
  divRef = React.createRef()
• 将这个属性设置为指定元素的ref值

代码如下（示例）：

import React, {Component} from 'react';

class User extends Component {
  // 向state中添加属性
  // 创建属性存储DOM对象
    divRef = React.createRef();
    // 为了省事，在类组件中响应函数都应该以箭头函数的形式定义
    clickHandler = () => {
        console.log(this.divRef);
    };
	render(){
		return(
		<button onClick={this.clickHandler}  ref={this.divRef}>点</button>
	)	
	}
}
export default User;