React.render()와 ReactDOM.render() 사이에 차이가 있습니까?

React.render()와 ReactDOM.render() 사이에 차이가 있습니까?

기사에서 그들이 사용한 장소 중 몇 군데군데React.render()그리고 몇 군데는ReactDOM.render()이 둘 사이에 특별한 차이가 있나요?

이것은 0.14에서 도입된 매우 최근의 변경입니다.React를 코어 라이브러리와 DOM 어댑터로 분할했습니다.렌더링 방법은 다음과 같습니다.ReactDOM.render.

https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

React.render는 React 0.14에서 폐지되었습니다.react-native, react-art, react-canvas, react-three 등의 패키지로 React의 아름다움과 본질은 브라우저나 DOM과는 무관합니다.

이를 보다 명확하게 하고 React가 렌더링할 수 있는 환경을 더 쉽게 구축할 수 있도록 주요 반응 패키지를 react와 react-dom의 두 가지 요소로 분할했습니다.

이렇게 하면 React와 React Native의 웹 버전 간에 공유할 수 있는 구성 요소를 작성할 수 있습니다.

리액트 패키지에는 React.createElement, .createClass, .Component, .PropTypes, .Children 및 요소 및 구성 요소 클래스와 관련된 기타 도우미가 포함됩니다.컴포넌트를 구축하기 위해 필요한 동형 또는 범용 도우미라고 생각하시면 됩니다.

react-dom 패키지에는 ReactDOM.render, .unmount ComponentAtNode 및 .findDOMName이 있습니다.

React.render는 React 0.14 이후 폐지되었습니다.반응은 두 개의 독립된 라이브러리로 나뉘었다.코어 라이브러리는 React 컴포넌트 조작 방법, 네스트 방법 등을 알고 있지만 컴포넌트를 가져와 DOM에 렌더링하는 방법은 다음과 같습니다.ReactDOM컴포넌트를 렌더링하려면React사용하다ReactDOM.

import React from 'react';
import ReactDOM from 'react-dom';

그런 다음 다음과 같이 적용합니다.

ReactDOM.render(App);

이렇게 실행하려고 하면 다음과 같은 오류가 발생할 수 있습니다.

구성 요소 요소가 잘못되었습니다.컴포넌트 클래스를 전달하지 않고 React.createElement로 전달하여 인스턴스화해야 합니다.

이 에러가 발생했을 경우는, 조금 애매합니다.다음 함수는 DOM 컴포넌트의 인스턴스를 만듭니다.

const App = function() {
  return <div>Howdy!</div>;
}

합격했습니다App의 클래스로서ReactDOM.render()컴포넌트의 인스턴스가 아닙니다.즉, 컴포넌트의 인스턴스를 만들고 전달해 주세요.그렇지 않으면 인스턴스화하여 DOM에 전달해야 합니다.

따라서 다음과 같은 인스턴스를 전달하여 문제를 해결할 수 있습니다.

ReactDOM.render(<App />);

'가 생깁니다.App을 건네주다ReactDOM.render()그러나 다음과 같은 에러 메세지가 표시될 가능성이 있기 때문에, 아직 도달하지 못했습니다.

대상 컨테이너가 DOM 요소가 아닙니다.

리액트는 내가 .왜냐하면, 이것은 「로 렌더링해야 할지」라고 하는 것입니다.ReactDOM는 페이지의 기존 DOM 노드를 참조하는두 번째 인수를 사용합니다. <<고객명>>을 렌더링 합니다.<App />컴포넌트, HTML 문서에 이미 존재하는 이 요소에 HTML을 삽입합니다. 그쪽으로 가게 될 거예요.index.html 찾다divclass="container"루트 노드입니다.다음과 같이 컨테이너에 대한 참조만 전달하면 됩니다.

ReactDOM.render(<App />, document.querySelector('.container'));

그러면 컴포넌트 렌더링이 화면에 표시됩니다.하여 ES6 구문을 작성했습니다.App위로부터의 컴포넌트는 다음과 같이 재작성할 수 있습니다.

const App = () => {
  return <div>Howdy!</div>;
}

굵은 을 사용하는 은 '살찐 화살'을 사용하는 것과 .function키워드를 지정합니다.

언급URL : https://stackoverflow.com/questions/33007402/is-there-any-difference-between-react-render-and-reactdom-render