React学习笔记---面向组件编程

最新推荐文章于 2024-07-30 09:45:00 发布

丑小鸭变黑天鹅

最新推荐文章于 2024-07-30 09:45:00 发布

阅读量726

点赞数 1

分类专栏： React专栏文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_41880073/article/details/122001758

版权

本文详细探讨了React的基础知识，包括函数式组件和类式组件的使用，重点阐述了组件的三大核心属性——state、props和refs的详细用法。文章还涉及React事件处理、表单数据的收集，以及高阶函数的概念，特别是函数柯里化的应用。通过对这些概念的深入理解，有助于提升React开发技能。

摘要由CSDN通过智能技术生成

一、基本理解和使用

1、函数式组件

首先声明，不管是函数式组件，还是类式组件，

组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1_函数式组件</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//1.创建函数式组件
		function MyComponent(){
     
			console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
			return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		/* 
			执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
					1.React解析组件标签，找到了MyComponent组件。
					2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
		*/
	</script>
</body>
</html>

2、类式组件

先回顾一下js中类的相关知识

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>1_类的基本知识</title>
</head>

<body>
  <script type="text/javascript">
		/* 
			总结：
				1.类中是必须的构造器不要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。
				2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
				3.类中所定义的方法，都放在了类的原型对象上，供实例去使用。
		*/
    //创建一个Person类
    class Person {
     
      //构造器方法
      constructor(name, age) {
     
        //构造器中的this是谁？—— 类的实例对象
        this.name = name
        this.age = age
      }
      //一般方法
      speak() {
     
        //speak方法放在了哪里？——类的原型对象上，供实例使用
        //通过Person实例调用speak时，speak中的this就是Person实例
        console.log(`我叫${
       this.name}，我年龄是${
       this.age}`);
      }
    }

    //创建一个Student类，继承于Person类
    class Student extends Person {
     
      constructor(name, age, grade) {
     
        super(name, age)
        this.grade = grade
        this.school = '尚硅谷'
      }
      //重写从父类继承过来的方法
      speak() {
     
        console.log(`我叫${
       this.name}，我年龄是${
       this.age},我读的是${
       this.grade}年级`);
        this.study()
      }
      study() {
     
        //study方法放在了哪里？——类的原型对象上，供实例使用
        //通过Student实例调用study时，study中的this就是Student实例
        console.log('我很努力的学习');
      }
    }

    class Car {
     
      constructor(name, price) {
     
        this.name = name
        this.price = price
        // this.wheel = 4
      }
      //类中可以直接写赋值语句,如下代码的含义是：给Car的实例对象添加一个属性，名为a，值为1
      a = 1
      wheel = 4
      static demo = 100
    }
    const c1 = new Car('奔驰c63', 199)
    console.log(c1);
    console.log(Car.demo);
  </script>
</body>

</html>

再看一下react类式组件怎么写

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_类式组件</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//1.创建类式组件
		class MyComponent extends React.Component {
     
			render(){
     
				//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
				//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
				console.log('render中的this:',this);
				return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		/* 
			执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
					1.React解析组件标签，找到了MyComponent组件。
					2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
					3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
		*/
	</script>
</body>
</html>

二、组件实例的三大核心属性

1、state

1）、理解state

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

2）、用一个例子去看一下react组件中怎么用state

先回顾一下原生js绑定点击事件的几种方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<button id="btn1">按钮1</button>
		<button id="btn2">按钮2</button>
		<button onclick="demo()">按钮3</button>

		<script type="text/javascript" >
			const btn1 = document.getElementById('btn1')
			btn1.addEventListener('click',()=>{
     
				alert('按钮1被点击了')
			})

			const btn2 = document.getElementById('btn2')
			btn2.onclick = ()=>{
     
				alert('按钮2被点击了')
			}

			function demo(){
     
				alert('按钮3被点击了')
			}

		</script>
	</body>
</html>

再回顾一下类方法中this的指向

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
    <script type="text/javascript" >
			class Person {
     
				constructor(name,age){
     
					this.name = name
					this.age = age
				}
				study(){
     
					//study方法放在了哪里？——类的原型对象上，供实例使用
					//通过Person实例调用study时，study中的this就是Person实例
					console.log(this);
				}
			}

			const p1 = new Person('tom',18)
			p1.study() //通过实例调用study方法
      //类中定义的方法默认开启了严格模式，所以x()是直接调用。并不是通过实例调用，所以结果是undefined，并不是window
			const x = p1.study
			x()

		</script>
	</body>
</html>

下面看一下例子，看一下state怎么用，其中的一些知识点都写在注释里了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>state</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//1.创建组件
		class Weather extends React.Component{
     
			
			//构造器调用几次？ ———— 1次
			constructor(props){
     
				console.log('constructor');
				super(props)
				//初始化状态
				this.state = {
     isHot:false,wind:'微风'}
				//解决changeWeather中this指向问题
				this.changeWeather = this.changeWeather.bind(this)
			} 

			//render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数
			render(){
     
				console.log('render');
				//读取状态
				const {
     isHot,wind} = this.state
				return <h1 onClick={
     this.changeWeather}>今天天气很{
     isHot ? '炎热' : '凉爽'}，{
     wind}</h1>
			}

			//changeWeather调用几次？ ———— 点几次调几次
			changeWeather(){
     
				//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
				//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
				//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
				
				console.log('changeWeather');
				//获取原来的isHot值
				const isHot = this.state.isHot
				//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
				this.setState({
     isHot:!isHot})
				console