[리액트패밀리 버켓러닝] 리액트 내 컴포넌트 정의 및 상태 속성 (매우 상세/필수)

Language 2023-05-17 10:59:59 views: null

기능적 구성 요소의 정의 및 특성

정의(코어는 가상 돔을 반환하는 함수입니다):

import React from 'react'

export default function index() {
  return <div>index</div>
}

특징:

  • 1. [단순 부품]의 정의에 해당
  • 2. 가상돔을 반환하는 함수입니다.
  • 3. 함수 이름은 구성 요소 이름입니다.

클래스 구성 요소의 정의 및 특성

학습하기 전에 수업 관련 지식을 검토할 수 있습니다.

ES6--클래스 클래스(상세/읽은 후 읽음)_class es6_suoh's Blog's Blog's Blog-CSDN Blog

또는 다음 코드를 통해 사용할 클래스의 지식 포인트를 검토하십시오(주의 깊게 읽으면 도움이 됨).

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

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<script>
		/**
		 * 总结：
		 * 1、类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写
		 * 2、如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的
		 * 3、类中所定义的方法，都是放在了类的原型对象上，供实例使用
		 */
		// 创建一个Person类
		class Person {
			// 构造器方法，接收参数
			constructor(name, age) {
				// 构造器中的this是谁？---是类的实例对象（p1/p2）
				this.name = name
				this.age = age
			}
			// 一般方法
			speak() {
				// speak方法放在了哪里？--Person的原型对象上，供实例使用
				// 通过Person实例(p1/p2)调用speak时，speak中的this就是Person实例
				console.log(`我的名字是${this.name},我的年龄是${this.age}~`)
			}
		}
		// 创建一个Person的实例对象
		const p1 = new Person("小锁", 19)
		const p2 = new Person("小索", 20)
		p1.speak() //实例p1调用Person类原型链上的方法speak
		p2.speak() //实例p2调用Person类原型链上的方法speak
		p1.speak.call({
			a: 1,
			b: 2
		}) //使用call调用改变this指向，传的是谁，this就指向谁
		// 创建一个Student类，继承于Person类
		class Student extends Person {
			// 这里不需要接收s1传过来的姓名和年龄参数，因为我们继承了Person，
			// Person里面接收了这两个参数，下面我们只需要接收年级就好了
			constructor(name, age, grade) {
				// 下面写法不可取，因为属性多的时候，会和父类的赋值重复非常冗余
				// 	this.name = name
				// 	this.age = age
				// 因此我们利用super关键字，帮助我们在子类中调用父类
				// 将父类接收的2个参数传递过去即可
				// 注意：super关键字必须写在最前面，不能处于this.grade = grade之后
				super(name, age)
				this.grade = grade
			}
			// 重写从父类继承过来的方法
			speak() {
				console.log(`我的名字是${this.name},我的年龄是${this.age},我的年级是${this.grade}~`)
			}
			// 一般方法
			study() {
				// study方法放在了哪里？--类的原型对象上，供实例使用
				// 通过Student实例s1调用speak时，speak中的this就是Student实例
				console.log(`我的名字是${this.name},我的年龄是${this.age}~`)
			}
		}
		const s1 = new Student('小美', 19, '大学')
		console.log(s1)
		// 如果自身不存在学生也能访问到父类的speak方法，原型链的原因
		s1.speak()
	</script>
</body>

</html>l

특징:

  • 1. [복잡한 구성 요소]의 정의에 적용
  • 2. 컴포넌트를 클래스로 정의한 후 해당 클래스의 인스턴스를 새로 생성하고 해당 인스턴스를 통해 프로토타입의 render 메소드를 호출한다.
  • 3. render에 의해 반환된 virtual dom을 real dom으로 변환하고 페이지에 표시

정의:

import React, { Component } from 'react'
// 创建类式组件
export default class index extends Component {
  // render是放在哪里的？--在index组件的原型对象上，供实例使用
  // render的this是谁？--在index组件的实例对象（index组件实例对象）
  render() {
    console.log(this)
    return <div>index</div>
  }
}

이것을 인쇄해 보겠습니다. 출력은 구성 요소의 인스턴스 개체입니다.

보충 1: 복잡한 구성 요소란 무엇입니까?

복합 구성 요소: 상태가 있는 구성 요소를 복합 구성 요소라고 합니다. 

외부 데이터(this.props를 통해 액세스)를 사용하는 것 외에도 구성 요소는 내부 상태 데이터(this.state를 통해 액세스)를 유지할 수 있습니다 . 구성 요소의 상태 데이터가 변경되면 구성 요소는 render() 메서드를 다시 호출하여 해당 마크업을 다시 칠합니다. 

보충 2: 주(state)란 무엇입니까?

  • 상태는 구성 요소 객체의 가장 중요한 속성이며 값은 객체입니다(여러 키-값 조합을 포함할 수 있음).
  • 구성 요소는 구성 요소의 상태를 업데이트 (구성 요소를 다시 염색) 하여 해당 페이지 표시를 업데이트하는 "상태 기계"라고 합니다.
  • 반응에서 구성 요소의 상태를 업데이트한 다음 새 상태에 따라 사용자 인터페이스를 다시 렌더링합니다(DOM을 조작하지 않음).

