React.js: 내부 설정HTML vs 위험 SetInnerHTML

React.js: 내부 설정HTML vs 위험 SetInnerHTML

요소의 내부를 설정하는 것과 "배후" 차이가 있습니까?HTML vs 위험하게 SetInner 설정요소의 HTML 속성내가 단순함을 위해 제대로 청소하고 있다고 가정해봐.

예제:

var test = React.createClass({
  render: function(){
    return (
      <div contentEditable='true' dangerouslySetInnerHTML={{ __html: "Hello" }}></div>
    );
  }
});

대

var test = React.createClass({
  componentDidUpdate: function(prevProp, prevState){
    this.refs.test.innerHTML = "Hello";
  },
  render: function(){
    return (
      <div contentEditable='true' ref='test'></div>
    );
  }
});

위의 예보다 조금 더 복잡한 일을 하고 있지만, 전체적인 생각은 같습니다.

네, 차이가 있어요!

사용으로 인한 즉각적인 효과innerHTML대dangerouslySetInnerHTML동일 - DOM 노드가 삽입된HTML로 갱신됩니다.

하지만 이면에서는dangerouslySetInnerHTMLReact는 컴포넌트 내의 HTML은 신경 쓰지 않는다는 것을 알 수 있습니다.

React는 가상 DOM을 사용하기 때문에 실제 DOM과 차이를 비교할 때 HTML이 다른 소스로부터 전송되는 것을 알고 있기 때문에 해당 노드의 자식 검사를 바로 수행할 수 있습니다.퍼포먼스가 향상됩니다.

더 중요한 것은 단순히 이 기능을 사용하여innerHTMLReact는 DOM 노드가 변경되었음을 알 수 없습니다.다음 번에는render함수를 호출하면 React는 수동으로 삽입된 콘텐츠를 해당 DOM 노드의 올바른 상태로 덮어씁니다.

사용하는 솔루션componentDidUpdate컨텐츠가 항상 동기화되도록 하기 위해서라면 작동하겠지만 렌더링할 때마다 플래시가 발생할 수 있습니다.

돔에 직접 바인딩할 수 있습니다.

<div dangerouslySetInnerHTML={{__html: '<p>First &middot; Second</p>'}}></div>

위험하게 설정된 내부 정보에 따르면HTML,

의 부적절한 사용innerHTML는 크로스 사이트 스크립팅(XSS) 공격의 대상이 됩니다.표시용으로 유저의 입력을 소거하는 것은 에러가 발생하기 쉬운 것으로 악명이 높으며, 적절히 소거하지 않는 것은, 인터넷상의 Web 취약성의 주된 원인 중 하나입니다.

델의 설계 이념은, 「안전하지 않은」작업은 「간단한」 것이어야 하고, 개발자는 「안전하지 않은」작업의 실행 의도를 명확하게 표명하는 것입니다.소품명dangerouslySetInnerHTML의도적으로 무서운 값으로 선택되며, 소거된 데이터를 나타내기 위해 프롭 값(문자열 대신 객체)을 사용할 수 있습니다.

보안에 미치는 영향을 충분히 이해하고 데이터를 적절히 삭제한 후 키만 포함하는 새 개체를 만듭니다.__html데이터 삭제가 가치로 간주됩니다.다음으로 JSX 구문을 사용한 예를 나타냅니다.

function createMarkup() {
    return {
       __html: 'First · Second'    };
 }; 

<div dangerouslySetInnerHTML={createMarkup()} /> 

자세한 내용은 아래 링크를 참조하십시오.

문서:반응 DOM 요소 - 위험하게 SetInnerHTML.

(위험한 Set Inner)에 근거하고 있다HTML).

당신이 원하는 것을 할 수 있는 소품입니다.그러나 주의해서 사용해야 한다는 것을 알리기 위해 이름을 붙였습니다.

이 두 . 즉, 이 두 가지에는 차이가 있습니다.dangerouslySetInnerHTML: React diffing algorithm(https://reactjs.org/docs/reconciliation.html)은 이 속성에서 변경된 HTML 노드를 무시하도록 설계되어 있기 때문에 성능이 약간 향상됩니다.를 사용하는 경우innerHTML리액트(Respect) DOM(DOM)을 사용합니다.다음에 렌더가 발생하면 React는 수동으로 삽입된 내용을 해당 DOM 노드의 올바른 상태로 덮어씁니다.그곳이 그곳이곳이다.componentDidUpdate★★★★★★★★★★★★★★★★★!

언급URL : https://stackoverflow.com/questions/37337289/react-js-set-innerhtml-vs-dangerouslysetinnerhtml