React의 사용: React 프레임워크의 다섯 가지 주요 기능-JS 튜토리얼-php.cn

React의 사용: React 프레임워크의 다섯 가지 주요 기능

不言

풀어 주다： 2018-07-20 10:34:44

원래의

5909명이 탐색했습니다.

이 글에서는 React의 사용 방법을 소개합니다. React 프레임워크의 5가지 주요 기능은 필요한 참조 가치가 있습니다.

01. React 등장 배경

세상의 모든 것에는 원인과 결과가 있고 프레임워크의 출현은 시대의 특정 배경과 불가분의 관계에 있습니다. React의 경우 언급해야 할 두 가지 주요 배경이 있습니다.

대량의 비즈니스 로직이 백엔드 구현에서 프런트엔드 구현으로 변경되었습니다.: AJAX 기술의 출현으로 사람들은 React를 추구하게 되었습니다. 보다 원활한 웹 상호 작용 경험 백엔드 개발에서 프런트엔드 개발로의 대량 변경으로 인해 양적 변화가 질적 변화로 이어졌습니다. 이 정도 규모의 프런트엔드 코드를 구성하고 관리하려면 어떻게 해야 할까요? 애플리케이션 성능을 더 잘 향상시키는 방법은 무엇입니까? 수십 년간의 백엔드 개발 경험을 바탕으로 대규모 프런트엔드 프레임워크를 사용하는 것이 답이라는 것은 놀라운 일이 아닙니다.
복잡한 로직을 사용하는 SPA 애플리케이션의 경우 원래 프런트엔드 프레임워크의 성능이 낮습니다: React가 등장하기 전에는 이미 backbone.js 与 Angular.js와 같은 성숙한 대규모 프런트엔드 프레임워크가 있었습니다. 그러나 Facebook 엔지니어는 이를 발견했습니다. 복잡한 비즈니스에 직면했을 때 빈번한 DOM 작업과 같은 시나리오에서는 이러한 프레임워크가 좋은 페이지 성능을 가져올 수 없으므로 이 문제를 해결하기 위한 프레임워크를 개발할 계획이며, 이 문제를 해결하기 위한 해결책은 다음과 같습니다. 가상 DOM.

02. Virtual DOM

가상 DOM의 개념은 실제로 이해하기 어렵지 않습니다. 빈번한 DOM 작업으로 인해 브라우저가 DOM 트리에서 가장 많은 계산을 수행하게 된다는 것을 알고 있습니다. 프런트 엔드의 중요한 성능 병목 현상. 따라서 여러 DOM 작업을 병합한 다음 DOM 트리에서 적시에 일회성 중앙 집중식 작업을 수행하여 "한 번의 작업으로 결과를 완료"할 수 있는 한 프런트 엔드 성능을 크게 향상시킬 수 있습니다.

React의 경우, 이 아이디어를 실현하는 솔루션은 Virtual DOM

을 사용하는 것입니다. 우리가 DOM 트리라고 부르는 것은 실제로 트리 구조에 중첩된 JavaScript 개체입니다. 브라우저에서 DOM 트리가 변경되면 브라우저는 일련의 계산을 수행하게 됩니다. 따라서 기존 DOM 트리 구조를 기반으로 동일한 DOM 트리, 즉 "가상 DOM"을 복제하고 모든 변경 사항을 수행할 수 있습니다. 이 가상 DOM에 구현된 다음 브라우저의 DOM 트리에 병합되어 앞서 언급한 성능 병목 현상을 해결합니다.

이해하기 어렵지는 않지만 이 프로세스에는 실제로 많은 복잡한 상황과 일부 알고리즘의 어려움이 포함되어 있어 설명하기 위해 새 기사를 열기에 충분합니다.

03.컴포넌트화란?

컴포넌트화는 간단한 기능을 좀 더 복잡한 기능으로 만들어 사용할 수 있다는 것을 의미하는 코드 디자인 패턴입니다.

구성 요소화에는 두 가지 주목할만한 기능이 있습니다.

캡슐화: 구성 요소에 필요한 데이터가 구성 요소 내부에 캡슐화됩니다.

구성 요소는 다른 구성 요소와 결합하여 보다 복잡한 비즈니스 논리를 구현할 수 있습니다. ;
React의 가장 좋은 점은 React의 모든 UI 요소가 컴포넌트이고, 컴포넌트는 단지 JavaScript 함수라는 것입니다. 그러나 일부 매개변수를 받고 값을 반환하는 기존 함수와 비교하면 React 함수는 일부 매개변수를 받고 인터페이스의 UI 요소를 반환합니다.

