react类组件在html中的使用

改了一个昵称

已于 2025-03-02 15:24:23 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： react.js 文章标签： react.js

于 2023-09-30 13:08:35 首次发布

本文链接：https://blog.csdn.net/pig_ning/article/details/133431746

react.js 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了如何在React中创建组件，管理state，以及如何在构造函数中绑定事件处理函数。重点讲解了参与界面更新的数据（state）和事件绑定中的this指向问题。

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React</title>

	<!-- 依赖3个包 -->
	<!-- 
		<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
		<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
		<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 
	-->

	<!-- 我把这3个包，下载到本地了 -->
	<script src="./lib/react-development.js"></script>
	<script src="./lib/react-dom-development.js"></script>
	<script src="./lib/babel-min.js"></script>
</head>


<body>
	<div id="app"></div>
</body>


<script type="text/babel">

1、
组件中的数据分为两类：
	1.1. 参与界面更新，的数据：当数据变化时，需要更新组件渲染的内容
			参与页面的数据，称为"参与数据流"，这个数据是定义在当前对象的state中的
			在`构造函数`中，用`this.state = { 变量名：变量值，变量名：变量值，... }`声明
        
			当`数据发生变化`时，可以用`this.setState`更新数据，并通知React进行update操作
			在进行update操作时，react会自动`重新调用render()`，并且使用最新的数据来渲染页面
		
    1.2. 不参与界面更新，的数据：当数据变化时，不需要更新组件渲染的内容
 
 
class App extends React.Component {
	constructor() {
		super()
		
		this.state = {
			message: 'Hello World',
			name: 'White',
			age: 18
		}
		
		提前在`构造函数`中绑定好this	
		this.btnClick = this.btnClick.bind(this)
	}

    
2、在类中直接定义一个函数，并将这个函数绑定到`元素的onClick事件`上，那么，当前这个函数的this指向的是谁呢？
	2.1、默认情况下，是`undefined`
			因为，在正常的DOM操作中，监听点击，监听函数中的this其实是节点对象（比如说是button对象）
			这里因为React并不是直接渲染成真实的DOM，我们所编写的button只是一个语法糖，它的本质是React的Element对象
			那么在这里发生监听的时候，react在执行函数时并没有绑定this，默认情况下就是一个undefined

	2.2、我们在绑定的函数中，可能想要使用当前对象，比如执行`this.setState`函数，就必须拿到当前对象的this
			可以这样做：
				在传入函数时，给这个函数直接绑定this
				如：<button onClick={this.btnClick.bind(this)}>修改</button>
    
    	
3、组件方法(实例方法)：
	内部完成了两件事：1、将state中message修改掉；2、自动重新执行render()函数


	btnClick() {
		this.setState({
			message: 'helloReact'
		})
	}

	// 渲染内容
	render() {
		return (
			<div>
				<h2>{this.state.message}</h2>
				// 已经在构造函数中，提前绑定好this了
				<button onClick={this.btnClick}>修改文本</button>
			</div>
		)
	}

4、
	如果，不提前在`构造函数`中 this.btnClick = this.btnClick.bind(this) 这样绑定好this，
	就要在onClick时，绑定好，如：<button onClick={this.btnClick.bind(this)}>修改</button> 

} // end-class


const root = ReactDOM.createRoot(document.querySelector('#app'))
root.render(<App />)

</script>
</html>