render(element, vnodes)
Description
템플릿을 DOM에 렌더링합니다.
m.render(document.body, 'hello');
// <body>hello</body>Signature
m.render(element, vnodes, redraw)
| 매개변수 | 타입 | 필수 | 설명 |
|---|---|---|---|
element | Element | 예 | 하위 트리의 부모 노드가 될 DOM 요소 |
vnodes | Array<Vnode>|Vnode | 예 | 렌더링할 vnode입니다. |
redraw | () -> any | 아니요 | 서브트리의 이벤트 핸들러가 호출될 때마다 호출되는 콜백 함수 |
| 반환 값 | undefined를 반환합니다. |
How it works
m.render(element, vnodes) 메서드는 가상 DOM 트리(일반적으로 m() hyperscript 함수를 통해 생성됨)를 받아 DOM 트리를 생성하고 element에 마운트합니다. element가 이전 m.render() 호출을 통해 이미 마운트된 DOM 트리를 가지고 있는 경우, vnodes는 이전 vnodes 트리와 비교되어 변경 사항을 반영하기 위해 필요한 부분만 기존 DOM 트리가 수정됩니다. 변경되지 않은 DOM 노드는 수정되지 않습니다.
선택 사항인 redraw 인자를 전달하면 서브트리의 이벤트 핸들러가 호출될 때마다 해당 콜백 함수가 호출됩니다. 이는 m.mount 및 m.redraw에서 자동 리드로우 기능을 구현하는 데 사용되지만, 일부 타사 프레임워크와의 통합과 같은 고급 사용 사례를 위해 공개되기도 합니다.
m.render는 동기적으로 실행됩니다.
Why Virtual DOM
매번 리드로우할 때마다 vnode 트리를 생성하는 것이 비효율적으로 보일 수 있지만, JavaScript 데이터 구조를 생성하고 비교하는 것은 DOM을 읽고 수정하는 것보다 훨씬 효율적입니다.
DOM을 직접 조작하는 것은 여러 이유로 성능에 큰 영향을 줄 수 있습니다. 읽기와 쓰기를 번갈아 수행하면 여러 브라우저에서 빠르게 연속적으로 다시 그리기가 발생하여 성능에 악영향을 미칠 수 있지만, 가상 DOM 트리를 비교하면 쓰기를 단일 다시 그리기로 묶어 처리할 수 있습니다. 또한 다양한 DOM 작업의 성능 특성은 구현체마다 다르며 모든 브라우저에 대해 학습하고 최적화하기 어려울 수 있습니다. 예를 들어, 일부 구현에서는 childNodes.length를 읽는 데 O(n)의 복잡도가 필요합니다. 일부 환경에서는 parentNode를 읽을 때 다시 그리기가 발생하기도 합니다.
반면, JavaScript 데이터 구조를 탐색하는 것은 훨씬 더 예측 가능하고 안정적인 성능을 제공하며, vnode 트리는 최신 JavaScript 엔진이 더 나은 성능을 위해 히든 클래스와 같은 적극적인 최적화를 적용할 수 있도록 구현됩니다.
Differences from other API methods
m.render() 메서드는 내부적으로 m.mount(), m.route(), m.redraw() 및 m.request()에 의해 호출됩니다. 스트림 업데이트 이후에는 호출되지 않습니다.
m.mount() 및 m.route()와 달리 m.render()를 통해 렌더링된 vnode 트리는 뷰 이벤트나 m.redraw() 호출, m.request() 호출에 응답하여 자동으로 다시 그려지지 않습니다. Mithril.js의 내장 자동 다시 그리기 시스템 대신 렌더링을 직접 제어하려는 라이브러리 개발자에게 적합한 저수준 메커니즘입니다.
또 다른 차이점은 m.render 메서드는 두 번째 매개변수로 vnode(또는 vnode 배열)를 받는 반면, m.mount() 및 m.route()는 컴포넌트를 받는다는 점입니다.
Standalone usage
var render = require("mithril/render")
m.render 모듈은 Knockout, React 및 Vue와 같은 뷰 라이브러리와 유사한 역할을 합니다. 최신 검색 공간 축소 알고리즘과 DOM 재활용을 통해 가상 DOM diffing 엔진을 구현하여 초기 페이지 로드 및 다시 렌더링 모두에서 최고 수준의 성능을 제공합니다. require("mithril/render/vnode")를 통해 노출되는 정규화 외에는 Mithril.js의 다른 부분에 대한 종속성이 없으므로 독립 실행형 라이브러리로 사용할 수 있습니다.
비교적 작은 크기에도 불구하고 렌더 모듈은 완전한 기능을 제공하며 독립적으로 실행될 수 있습니다. SVG, 사용자 정의 요소 및 모든 유효한 속성 및 이벤트(특이한 대소문자 구분 에지 케이스 또는 예외 없이)를 포함하여 예상할 수 있는 모든 것을 지원합니다. 물론 컴포넌트와 라이프사이클 메서드 또한 완벽하게 지원합니다.
m.render를 독립 실행형 모듈로 사용하는 경우 렌더링할 vnode를 생성하기 위해 hyperscript 함수를 가져오는 것이 유용할 수 있습니다.