Lapple/react-box

语言: JavaScript

git: https://github.com/Lapple/react-box

Wraps重复渲染组件,在真实DOM中保留其节点以减少涂料
Wraps repeatedly rerendered components preserving their nodes in real DOM to reduce paints
README.md (中文)

反应箱

Wraps重复渲染组件,在真实DOM中保留其节点以减少涂料。这个想法来自Noscript框架,其中box是视图的容器,用于管理活动视图的可见性,而不是从DOM中获取不相关的节点。

安装

npm install react-box

用法

将您的内容包装到Box元素中,并确保不同类的子项具有不同的键:

render: function() {
    var content;

    if (this.props.mode === 'map') {
        content = <Map key='map' />;
    } else {
        content = <Post key='post' id={ this.props.id } />
    }

    return <Box>{ content }</Box>;
}

此示例将生成以下HTML结构:

<!-- Initial render: <Content mode='map' /> -->
<div>
    <div style="display: block;">
        <div class="map"><!-- … --></div>
    </div>
</div>

<!-- First update: <Content mode='post' id='1' /> -->
<div>
    <div style="display: none;">
        <div class="map"><!-- … --></div>
    </div>
    <div style="display: block;">
        <div class="post">
            <h1>Post ID: 1</h1>
            <!-- … -->
        </div>
    </div>
</div>

<!-- Second update: <Content mode='post' id='2' /> -->
<div>
    <div style="display: none;">
        <div class="map"><!-- … --></div>
    </div>
    <div style="display: none;">
        <div class="post">
            <h1>Post ID: 1</h1>
            <!-- … -->
        </div>
    </div>
    <div style="display: block;">
        <div class="post">
            <h1>Post ID: 2</h1>
            <!-- … -->
        </div>
    </div>
</div>

<!-- Third update: <Content mode='post' id='2' /> -->
<div>
    <div style="display: block;">
        <div class="map"><!-- … --></div>
    </div>
    <div style="display: none;">
        <div class="post">
            <h1>Post ID: 1</h1>
            <!-- … -->
        </div>
    </div>
    <div style="display: none;">
        <div class="post">
            <h1>Post ID: 2</h1>
            <!-- … -->
        </div>
    </div>
</div>

本文使用googletrans自动翻译,仅供参考, 原文来自github.com

en_README.md

React Box

Wraps repeatedly rerendered components preserving their nodes in real DOM to reduce paints. The idea is borrowed from Noscript framework, where box is a container for views that manages visibility of active views instead of taking irrelevant nodes out of DOM.

Installation

npm install react-box

Usage

Wrap your content into Box element, and make sure that children of different classes have distinct keys:

render: function() {
    var content;

    if (this.props.mode === 'map') {
        content = <Map key='map' />;
    } else {
        content = <Post key='post' id={ this.props.id } />
    }

    return <Box>{ content }</Box>;
}

This example will result in the following HTML structure:

<!-- Initial render: <Content mode='map' /> -->
<div>
    <div style="display: block;">
        <div class="map"><!-- … --></div>
    </div>
</div>

<!-- First update: <Content mode='post' id='1' /> -->
<div>
    <div style="display: none;">
        <div class="map"><!-- … --></div>
    </div>
    <div style="display: block;">
        <div class="post">
            <h1>Post ID: 1</h1>
            <!-- … -->
        </div>
    </div>
</div>

<!-- Second update: <Content mode='post' id='2' /> -->
<div>
    <div style="display: none;">
        <div class="map"><!-- … --></div>
    </div>
    <div style="display: none;">
        <div class="post">
            <h1>Post ID: 1</h1>
            <!-- … -->
        </div>
    </div>
    <div style="display: block;">
        <div class="post">
            <h1>Post ID: 2</h1>
            <!-- … -->
        </div>
    </div>
</div>

<!-- Third update: <Content mode='post' id='2' /> -->
<div>
    <div style="display: block;">
        <div class="map"><!-- … --></div>
    </div>
    <div style="display: none;">
        <div class="post">
            <h1>Post ID: 1</h1>
            <!-- … -->
        </div>
    </div>
    <div style="display: none;">
        <div class="post">
            <h1>Post ID: 2</h1>
            <!-- … -->
        </div>
    </div>
</div>