ネイティブ・スタッガード・レンダリングに反応します

Question

このコードでは、どのようにレンダリングをずらしますか？一度にすべてをレンダリングするのではなく、各要素を1つずつレンダリングします。私はsetTimeoutを試しましたが、それを実装する方法、またはそれを行う正しい方法であるかどうかはわかりません。

renderSelected() { 
    var temp=[]; 
    for (var i = 0; i < 11; i++) { 
    temp.push(this.selected(i)) 
    } 
    return temp; 
} 

selected(number) { 
    return (<View key={number} style={styles.normal} > 
    <Text>{number}</Text> 
    </View>); 
} 

答えに基づいて更新しますが、それでも動作しません。回答のコードはReact Nativeなのであまりにも異なっていました。

renderLater(i) { 
    TimerMixin.setTimeout(() => { 
    this.selected(i); 
    }, 100); 
} 

renderSelected() { 
    var temp=[]; 
    for (var i = 0; i < 11; i++) { 
    temp.push(this.renderLater(i)) 
    } 
    return temp; 
} 

selected(number) { 
    return (<View key={number} style={styles.normal} > 
    <Text>{number}</Text> 
    </View>); 
} 

Answer 1

は、コードに基づいて、問題はあなたがrenderLater何も返さないことから、実際には何も含まれていないtempを返すということです。

解決策は状態を持つ要素を作成し、状態に応じて1つ以上の要素を描画することです。これは、reactjs pageのtimer要素に似ています。ここでは、状態が1秒おきに更新され、新しいレンダリングがトリガされます。ティッカーを毎秒変更するのではなく、カウンタを増やすことができ、renderSelected()にすべての要素をそのカウンタまで表示できます。 renderLaterはありません。ちょうどthis.setState()と呼ばれ、異なる数の要素で新しいレンダリングを定期的に起動します。

var MyClass = React.createClass({ 
    getInitialState: function() { 
    return {counter: 0}; 
    }, 
    tick: function() { 
    if (this.state.counter >= 10) return; 
    this.setState({counter: this.state.counter + 1}); 
    }, 
    componentDidMount: function() { 
    this.interval = setInterval(() => {this.tick();}, 50); 
    }, 
    componentWillUnmount: function() { 
    clearInterval(this.interval); 
    }, 
    render: function() { 
     var temp=[]; 
     for (var i = 0; i <= 10 && i <= this.state.counter; i++) { 
      temp.push(this.selected(i)) 
     } 
     return temp; 
    }, 
    selected: function(number) { 
     return (<View key={number} style={styles.normal} > 
     <Text>{number}</Text> 
     </View>); 
    } 
}); 

ReactDOM.render(<MyClass />, mountNode); 

Live demo

また、代わりに、初めに各空render()機能を最初から個別にすべての要素を作成し、十分な時間が経過したとき、彼らが何かを表示することができます。そのためには、別々の要素ごとにx.setState()関数を使用して、新しいレンダリングをトリガーすることができます。これにより、各ティックですでに描画された要素を消去して再描画することを回避できます。

---

旧答え：

あなたが遅れるもののためのグローバルキューを行うことができます。あなたはすべての50ミリ秒後に何かにいくつかの要素をレンダリングしたい場合は、そのキューで

var queue = []; 

/* executes all element that have their delay elapsed */ 
function readQueue() { 
    var now = (new Date()).getTime(); 
    for (var i = 0; i < queue.length; i++) { 
     if (queue[i][0] <= now) { 
      queue[i][1](); 
     } else { 
      if(i != 0) queue = queue.slice(i); 
      return; 
     } 
    } 
    queue = []; 
} 

/* Delay is in milliseconds, callback is the function to render the element */ 
function addQueue(delay, callback) { 
    var absoluteTime = (new Date()).getTime() + delay; 
    for (var i = 0; i < queue.length; i++) { 
     if (absoluteTime < queue[i][0]) { 
      queue.splice(i, 0, [absoluteTime, callback]); 
      return; 
     } 
    } 
    queue.push_back([absoluteTime, callback]); 
} 

var queueTimer = setInterval(readQueue, 10); //0.01s granularity 

、あなたがやるだけのことができます：

function renderElementLater(time, index) { 
    /* render */ 
    addQueue(time, function(){ReactDOM.render(selected(index), mountNode);}): 
} 
for (var i = 0; i <= 10; i++) { 
    renderElementLater(50*i, i); 
} 

（キューを読み取ってチェックされている場合）あなたは粒度を変更することができます

より細かい制御のために10ms以下のものにまで拡張することができます。

でも、私はsetTimeoutで何が問題なのか分かりませんが、あなただけ行うことができます：

function renderElementLater(time, index) { 
    /* render */ 
    setTimeout(function(){ReactDOM.render(selected(index), mountNode);}, time): 
} 
for (var i = 0; i <= 10; i++) { 
    renderElementLater(50*i, i); 
} 

はたぶん、あなたの問題は、ループ内で作成したコールバックで変更する変数の値を使用したい場合は、私がやったように、それは（別の関数で囲まする必要があることを来ましたファンクションコードを直接入れるのではなく、新しいファンクションrenderElementLaterを作成します）。