react学习笔记5：状态和组件this

最新推荐文章于 2025-05-01 23:47:07 发布

weixin_34302561

最新推荐文章于 2025-05-01 23:47:07 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/tbd/blog/1544654

本文介绍了React中状态(state)的概念及其在组件中的定义方法，包括如何通过构造函数设置初始状态，并利用setState方法更新状态来触发组件重新渲染。此外，还讲解了如何处理组件内的事件并确保事件处理函数中的this指向正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

什么是状态？就是组件默认要使用的数据

1.定义状态

在定义组件，我们知道使用的是子类继承父类的方式，我们直接在构造函数中设置即可：

//设置组件
class Event extends React.Component {
    constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            msg: "hello",
			count: 1
        };

    }
	render() {
	 return <div>
	 	<p>{this.state.msg}</p>
		<p>{this.state.count}</p>
	 </div>;
	}
}

这样，this.state就有绑定的各种初始化状态值了

整体代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


//设置组件
class Event extends React.Component {
    constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            msg: "hello",
			count: 1
        };

    }
	render() {
	 return <div>
	 	<p>{this.state.msg}</p>
		<p>{this.state.count}</p>
	 </div>;
	}
}


ReactDOM.render(
    <div>
		<Event />
	</div>,
    document.getElementById('root')
);
registerServiceWorker();

2.事件修改状态

react为我们提供了修改状态的api,就是继承父类而来的，

this.setState({状态名字:修改的值});

很简单，我们还是用click事件去操作，然后让count+1处理：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


//设置组件
class Event extends React.Component {
    constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            msg: "hello",
			count: 1
        };

    }
	add(){
		var newcount=this.state.count+1;
		this.setState({count:newcount });
	}
	render() {
	 return <div>
	 	<p>{this.state.msg}</p>
		<p onClick={this.add.bind(this)}>{this.state.count}</p>
	 </div>;
	}
}


ReactDOM.render(
    <div>
		<Event />
	</div>,
    document.getElementById('root')
);
registerServiceWorker();