리액트: DOM 리액트를 얼마나 조작할 수 있습니까?

리액트: DOM 리액트를 얼마나 조작할 수 있습니까?

이게 내가 하는 일이야: jsfiddle

중요한 섹션은 다음과 같습니다.

position: function() {
  var container = $(this.getDOMNode());
  this._menu = $(this.refs.menu.getDOMNode());
  this._menu.appendTo(document.body).
      offset({
          top: container.offset().top + 
              container.outerHeight(),
          left: container.offset().left
      });
},
restore: function() {
  this._menu.appendTo(this.getDOMNode());      
},
componentWillUpdate: function() {
  this.restore();
},
componentDidUpdate: function() {
  this.position();
},
componentDidMount: function() {
  this.position();
},

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★React가 업데이트 사이에 DOM을 남겨두고 놓치지 않는다는 가정 하에 컴포넌트가 업데이트되기 전에 콘텐츠를 되돌렸습니다.콘텐츠에 가 없는 것 ('React'를하면).componentWillUpdate ★★★★★★★★★★★★★★★★★」componentDidUpdate되어 있는 갱신되고 있습니다!).

여기서의 질문은, 결과적인 전제 조건 중 몇 개가 안전한가(즉, 이러한 것을 상정했을 경우, 향후의 React 버전에서 코드가 깨지는가)입니다.

• React는 .단, 가 DOM을 다시 React에 넣으면 됩니다.componentWillUpdate.
• 리액트 이벤트핸들러는 이동된 요소에서도 동작합니다.
• React는 사용자가 요청한 인라인 스타일을 이미 요소에 있는 스타일과 병합합니다(설정이 되어 있지 않은 경우에도).
• 문서의 다른 곳으로 DOM을 이동하더라도 React는 렌더링한 DOM을 업데이트합니다!

마지막 것은 다소 극단적이고 마법처럼 보이지만, 만약 그것이 유지된다면 큰 의미가 있다.

난 리액트 요원이야각 질문에 답변해 드리겠습니다.

---

componentWillUpdate로 되돌리기만 하면 업데이트 간에 DOM이 이동해도 React는 상관없습니다.

참 - 이벤트 핸들러를 제외하고 React는 업데이트 시 이외에는 DOM을 보지 않습니다.

리액트 이벤트핸들러는 이동된 요소에서도 동작합니다.

나는 이것에 의지하지 않을 것이고, 지금도 그것이 사실인지 확신할 수 없다.

React는 사용자가 요청한 인라인 스타일을 이미 요소에 있는 스타일과 병합합니다(설정이 되어 있지 않은 경우에도).

가 개개의 하지만, ,, 것, 것, 것, 것, 또, 또, 또, 또, 또, 또, 또, 또, 또, 또, 또, imagine, imagine, imagine, imagine, imagine, imagine, imagine, ,현재는 리액트가 개개의 속성을 설정하지만, 그 설정은 쉽게 상상할 수 있습니다.el.style.cssText그게 더 빨랐다면 개인의 변화를 날려버릴 수 있었을 거예요

문서의 다른 곳으로 DOM을 이동하더라도 React는 렌더링한 DOM을 업데이트합니다!

나는 현재 이것이 사실이라고 믿지 않으며 당신도 이것에 의존해서는 안 된다.

---

리액트하다은 100% 공허하게 것입니다.<div>반응하다Resact-rendered 요소의 속성을 나중에 변경하지 않는 한(Resact가 DOM 업데이트를 수행하도록 React를 발생시키지 않는 경우), React는 요소를 찾고 찾을 수 없을 때 혼란스러울 수 있습니다.

나는 당신이 구현 세부 사항에 근거해서 결정을 내려서는 안 된다는 Sophie의 의견에 동의해요.그러나 React가 실제로 어떻게 작동하는지 보는 것은 여전히 흥미롭다고 생각합니다.

약간의 변화가 있을 수 있지만, 일반적으로 이런 일이 일어나고 일어나는 방식입니다.

1. React가 생성하는 모든 DOM 요소에 고유한 ID(지금은 데이터 속성)를 배치한다는 사실을 고려하십시오.이 ID는 현재 매우 단순한 시스템을 기반으로 합니다.시스템에 대한 설명이 필요합니다. 루트 노드는 항상 '.0'입니다.

              .0
       .0.0        .0.1
   .0.0.0     .0.1.0 .0.1.1
   