state에 있는 값은 수정이 가능하며, 수정할 수 있는 유일한 방법은 this.setState(후술)를 호출  하는 것 뿐입니다 .

(즉, this.state.num = 2이런 식으로 값을 직접 수정하는 것은 무효)
컴포넌트의 생성자에서 state를 할당받는다. 

예를 들어 상태의 값에 따라 페이지가 변경되도록 합니다.

상태에 주 매개변수를 넣으려면 상태 값은 객체(여러 키-값 조합을 포함할 수 있음)이며 단계는 다음과 같습니다.

 정상적으로 들어오는 것을 확인할 수 있습니다

 상태 값을 읽으려면 직접 this.state.xxx

구조 분해 할당을 사용하여 코드를 단순화할 수도 있습니다.

  

  

 그런 다음 click 이벤트를 통해 이 속성을 동적으로 변경하고 싶습니다. 어떻게 처리해야 합니까? 반응형 이벤트 바인딩에 대해 이야기해 봅시다.

보충 3: 반응 중인 이벤트 바인딩

react의 이벤트 바인딩은 기본 js와 비슷하지만 기본적으로 약간의 차이가 있습니다.

예를 들어 이벤트 이름 지정 방법: 기본 onclick --> 반응은 onClick, 기본 onblur --> 반응은 onBlur 등입니다.

  • React 이벤트는 순수한 소문자( onclick) 대신 ( onClick)과 같이 작은 카멜 케이스로 이름이 지정됩니다.
  • JSX 구문을 사용할 때 문자열 대신 함수를 이벤트 핸들러로 전달해야 합니다.

시도 해봐:

페이지에서 오류를 보고했습니다. 문자열을 사용하는 것만으로는 충분하지 않은 것 같습니다. 

 번역하면 onClick은 문자열이 아닌 함수여야 한다고 합니다.

 괜찮은. 상당히 다사다난합니다. 함수인지 확인하기 위해 중괄호로 묶어야 하는 것 같습니다.

방법 1: 클릭 이벤트가 렌더링에 기록됩니다.

 참고: 라벨의 기능에 괄호를 직접 추가하면 표시되는 즉시 호출을 시작합니다.

그래서 괄호를 빼주셔야 완벽합니다~

 이때 위의 내 함수 testFunc의 정의가 render에 있다는 것을 누군가 발견할 수 있습니다.

방법 2: 물론 다른 작성 방법이 있는데 함수를 외부에 작성하는 것입니다(권장).이 둘의 차이점은 다음과 같습니다.

보충 4: 렌더링 내부와 외부에 작성된 반응 이벤트 함수의 차이점 

 React의 이벤트 함수는 렌더링 안팎에서 작성할 수 있지만 차이점은 다음과 같습니다.

  • 1. render 로 작성된 이벤트 함수는 렌더링 주기 이후 매번 다시 인스턴스화될 수 있어 최신 상태를 보장할 수 있는 반면 render 외부에서 작성된 이벤트 함수는 처음으로 로드될 때만 인스턴스화되며 최신 상태 보장할 수 없습니다.
  • 2. render 로 작성된 이벤트 함수는 최신 props 및 state를 갖도록 다시 인스턴스화할 수 있지만 render 외부에서 작성된 이벤트 함수는 처음으로 로드될 때만 props 및 state를 얻을 수 있으므로 보장할 수 없습니다. 최신 소품 및 상태.
  • 3. render 로 작성된 이벤트 함수는 render의 내용과 결합하여 더 나은 가독성과 유지 관리를 달성 할 수 있으며, render 외부에서 작성된 이벤트 함수는 코드 구조를 더 명확하게 만들고 코드를 읽기 쉽게 만들 수 있습니다.
  • 4. render 로 작성된 이벤트 함수는 함수를 추가할 필요가 있으며 이것은 를 호출할 때 추가되어야 하며 , render 외부에서 작성된 이벤트 함수는 함수를 추가할 필요가 없으며 를 호출할 때 이것을 추가할 필요가 없습니다 .
  • 5. 렌더링에서 this.setState 이벤트를 호출하면 무한 루프에 빠지게 됩니다(이유는 블로거 참조: setstate_Mr. Xiao Liu의 블로그-CSDN 블로그를 작성하기 위해 렌더링에서 this.setState_render를 호출하지 마십시오 ) . 따라서 대부분의 시나리오에서 외부 렌더링을 작성하는 것이 좋습니다 .

요컨대, render와 render 외부에서 작성된 이벤트 함수는 각각의 장점과 단점이 있으며, 이를 사용할 때 실제 상황에 따라 선택해야 합니다.

여기에 문제가 있습니다. 이제 클릭 이벤트를 인식할 수 있습니다. 그런 다음 클릭할 때 상태의 주 값을 변경하고 싶습니다. 어떻게 작성해야 합니까? 어떤 사람들은 직접 할당하는 것이 낫다고 말합니다.

 효과를 보십시오: 클릭했을 때 상태가 정의되지 않았다는 오류가 보고되었으며, 이는 이를 통해 상태를 찾을 수 없다는 의미입니다.

