React에서 컴포넌트 내부 통신을 구현하는 방법

이 글에서는 주로 React 데이터 전송에 있어서 컴포넌트의 내부 통신 방식을 소개하고 참고용으로 올려드립니다.

1. 개요

기본 프런트엔드를 잠시 떠난 후에는 스타일을 작성하는 데 소요되는 시간이 점점 줄어들고 데이터를 처리하는 데 점점 더 많은 시간을 소비하게 됩니다. 데이터를 처리하는 과정은 비즈니스 로직을 구현하는 과정이기도 하며, 이는 의심할 여지 없이 프로젝트에서 가장 중요한 부분입니다.

프런트엔드 프레임워크를 배우고 기본 구문을 이해한 후 다음 단계는 데이터 전송 방법을 배우는 것입니다.

처음 Angular 디자인의 하이라이트 중 하나는 데이터의 양방향 바인딩을 구현한 것입니다. Vue를 한동안 사용해 본 결과, 소위 양방향 데이터 바인딩이 내부의 유일한 응용 프로그램 시나리오라는 것을 알게 되었습니다. 컴포넌트는 양식 형식(input, textarea, select, radio)이며 이 시나리오의 양방향 데이터 바인딩은 프레임워크 내에서 구현되지 않더라도 직접 구현하기가 매우 간단합니다. 이것을 이해하고 나면 React가 양방향 데이터 바인딩을 구현하지 않는다고 생각하는 것이 순진하다는 생각이 듭니다.

React 데이터 전송에는 두 가지 측면이 포함됩니다.

1. 구성 요소 내 데이터 전송. 일반적인 응용 프로그램 시나리오에는 양식 양방향 데이터 바인딩을 구현하는 방법과 구성 요소 간 이벤트를 바인딩하는 방법이 포함됩니다. 하위 구성 요소에 데이터를 전달하는 상위 구성 요소, 상위 구성 요소에 데이터를 전달하는 하위 구성 요소, 형제 구성 요소 간에 데이터를 전달하는 포함됩니다.

2. 이 문서에서는 먼저 구성 요소 내의 데이터 전송에 대해 설명합니다.

2. 컴포넌트 내 내부 데이터 전송

React 컴포넌트 내부 통신은 크게 데이터 표시와 이벤트 처리 두 부분으로 나뉩니다.

2.1 데이터 표시

상태를 사용하려면 구성 요소의 내부 데이터 표시 및 업데이트를 구현해야 합니다. ES6 클래스를 사용하여 구성 요소를 정의해야 합니다. 데이터 업데이트는 초기화된 데이터 표시에 대해서만 설명하는 양방향 데이터 바인딩 섹션에서 설명합니다. Vue에 익숙하다면 React의 상태 객체는 Vue의 데이터 객체와 동일합니다

다음은 순수하게 데이터를 표시하는 예입니다.

class App extends Component {
 constructor(props) {
 super(props);

 // 初始化 state
 this.state = {
  inputValue: "test",
 };
 }

 render() {
 // 注意，在 react 中，DOM 元素是对象，所以使用‘()'包住 
 return (
  <p className="App">
  <p>{this.state.inputValue}</p>
  </p>
 );
 }
}

클래스로 정의된 React 컴포넌트에는 Life Cycle Hook 기능 외에, constructor()와 render() 두 메소드도 자동으로 실행됩니다. Constructor()가 먼저 실행되고, constructor()가 실행되는 동안 DOM을 렌더링하기 위한 render() 데이터가 준비됩니다.

사실 constructor() 함수는 컴포넌트 라이프사이클에서 가장 먼저 호출되는 함수입니다.

2.2 이벤트

2.2.1 DOM 이벤트와의 유사점과 차이점

React의 이벤트 처리는 DOM의 이벤트 처리와 유사하지만 두 가지 차이점이 있습니다.

React 이벤트의 낙타 표기법을 통한 이름 지정 모두 소문자 대신

1. 문자열 대신 JSX의 이벤트 핸들러로 함수를 직접 전달합니다.

2. 두 번째 점에는 함정이 있는데 자세한 내용은 나중에 설명하겠습니다

예를 들어 HTML의 이벤트:

<button onclick="activateLasers()">
 Activate Lasers
</button>

React의 이벤트:

// 因为 jsx 中'{}'里面代表函数表达式，
// 所以传递给 onClick 的实际是函数 activateLasers 的函数体部分，
// 因此需要指定 this 指向，不然会报错
<button onClick={activateLasers}>
 Activate Lasers
</button>

2.2.2 함정

함수를 이벤트로 직접 전달 핸들러는 함수의 실행 환경을 지정해야 합니다. 즉, 이를 수동으로 바인딩해야 합니다. 그렇지 않으면 정의되지 않았다는 오류가 보고됩니다. 아래 예를 참조하세요.

