react类组件在html中的使用

一嘴一个橘子

已于 2024-03-21 10:26:56 修改

阅读量580

点赞数

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

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

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

版权

react.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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> 

  }


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

</script>
</html>