대담한 추측: 이 포인팅에는 문제가 있습니다.

보충 5: 클래스에서 메서드의 this 지점을 수정하는 방법

 생성자의 this와 렌더링의 this는 모두 인덱스 구성 요소 인스턴스를 가리키고 있는데 함수의 this에 undefined가 나타나는 이유는 무엇입니까?

(1) 클래스에 정의된 메서드는 이미 엄격 모드를 로컬에서 활성화했기 때문에

(2) 인스턴스를 통해 호출해야만 정상이고 testFunc 를 onClick 의 콜백으로 사용하므로 인스턴스를 통해 호출하지 않고 직접 호출하므로 this 는 undefined 를 가리킨다.

다음으로 이것을 인덱스 구성 요소 인스턴스를 가리키도록 변경할 수 있습니다. 해결 방법은 무엇입니까?

이것의 포인트를 변경하는 방법은 호출  화살표 함수  바인드를 적용하는 것입니다. 모두 시도하십시오.

call과 apply 모두 시도했고, 뜨는 즉시 실행되기 때문에 현실적이지 못하다.

 

 참고: 바인딩은 나중에 호출하기 편리한 해당 함수를 반환하는 것이고 적용 및 호출은 즉시 호출하는 것입니다.

            화살표 기능도 있는데, 코드를 단순화하면 기사 후반부에 설명하겠습니다.

그래서 우리는 바인드를 사용해야합니다

핵심은 이 문장입니다. this.testFunc = this.testFunc.bind(this)는 bind를 통해 프로토타입에서 testFunc 함수의 this 지점을 변경하고(인덱스 구성 요소 인스턴스를 가리키도록 함) 새 함수를 반환한다는 의미입니다. testFunc 함수에 재할당하여 testFunc 함수의 이 지점이 정상이 되도록 합니다.

 이 시점에서 일반 this 정보가 출력됩니다.

 

 보충 6: 이를 통해 상태의 데이터 값을 변경하는 방법은 무엇입니까?

이 점을 해결한 후에는 메서드에서 상태 값에 다시 액세스할 때 오류를 보고하지 않습니다.

 

상태 값이 성공적으로 수정되었습니까? 그런데 페이지가 변경되지 않은 이유는 무엇입니까? ? ?

참고: 상태(this.state.week = '화요일'[잘못된 표현])에서 데이터를 직접 수정할 수 없습니다. 내장 API [ setState ]의 도움으로 수정 하려면

정상입니다. 

 

보충 7: 컨스트럭터는 몇 번 호출합니까? 렌더링 호출은 몇 번입니까?

Answer :  생성자는 한 번만 호출되고 렌더링은 1+n번 호출됩니다(1은 초기화 시간, n은 상태 업데이트 횟수).

간단한 요약:

1. 생성자의 역할

  • 초기화 상태
  • 클래스 메서드를 가리키는 문제 해결

2. 렌더의 역할

  • 상태 상태에서 데이터 읽기
  • 상태에 따라 페이지 표시

코드 단순화 1:

위의 클래스에 대한 리뷰에서 언급했듯이 생성자의 기능은 주로 외부에서 전달된 매개 변수를 받는 것이므로 외부에서 전달된 값을 받을 필요가 없을 때는 생성자가 필요하지 않습니다 . 그리고 주의할 점: 클래스에 대입문을 직접 작성할 수 있지만 마음대로 코드를 작성할 수는 없습니다.클래스는 항상 함수 본문이 아닙니다. 변수, 인쇄 등은 함수 본문에서 정의할 수 있습니다. 수업에서 허용되지 않는 것.

따라서 생성자의 상태 할당문을 클래스에 넣을 수 있습니다. 즉, 인스턴스 객체 인덱스에 속성 상태를 추가하는 것입니다.

코드 단순화 2: 

함수가 너무 많으면 생성자에 여러 문장을 작성하여 요점을 변경할 수 있습니다. 이는 매우 중복됩니다.

 이것의 포인트를 바꾸는 또 다른 방법은 화살표 함수,,,,

 이런 식으로 생성자를 삭제할 수 있으며 단순화 후

import React, { Component } from 'react'
// 创建类式组件
export default class index extends Component {
  // 初始化状态
  state = {
    week: '周一',
  }
  render() {
    const { week } = this.state
    return <h2 onClick={this.testFunc}>今天才{week}！</h2>
  }
  // 自定义方法--要用赋值语句的形式+箭头函数
  testFunc = () => {
    this.setState({
      week: '周二',
    })
  }
}

마지막으로 리액트 컴포넌트 페이지에서 데이터 변경으로 인해 발생하는 일련의 문제에 대한 설명입니다. 꼼꼼히 읽어보시면 분명 도움이 되실거에요~

Je suppose que tu aimes

Origine blog.csdn.net/qq_41579104/article/details/130345358
conseillé
Classement
du quotidien
Plus
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(2)
2024-06-03(0)
2024-06-02(1)
2024-06-01(0)

Code World

© 2018 codetd.com