class App extends Component {
 constructor(props) {
 super(props);
 this.state = {
  isToggleOn: true,
 };

 // 手动绑定 this
 this.handleClick = this.handleClick.bind(this);
 }

 handleClick() {
 // 如果不在 constructor() 方法中手动绑定 this，直接将其作为事件处理程序 this 为 undefined
 console.log(this);

 this.setState(prevState => ({
  isToggleOn: !prevState.isToggleOn
 }));
 }

 render() {
 return (
  <p className="App">
  <button onClick={this.handleClick}>
   {this.state.isToggleOn ? "on" : "off"}
  </button>
  </p>
 );
 }
}

2.2.3 왜 함정이 있나요?

React 공식 웹사이트에서는 이 문제에 JS 기본 구문이 필요하다고 나와 있지만, JS에서는 반드시 그런 이벤트 시스템을 설계한 것은 아닙니다. 구문은 이미 결정되었습니다. 누군가가 책임을 져야 한다면 50 대 50으로 책임을 지게 하십시오.

1, JS 기본 구문 문제

JS 구문에는 다음과 같은 규칙이 있습니다. 함수의 함수 본문(() 없음)이 다른 변수에 할당되면 함수 본문 내부의 this 포인터가 변경될 수 있습니다. 변경 여부는 함수와 할당된 변수가 동일한 범위(동일한 실행 환경)에 있는지 여부에 따라 다르지만 실제 사용에서는 동일한 범위의 변수에 함수를 할당하는 것은 의미가 없습니다. 괜찮습니다. 다른 변수에 할당할 필요가 없습니다. 이 포인터는 변경되지 않습니다. 의미 없는 예(설명의 편의를 위해 var 연산자를 직접 사용):

var fn = function () {
 console.log(this);
};

var a = fn;

fn(); // window
a(); // window
this 指向发生改变的例子：

var fn = function () {
 console.log(this);
};

// 将函数体赋值给一个对象的属性，函数执行时 this 和定义时指向不同
var o = {
 a: fn,
};

fn(); // window
o.a(); // o，即{a:f}

함수 본문을 다른 변수에 할당하고 원래 함수의 this 지점도 여기에 할당하려는 경우. , 할당 과정에서 다음과 같이 바인딩해야 합니다.

var fn = function () {
 console.log(this);
};

// fn 在赋值的同时将内部的 this 打包一块赋值给了 a
var o = {
 a: fn.bind(this),
};

fn(); // window
o.a(); // window

일반적으로 함수 본문을 변수에 할당할 때 이러한 오류를 방지하기 위해 바인딩 실행 환경 작업이 일반적인 예가 varbindId = document입니다. getElementById.bind(document)

2, JSX 문제

JSX의 DOM 요소도 객체이기 때문에 요소의 속성에 값을 할당하는 것은 실제로 DOM 요소 객체의 속성에 값을 할당하는 것입니다. 아래를 참조하세요.

const element = (
 <button onClick={this.handleClick}>click me</button>
);

const element = {
 type: 'button',
 props: {
 onClick: this.handleClick,
 children: 'click me',
 },
};

와 동일합니다. 이는 실제로 함수 본문을 객체의 속성에 할당하는 것입니다. 이는 정의된 경우와 다른 시나리오를 가리킵니다. 포인터가 변경되었습니다. 차이점은 기본 JS에서는 어쨌든 포인터가 있지만 JSX는 직접 정의되지 않는다는 것입니다.

그래서 이것을 바인딩하지 않고 정의되지 않음을 보고하는 오류가 JS 기본 구문에 전적으로 책임을 질 수는 없습니다.

3. 双向数据绑定

通过 state 传递数据加上事件处理程序便能实现数据的双向绑定，其背后的思想是（以 input 为例）：初始化时将 state 中预定义的 state a 赋值给 input，当 input 的 value 发生改变时，触发事件处理程序，将改变后的 value 赋值给状态 a ，React 监测到 state 改变时重新调用 render() 方法，即重新渲染组件，达到双向绑定的目的。

class App extends Component {
 constructor(props) {
  super(props);
  this.state = {
   inputValue: "test",
  };
  this.changeInput = this.changeInput.bind(this);
 }

 changeInput(e) {
  // 将改变后的 input 值赋值给 inputValue，通过事件对象 $event.target.value 实现
  this.setState({
   inputValue: e.target.value
  });
 }

 render() {
  // input 改变时触发 changeInput
  return (
   <p className="App">
    <input value={this.state.inputValue} onChange={this.changeInput} />
    <p>{this.state.inputValue}</p>
   </p>
  );
 }
}

这里用到了事件对象，React 的事件对象和 JS 原生事件对象保持一致。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用Node.js爬虫如何实现网页请求

使用VueAwesomeSwiper容易出现的问题？

在angular2中有关Http请求原理（详细教程）

在node中如何实现http小爬虫

위 내용은 React에서 컴포넌트 내부 통신을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!