[reactjs] React.js에서 선언적과 명령 적의 차이점은 무엇입니까?

React (선언적)와 JQuery (명령어)를 비교하여 차이점을 보여주는 것이 가장 좋습니다.

React에서는 render()이전 UI 상태에서 새 UI 상태로 전환하는 방법에 대해 걱정하지 않고 메서드 에서 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 상태와 모델 상태가 동조.

모델 상태를 업데이트하기 만하면되고 React는 UI와 모델 상태를 동기화 상태로 유지해야하기 때문에 React의 선언적 접근 방식에서는 동기화되지 않은 상태가 발생하지 않습니다.

• 후크 아래에서 React는 명령형 코드를 사용하여 변경된 모든 DOM 요소를 업데이트합니다.

선언적 프로그래밍과 명령 적 프로그래밍의 차이점은 무엇입니까?에 대한 내 대답을 읽을 수도 있습니다 . .

추신 : 위의 jQuery 예제에서 모든 DOM 조작을 updateAll()메서드에 넣고 모델 상태가 변경 될 때마다 호출하면 UI가 동기화되지 않을 것이라고 생각할 수 있습니다. 당신이 맞고 이것은 React가하는 일 입니다. 유일한 차이점은 jQuery updateAll()가 불필요한 DOM 조작을 많이 유발 한다는 점 입니다.하지만 React는 Virtual DOM Diffing Algorithm을 사용하여 변경된 DOM 요소 만 업데이트 합니다.