'key' 속성을 제공할 때마다 지정한 값이 목록의 인덱스가 아닌 ID에 사용되지만 시스템은 그대로 유지됩니다.

2. React에 의해 작성된 Virtual DOM에는 ID가 동일한 경량 객체도 있습니다.이것은 가상 DOM과 실제 DOM 사이의 간단한 매핑 시스템입니다.

3. 또한 이 때문에 목록 중간에 요소가 추가 또는 삭제되면 요소의 ID가 변경되므로 'key' 속성을 지정하지 않으면 목록의 요소가 덮어쓰게 됩니다.

이 점에 유의하십시오.

componentWillUpdate로 되돌리기만 하면 업데이트 간에 DOM이 이동해도 React는 상관없습니다.

네, 리액트는 id를 사용하여 동작하기 때문에 업데이트 전에 요소를 되돌리지 않아도 동작할 가능성이 있다고 생각합니다.그러나 이 작업은 매우 까다롭고 신뢰할 수 없습니다. 요소가 추가 또는 제거되고 물건이 파손될 수 있기 때문입니다.

리액트 이벤트핸들러는 이동된 요소에서도 동작합니다.

네, 어느 정도요리액션의 이벤트핸들러는 모든 이벤트가 합성됩니다.즉, [React root DOM]노드에는 이벤트청취자가1개밖에 없어요여기서 포착된 모든 이벤트는 React의 이벤트 청취자와 대조됩니다.이것도 ID를 사용하여 요소를 조합하는 것 같아요.단, React는 부모 요소에 대한 최소한의 체크를 수행할 수 있습니다.요소가 React에 의해 렌더링된 동일한 루트 노드 내에 유지되는 한 이 기능은 작동해야 한다고 생각합니다.즉, React는 향후 id 시스템을 업데이트하고 향후 상위 노드에 대한 더 많은 체크를 수행할 수 있으며, 이로 인해 장애가 발생할 수 있습니다.

React는 사용자가 요청한 인라인 스타일을 이미 요소에 있는 스타일과 병합합니다(설정이 되어 있지 않은 경우에도).

이것은 이미 답변이 끝난 상태입니다.지금은 작동하지만, 앞으로는 작동하지 않을 수 있습니다.단, 이 구현 세부 사항에 따라 애니메이션 시스템이 몇 개 있기 때문에 단기적으로는 변경되지 않습니다.

문서의 다른 곳으로 DOM을 이동하더라도 React는 렌더링한 DOM을 업데이트합니다!

예. 동일한 DOM 요소를 동일한 react-id로 유지하면 리액트는 문서 내에서 이동된 것을 인식하지 못하고 렌더링한 위치와 동일한 위치에 있는 것처럼 갱신합니다.이미 알고 있듯이 동일한 리액트 루트에 있어야 합니다.이는 React가 가상 이벤트 등에 대해 React 루트 DOM 노드에만 바인딩되므로 중요합니다.이렇게 하면 React는 다른 라이브러리와 잘 어울리며 문서 루트에 대한 액세스 권한이 필요하지 않습니다.

주의사항: 무언가를 할 수 있다고 해서 해야 한다는 뜻은 아닙니다.일반적으로는 DOM 노드를 추가하고 React에 의해 관리되지 않는 DOM 노드에 속성을 추가해야 합니다(style: transform 값은 애니메이션에 공통).당신이 다른 일을 할 때, 일이 잘 될 수도 있다는 것을 이해하라, 하지만 보통 일을 하는 훨씬 더 좋은 방법이 있다.

---

고객님의 문제에 대해서:

그러면 문제를 어떻게 해결하시겠습니까? 예를 들어 스크롤 영역 내의 드롭다운 메뉴가 오버플로로 인해 끊기는 경우...난 항상 원소를 몸으로 옮겼지만, 그건 반응 방식이 아닌 것 같아.

여기서 가장 이상적인 상황은 우선 본문에 드롭다운을 넣는 것이라고 생각합니다.그런 다음 클릭 이벤트와 드롭다운 사이에 메시지를 전달할 수 있습니다.콜백을 사용하여 가상 DOM 상위를 충분히 높인 후 드롭다운까지 소품을 업데이트하여 상태를 관리할 수 있습니다.아니면 그냥 좋은 이벤트 시스템을 사용하세요.

언급URL : https://stackoverflow.com/questions/23530716/react-how-much-can-i-manipulate-the-dom-react-has-rendered