我的 React 列表项组件一次不呈现一个

Question

我不再做很多React编程了，所以我希望这个有一个简单的答案。

我有一个模拟生成器函数，它以2秒的间隔返回3个素数。在返回时，我将每个素数插入到一个列表中。在返回所有3个素数之前，列表不会渲染。我只是附上了相关的代码。

function* testPrimes(addPrime) {
const primes = [3, 5, 7];
let time = Date.now();
let i = 0;
do {
const nTime = Date.now();
if (nTime - time > 2000) {
yield primes[i++];
time = nTime;
}
} while (i < primes.length);
}

在父组件中，我填充包含的列表(实际上只是div(：

return (
<div>
<div>{appState === RUNNING ? "Running..." : "Stopped"}</div>
<div className="row">
{(() => {
if (appState === RUNNING) {
for (const prime of testPrimes()) {
console.log("foo");
primes.push(<Response {...{ prime, key: prime }} />);
}
}
})()}
{primes}
</div>
</div>
);

我看到了"；foo"；s以一定间隔打印出来，但是<响应>一次渲染所有组件。

Answer 1

由于Javascript是单线程的，因此UI渲染将被阻止，直到生成所有素数为止。请使用setTimeout()进行非UI阻塞的素数生成。您不应该在render()函数中生成素数，而应该在componentDidMount()或其他地方生成素数，并通过更新状态来重新渲染组件。

Answer 2

您也可以使用Pub-Sub模式。在useEffect中分配事件订阅。

// Check this library: https://www.npmjs.com/package/pubsub-js
import pubSub from 'pubsub-js';
function *generator() {
// This yields primes. 
// For eg:
const primes = [2, 3, 5, 7, ...]
let i = 0;
while (true) {
yield primes[i++];
}
// You can use your own logic get next prime. 
}

const generatorInstance = generator();
function publishPrimes(time = 2000) {
const prime1 = generatorInstance.next().value;  
const prime2 = generatorInstance.next().value;  
const prime3 = generatorInstance.next().value;  
// Publish 3 primes
pubSub.publish('NEXT_PRIMES', [prime1, prime2, prime3]);
// Use setTimeout to publish next 3 after 2 seconds 
// instead of waiting for 2 seconds to complete using a
// while loop, which is a **blocking** operation.
setTimeout(() => {
publishPrimes();
}, time);
}
// Do the following inside a useEffect of a component
pubSub.subscribe('NEXT_PRIMES', (primes) => {
setResponses([
...responses, 
...primes.map(p => <Response prime={p} />),
])
});