최신 프론트엔드 프레임워크에 대한 우리의 이해에 대해 이야기해 봅시다.

이 장에서는 최신 프런트엔드 프레임워크에 대한 이해에 대해 설명합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

그렇다면 사람들은 왜 지금 다양한 프레임워크를 선택해야 할까요?

사실 지금 프레임워크를 선택해야 하는 이유는 본질적으로 우리가 직면한 요구 사항이 바뀌었기 때문입니다. 대화형 기능 없이 정보만 표시하는 페이지만 작성한다면 실제로 지금도 프레임워크를 선택할 필요가 없으며 작업을 완료하기 위해 CSS와 HTML 몇 줄만 작성하면 된다는 점을 누구나 이해해야 합니다. . 따라서 우리가 직면한 요구 사항이 더욱 복잡해졌기 때문에 애플리케이션은 런타임에 일부 상호 작용을 수행해야 하는 경우가 많습니다.

굵게 표시된 세 가지 중요한 단어는 Runtime입니다. 현대의 프런트엔드 개발에서는 우리가 개발하는 애플리케이션이 런타임 시 일부 상호 작용을 요구하는 경우가 많습니다. 초기에는 이러한 상호 작용이 슬라이드나 탭 전환 드롭다운 메뉴와 같은 단순한 상호 작용에 불과했습니다. jQuery를 사용하여 이러한 상호 작용을 구현하는 데는 문제가 없습니다. . 그러나 최신 프런트 엔드에 대한 우리의 목표는 웹을 사용하여 네이티브 애플리케이션을 PK하고 네이티브를 사용하여 PK하는 것입니다.

이제 우리는 jQuery를 사용하여 애플리케이션을 개발하면 코드를 유지 관리하기가 어렵다는 것을 알게 될 것입니다. 그러면 Vue, React 등과 같은 최신 프레임워크를 사용하면 유지 관리가 더 쉬워지는 이유는 무엇입니까?

Vue와 jQuery의 유일한 차이점은 선언적 vs. 명령적입니다.

생각해보면 jQuery를 사용하여 DOM을 운영하는 목적은 무엇일까요? 로컬에서 뷰를 업데이트하는 것, 즉 로컬에서 다시 렌더링하는 것입니다.

jQuery는 DOM을 작동하는 필수 방식과 필수 부분 업데이트 뷰인 반면, Vue, React, Angular 등과 같은 최신 주류 프레임워크는 모두 선언적 및 선언적 부분 업데이트 뷰입니다.

선언적 DOM 조작을 통해 애플리케이션을 더 쉽게 유지 관리할 수 있는 이유는 무엇입니까?

이 문제를 이해하기 위해 먼저 명령형과 선언형이 무엇인지 간략하게 소개하겠습니다.

Imperative

Imperative는 jQuery처럼 우리 모두가 뭔가를 하고 싶어하면 그냥 그 일을 하게 됩니다. . 단순하고 직접적이며 조잡합니다.

토글 효과와 같은 매우 간단한 장면을 상상해 보세요. 버튼을 클릭하여 색상을 전환하세요.

명령형으로 작성해야 합니다. 현재 색상이 그렇다면 다른 색상으로 변경해 보세요.

잘 생각해보면 실제로 두 가지 동작으로 나눌 수 있는데, 하나는 상태를 판단하는 것이고, 다른 하나는 DOM을 운영하는 것입니다.

그럼 선언적이란 무엇인가요? ?

선언적 선언적이란 상태와 뷰 사이의 매핑 관계를 기술한 후, 이러한 매핑 관계를 통해 DOM을 조작하거나, 구체적으로는 이러한 매핑 관계를 사용하여 DOM 노드를 생성하는 것입니다. 페이지. 예를 들어 Vue의 템플릿입니다. 템플릿의 기능은 상태와 DOM 간의 매핑 관계를 설명하는 것입니다.

Vue에서 템플릿을 사용하여 동일한 시나리오를 구현합니다. 템플릿을 사용하여 매핑 관계를 설명한 후 버튼을 클릭하면 색상 변수만 수정하면 요구 사항이 완료됩니다.

차이점이 보이나요?

신중하게 생각하고 Vue를 사용하여 동일한 요구 사항을 달성하면 논리적으로 동작과 상태가 하나만 있습니다. 그리고 jQuery는 상태 + DOM 작업이라는 두 가지 동작입니다.

그렇다면 선언적 접근 방식이 애플리케이션 코드 유지 관리의 복잡성을 단순화할 수 있는 이유는 무엇일까요?

상태 유지에만 집중할 수 있게 해주기 때문이죠. 이렇게 애플리케이션이 복잡해지면 사실 우리의 생각과 코드 관리 방식은 상태에만 국한되고 더 이상 모든 DOM 작업에 신경 쓸 필요가 없게 됩니다. 유지 관리가 크게 줄어 듭니다.

우리는 더 이상 DOM 작동 방법에 주의할 필요가 없습니다. 프레임워크가 자동으로 DOM 작동을 수행하기 때문에 상태에만 주의하면 됩니다.

그러나 애플리케이션이 특히 복잡하다면 상태 유지에만 집중해도 여전히 어렵다는 것을 알게 될 것입니다. 따라서 Vuex 및 Redux와 같은 기술 솔루션은 여전히 ​​어렵습니다. 등장했습니다.

렌더링이란 무엇인가요? 이전 소개 이후 현대 주류 프레임워크가 해결해야 할 가장 중요한 문제는 여전히 렌더링이라는 것을 알 수 있지만, 프레임워크마다 솔루션에 차이가 있습니다. 그렇다면 렌더링이란 무엇일까요?

이제 프런트 엔드를 개발할 때 애플리케이션은 실행 중에 다양한 상호 작용을 지속적으로 수행해야 합니다. 최신 주류 프레임워크를 사용하면 상태 유지 관리에 집중할 수 있습니다. 즉, 애플리케이션이 실행 중일 때 애플리케이션의 내부 상태가 계속 유지됩니다. 변화.

상태 생성 DOM을 페이지에 삽입하고 이를 사용자 인터페이스에 표시하는 과정을 렌더링이라고 합니다.

최신 프런트 엔드 프레임워크에 의한 렌더링 처리애플리케이션이 실행되면 내부 상태가 계속 변경됩니다. 이때 사용자 페이지의 특정 로컬 영역을 지속적으로 다시 설정해야 합니다. 렌더링되었습니다.

프레임워크를 사용하지 않는 프로젝트에서 간단한 함수를 작성할 때 가장 일반적으로 사용되는 가장 간단하고 조잡한 솔루션은 상태를 사용하여 새 DOM을 생성한 다음 innerHTML을 사용하여 교체하는 것입니다. 오래된 DOM.

위 내용은 최신 프론트엔드 프레임워크에 대한 우리의 이해에 대해 이야기해 봅시다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!