좋은 기능이 "DOT"(Do One Thing) 원칙을 준수해야 하듯이, 좋은 React 구성 요소는 다른 구성 요소의 비즈니스 로직을 혼합할 수 없습니다. 복잡한 내부가 되도록 React 구성 요소를 단순하게 유지하려고 노력해야 합니다. React 구성 요소 논리가 명확해졌습니다.

다음 공식은 React에서 "뷰는 데이터의 렌더링이다"라는 구성 요소화 아이디어를 잘 표현할 수 있습니다.

UI = render(data)

로그인 후 복사

이렇게 하면 React에서는 복잡한 뷰를 구성하는 방법이 매우 간단해집니다.

Composition Components

;

04. 선언적 코드

선언적 코드는 개발자가 "컴퓨터가 원하는 것"이 아닌 "내가 하고 싶은 것"의 관점에서 비즈니스 요구 사항을 달성하는 방법을 생각할 수 있도록 하는 것을 의미합니다.

"선언적 코드"와 "명령형 코드"의 차이점을 간단히 비교해 보겠습니다:

명령형 코드:

1. 拿起空调遥控器；
2. 打开空调；
3. 设置温度为 27 摄氏度；

로그인 후 복사

선언적 코드:

```
1. 调用“开空调(27)”函数；
```
로그인 후 복사
선언적 코드는 단지

인 것처럼 보이지만 본질적으로 이것은 더 나은 프로그래밍 사고 방식이므로 더 이상

함수를 통해 함수를 구현하는 방법에만 집중하지 않습니다. 코드, 하지만 비즈니스 로직을 구현하려면 코드에 어떤 함수(함수)가 필요한지에 대해 더 생각해 보세요. 함수의 디자인과 함수 간의 관계를 생각하면 우리의 코드 로직이 더 명확하고 질서 있게 됩니다. .

05. 단방향 데이터 흐름

React에서는 데이터가 위에서 아래로 한 방향으로 흐르는 트리 형태로 구성됩니다(DOM 트리에 해당). 이 디자인의 이유는 다음과 같습니다. 데이터 흐름이 더 명확하고 구성 요소의 상태를 더 쉽게 제어할 수 있습니다

복잡한 비즈니스 로직이 있는 단일 페이지 애플리케이션의 경우 전면- end는 많은 양의 데이터를 처리하므로 데이터 간의 관계도 복잡합니다. 또한 React는 구성 요소 개발을 채택하고 명확하고 합리적인 데이터 흐름 관리 방법이 없으면 최종 코드가 될 수 있습니다. 일단 UI나 데이터가 오류가 발생하면 오류의 원인을 파악하기 어렵습니다.

이를 고려하여 React는 상위 요소에서 하위 요소로만 데이터가 흐르도록 허용하는 "단방향 데이터 흐름" 방법을 사용합니다.

React 단방향 데이터 흐름의 메커니즘은 대략 다음과 같습니다. 데이터는 상위 구성 요소에 저장되고 하위 구성 요소로 아래쪽으로 흐릅니다. 데이터는 상위 구성 요소에 저장되지만 상위 구성 요소와 하위 구성 요소 모두 이 데이터를 사용할 수 있습니다. 그러나 데이터를 업데이트해야 하는 경우 상위 구성 요소만 업데이트해야 합니다. 하위 구성 요소가 데이터를 수정해야 하는 경우 업데이트된 데이터를 상위 구성 요소에만 보낼 수 있으며 여기서 데이터가 실제로 업데이트됩니다. 상위 구성 요소에 의해 데이터가 업데이트되면 하위 구성 요소는 새 데이터를 받게 됩니다.

단방향 데이터 흐름은 추가 작업처럼 들릴 수 있지만 이를 통해 개발자는 애플리케이션 작동 방식을 더 쉽게 파악할 수 있습니다.

06. 순수 JavaScript 구문

React의 이러한 기능을 간과하기 쉽습니다. 즉, React에는 이해하고 사용해야 하는 특별한 독점 React 구문이 없습니다. 메모리, 모든 구성 요소, 데이터 작업 및 비즈니스 로직은 JavaScript 구문을 사용하여 구현됩니다.

즉, React를 사용하려면 React의 아이디어와 몇 가지 주요 API만 이해하면 즉시 React를 사용하여 복잡한 애플리케이션을 개발할 수 있습니다. 또한 React는 개발을 위해 함수형 프로그래밍 아이디어를 사용하도록 권장합니다. React 개발에서는 함수형 프로그래밍 기술을 모두 사용할 수 있습니다.