React.js의 선언과 명령의 차이는 무엇입니까?
Facebook JavaScript React.js 기기 。 세계와의 에 대해 할 때, 두 프로그래밍 스타일 JavaScript가 .declarative ★★★★★★★★★★★★★★★★★」imperative을 사용하다
둘 다 뭐가 달라요?
리액션과 같은 선언형 스타일을 사용하면 "이렇게 표시되어야 합니다"라고 함으로써 응용 프로그램의 흐름과 상태를 제어할 수 있습니다.명령형 스타일은 이를 전환하여 "이것이 당신이 해야 할 일입니다"라고 말하는 것으로 당신의 어플리케이션을 제어할 수 있도록 합니다.
선언적인 것의 장점은 주(州)를 대표하는 구현 세부 사항에 얽매이지 않는다는 것이다.애플리케이션 뷰의 일관성을 유지하기 위한 조직 컴포넌트를 위임하고 있기 때문에 상태만 걱정하면 됩니다.
집사가 있다고 상상해보세요.집사는 틀의 은유와 같은 존재입니다그리고 당신은 저녁을 만들고 싶어합니다.의무적인 세계에서는 저녁 만드는 법을 차근차근 알려주셔야 합니다.다음의 순서를 지정할 필요가 있습니다.
Go to the kitchen
Open fridge
Remove chicken from fridge
...
Bring food to the table
선언적 세계에서는, 당신은 단지 당신이 원하는 것을 묘사할 것이다.
I want dinner with chicken.
집사가 치킨 만드는 법을 모르면 선언적인 방식으로 운영할 수 없습니다.Backbone이 특정 작업을 수행하기 위해 자신을 변환하는 방법을 알지 못하는 것처럼 단순히 작업을 수행하도록 지시할 수는 없습니다.예를 들어 React는 "치킨 만드는 방법"을 알기 때문에 선언적일 수 있습니다.주방과의 인터페이스밖에 모르는 Backbone과 비교하면.
상태를 설명할 수 있는 것은 버그의 표면적을 극적으로 줄여주는 이점입니다.한편, 상태를 구현하는 방법을 위임하거나 추상화하기 때문에 일이 발생하는 방식에 대한 유연성이 떨어질 수 있습니다.
"좋아요" 버튼과 같은 간단한 UI 구성 요소를 상상해 보십시오.탭을 누르면 이전에 회색이면 파란색, 파란색이면 회색으로 바뀝니다.
이를 위한 필수 방법은 다음과 같습니다.
if( user.likes() ) {
if( hasBlue() ) {
removeBlue();
addGrey();
} else {
removeGrey();
addBlue();
}
}
기본적으로 현재 화면에 표시되는 내용을 확인하고 이전 상태에서의 변경을 취소하는 등 현재 상태로 다시 그리는 데 필요한 모든 변경 사항을 처리해야 합니다.실제 시나리오에서는 이것이 얼마나 복잡한지 상상할 수 있습니다.
이와는 대조적으로 선언적 접근법은 다음과 같다.
return this.state.liked ? <blueLike /> : <greyLike />;
선언적 접근법은 관심사를 분리하기 때문에 이 부분은 UI가 개별적인 상태에서 어떻게 보여야 하는지를 다루기만 하면 되기 때문에 훨씬 이해하기 쉽습니다.
반응(명언적)과 JQuery(명언적)를 비교하여 차이를 보여 주는 것이 가장 좋습니다.
리액트 만 하면 .render()[ UI ] 、 [ UI ]、 [ Interface ](UI) 、 [ Interface ](UI; 인터페이스)
render() {
const { price, volume } = this.state;
const totalPrice = price * volume;
return (
<div>
<Label value={price} className={price > 100 ? 'expensive' : 'cheap'} ... />
<Label value={volume} className={volume > 1000 ? 'high' : 'low'} ... />
<Label value={totalPrice} ... />
...
</div>
)
}
한편, JQuery에서는 UI 상태를 반드시 이행해야 합니다.예를 들어 라벨 요소를 선택하고 텍스트와 CSS를 갱신해야 합니다.
updatePrice(price) {
$("#price-label").val(price);
$("#price-label").toggleClass('expansive', price > 100);
$("#price-label").toggleClass('cheap', price < 100);
// also remember to update UI depending on price
updateTotalPrice();
...
}
updateVolume(volume) {
$("#volume-label").val(volume);
$("#volume-label").toggleClass('high', volume > 1000);
$("#volume-label").toggleClass('low', volume < 1000);
// also remember to update UI depending on volume
updateTotalPrice();
...
}
updateTotalPrice() {
const totalPrice = price * volume;
$("#total-price-label").val(totalPrice);
...
}
실제 시나리오에서는 더 많은 UI 요소와 그 속성(예: CSS 스타일 및 이벤트 청취자)이 업데이트될 것입니다.JQuery를 사용하여 이 작업을 강제로 수행하면 복잡하고 지루해집니다. UI의 일부를 업데이트하는 것을 잊거나 오래된 이벤트핸들러를 삭제하는 것을 잊기 쉽습니다(메모리 누수 또는 핸들러가 여러 번 발생하는 원인이 됩니다).여기서 UI 상태와 모델 상태가 동기화되지 않는 등의 버그가 발생합니다.
모델 상태만 업데이트하면 되고 UI와 모델 상태를 동기화 상태로 유지할 책임이 있기 때문에 React의 선언적 접근 방식에는 상태가 동기화되지 않습니다.
- 후크 아래에서 React는 명령 코드를 사용하여 변경된 모든 DOM 요소를 업데이트합니다.
당신은 또한 프로그래밍에서 선언적 패러다임과 명령적 패러다임의 차이점에 대한 나의 답변을 읽을 수 있을 것이다.
예에서 을 PS에 요?jQuery 예개 、 DOM 、 1 、 DOM 、 개개 、 개개 、 ?? 、 ps ps ?? 。updateAll()모델 상태가 바뀔 때마다 호출하면 UI가 동기화되지 않습니다. 이것이 React가 수행하는 입니다. 가 그렇다는 입니다. 반응하다 jQuery.updateAll()불필요한 DOM 조작이 많이 발생하지만 React는 Virtual DOM Diffing Algorithm을 사용하여 변경된 DOM 요소만 업데이트합니다.
이것은 훌륭한 비유입니다.
*필수응답:주차장 북쪽 출구로 나가서 왼쪽으로 가세요.뱅거터 고속도로 출구가 나올 때까지 15번 고속도로 남쪽을 타세요.이케아 가는 것처럼 출구에서 오른쪽으로 가세요.직진하다가 첫 번째 신호등에서 우회전하세요.다음 신호등에서 왼쪽으로 도세요.저희 집은 298호입니다.
선언적 응답:제 주소는 298 웨스트 불변의 골목, 드레이퍼 유타 84020*입니다.
https://tylermcginnis.com/imperative-vs-declarative-programming/
명령 코드는 JavaScript에 각 단계를 수행하는 방법을 지시합니다.선언 코드를 사용하여 JavaScript에 무엇을 하고 싶은지 알려주고 JavaScript가 단계를 수행하도록 합니다.
React는 우리가 원하는 코드를 기술하고 React는 우리가 원하는 결과를 얻기 위해 선언된 코드를 취합하고 자바스크립트/DOM 단계를 모두 수행하기 때문에 선언적인 것입니다.
필수 세계의 실제 예는 맥주를 마시기 위해 바에 들어가 바텐더에게 다음과 같은 지시를 하는 것입니다.
·선반에서 컵을 꺼냅니다.
·유리를 드래프트 앞에 놓는다.
·유리가 가득 찰 때까지 손잡이를 내린다.
유리잔을 주세요.
대신 선언적인 세계에서는 "맥주 주세요"라고 말할 것이다.선언적인 문체로, 우리는 어떻게 하면 안 되는지를 코드를 작성합니다.
선언적 프로그래밍에서는 개발자는 달성하고자 하는 것만 기술하며, 이를 실행하기 위한 모든 단계를 나열할 필요가 없습니다.이렇게 하면 코드가 심플해지고 읽을 수 있게 됩니다.단, 명령형에서는 개발자가 단계적으로 태스크를 정의한다.
예를 들어 for-loop은 시작점, 끝점 및 간격을 선언하기 때문에 필수 스타일입니다. ★★★★★★★★★★★★★★.Array.map을 사용하다
React는 선언적 접근 방식을 제공하므로 사용이 간편하고 결과적으로 코드가 간단하여 버그를 줄이고 유지 보수성을 높일 수 있습니다.
React는 선언적 패러다임을 따르기 때문에 DOM과의 상호 작용 방법을 지시할 필요가 없습니다. 화면에서 보고 싶은 것을 선언하면 React가 대신 작업을 수행합니다.
선언적 프로그래밍은 응용 프로그램이 어떻게 발생해야 하는지를 정의하는 것보다 무엇이 발생해야 하는지를 설명하는 것을 우선시하는 방식으로 구성되는 프로그래밍 스타일입니다.
선언형 프로그래밍을 이해하기 위해 명령형 프로그래밍(코드만으로 결과를 얻는 프로그래밍 스타일)과 비교해 보겠습니다.
예: 문자열을 URL 친화적으로 만듭니다.일반적으로 문자열 내의 모든 공간을 하이픈으로 대체하면 공간이 URL에 적합하지 않기 때문에 이 작업을 수행할 수 있습니다.첫째, 이 작업에 대한 필수 접근법:
const string = "difference between declarative and imperative in react.js";
const urlFriendly = "";
for (var i = 0; i < string.length; i++) {
if (string[i] === " ") {
urlFriendly += "-";
} else {
urlFriendly += string[i];
}
}
console.log(urlFriendly); // "difference-between-declarative-and-imperative-in-react-js"
이 예에서는 문자열 내의 모든 문자를 루프하여 공백이 발생할 때 교체합니다.이 프로그램의 구조는 그러한 작업을 어떻게 달성할 수 있는지에 대해서만 관련이 있습니다.for loop 및 if 문을 사용하여 등호 연산자를 사용하여 값을 설정합니다.필수 프로그램은 진행 상황을 파악하기 위해 많은 코멘트를 필요로 하기 때문에 코드만 봐도 많은 것을 알 수 없습니다.
이제 동일한 문제에 대한 선언적 접근법에 대해 살펴보겠습니다.
const string = "Difference between declarative and imperative in React.js?";
const urlFriendly = string.replace(/ /g, "-");
console.log(urlFriendly);
여기서 사용하고 있습니다.string.replace모든 공간의 인스턴스를 하이픈으로 대체하기 위한 정규 표현과 함께 지정합니다.「」를 사용합니다.string.replace어떤 일이 일어나는지 설명하는 방법입니다.문자열 내의 공백은 치환해야 합니다.공간 처리 방법에 대한 자세한 내용은 치환 함수 내에서 추상화됩니다.
선언형 프로그램에서는 구문 자체가 무슨 일이 일어나야 하는지 설명하고, 어떻게 일이 일어나는지에 대한 세부 사항은 추상화된다.
기본적으로 선언형 프로그래밍은 추론하기 쉬운 애플리케이션을 생성합니다.어플리케이션에 대한 추론이 쉬워지면 어플리케이션의 확장이 쉬워집니다.선언적 프로그래밍 패러다임에 대한 자세한 내용은 선언적 프로그래밍 Wiki에서 확인할 수 있습니다.
이제 문서 객체 모델을 작성하는 작업에 대해 살펴보겠습니다.필수 접근법은 DOM 구성 방법과 관련이 있습니다.
const target = document.getElementById("target");
const wrapper = document.createElement("div");
const headline = document.createElement("h1");
wrapper.id = "welcome";
headline.innerText = "Hello World";
wrapper.appendChild(headline);
target.appendChild(wrapper);
이 코드는 요소 작성, 요소 설정 및 문서에 추가하는 것과 관련이 있습니다.DOM이 필수적으로 구축되어 있는 경우에는 변경, 기능 추가, 코드 10,000행의 축척이 매우 어렵습니다.
이제 React 컴포넌트를 사용하여 선언적으로 DOM을 구축하는 방법에 대해 살펴보겠습니다.
const { render } = ReactDOM;
const Welcome = () => (
<div id="welcome">
<h1>Hello World</h1>
</div>
);
render(<Welcome />, document.getElementById("target"));
리액션은 선언적인 것입니다.여기서 시작 구성요소는 렌더링해야 하는 DOM을 설명합니다.렌더 함수는 컴포넌트에서 선언된 명령을 사용하여 DOM을 빌드하고 DOM 렌더링 방법에 대한 세부 정보를 추상화합니다.Welcome 컴포넌트를 타겟 ID를 가진 요소로 렌더링하고 싶은 것을 명확하게 알 수 있습니다.
출처: 리액트 앱 개발을 위한 최신 패턴
선언적 프로그래밍은 제어 흐름을 설명하지 않고 계산의 논리를 표현하는 프로그래밍 패러다임입니다.
명령형 프로그래밍은 프로그램 상태를 변경하는 문을 사용하는 프로그래밍 패러다임입니다.
참조 링크:-https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2
선언형 vs 명령형
선언적 프로그래밍은 당신의 친구에게 당신의 집을 칠해달라고 요청하는 것과 같다.어떻게 닦는지, 어떤 색으로 칠하는지 신경 안써요얼마나 많은 자원을 투입했는가.
//Declarative For Searching element from an array
array.find(item)
선언의 반대는 필수적입니다.명령적 접근의 일반적인 예는 당신이 당신의 집을 칠하기 위해 정확히 무엇을 해야 하는지 친구에게 말하는 것이다.
- 세제로 집을 씻어라.
- Narolac 페인트 또는 아시아 페인트를 사용합니다.
- 지붕을 녹색으로 칠하세요.
- 3명의 멤버와 계약하는 등
//임페리얼 알고
def imperative_search(array, item)
for i in array do
if i == item
return item
end
end
return false
end
모든 단계를 설명하는 것은 필수 접근법입니다.Hello World! 텍스트가 들어간 단락 태그를 만들어야 합니다.
//Imperative
const para = document.createElement('p');
para.innerText = 'Hello World !';
document.querySelector('#root').appendChild(para);
정확한 절차를 지정하지 않고 원하는 최종 타깃 상태를 정의합니다.예를 들어 createElement 또는 inner를 지시하지 않고 텍스트가 포함된 p 태그본문
//Declarative
import React from "react";
import ReactDOM from "react-dom";
const App = () =>{
return(<p>Hello World !</p>);
}
ReactDOM.render(<App />, document.getElementById("root"));
먼저 유추해 보겠습니다.차가 두 대 있는데, 두 대의 차 안에서 차내의 온도를 화씨 72도로 하고 싶습니다.첫 번째(구형) 차량에는 온도를 제어하는 2개의 노브가 있습니다(온도를 제어하는 1노브와 공기 흐름을 제어하는 1노브).너무 더울 때는 첫 번째 노브를 조절해서 온도를 낮추고 공기 흐름을 바꿔야 합니다.)와 너무 추울 때는 반음절입니다.이건 꼭 해야 할 일이야!손잡이는 제가 직접 관리해야 합니다.두 번째(새) 차에서는 온도를 설정/해제할 수 있습니다.즉, 자동차 온도를 조절하기 위해 손잡이를 만지작거리지 않아도 됩니다. 그러면 차량이 이 상태로 가기 위해 필수 작업을 수행할 수 있습니다.
리액트도 마찬가지입니다.마크업/템플릿을 선언하고 Stat을 실행한 후 React는 DOM과 앱의 동기화를 유지하기 위해 필수 작업을 수행합니다.
<button onClick={activateTeleporter}>Activate Teleporter</button>
사용하는 대신.addEventListener()이벤트 처리를 설정하기 위해 원하는 것을 선언합니다.이 버튼을 클릭하면,activateTeleporter★★★★★★ 。
지금까지의 제 이해는 다음과 같습니다.
선언적 코드(거의?)는 항상 본질적으로 더 필수적인 코드 위에 있는 추상화 레이어입니다.
React를 사용하면 DOM과 직접 상호작용하는 명령 코드(예: 확산 알고리즘) 위의 추상화 계층인 선언 코드를 작성할 수 있습니다.필수 코드를 작성해야 하는 경우(즉, DOM과 직접 상호 작용) React는 참조를 이스케이프 해치로 제공합니다.
언급URL : https://stackoverflow.com/questions/33655534/difference-between-declarative-and-imperative-in-react-js
'IT' 카테고리의 다른 글
| Greasemonkey 스크립트에서 XMLHttpRequests를 대행 수신하려면 어떻게 해야 합니까? (0) | 2023.03.29 |
|---|---|
| oneOf 개체에 대한 Json 스키마 예제 (0) | 2023.03.29 |
| 유형 스크립트 - React 구성 요소의 "이름 찾을 수 없음" 오류 (0) | 2023.03.29 |
| inline 조건부(angular.display)를 지정합니다. (0) | 2023.03.29 |
| TypeScript for...인덱스/키 포함? (0) | 2023.03.29 |