React本机组件一经计算就不会更新

Question

我在屏幕中有一个组件列表。每个组件都会对 useEffect 进行计算。我希望他们在完成每次计算后立即更新，但相反，它们会在所有计算完成后全部更新。

我做错了什么？

组件示例：

import React, {useEffect, useState} from 'react';
import {View, Text} from 'react-native';

const Teste = () => {
  const Item = props => {
    const [tempo, setTempo] = useState('calculando...');

    useEffect(() => {
      const inicio = new Date();
      const rdm = Math.random();
      sleep(rdm * 1000 + 2000);
      setTempo(`${new Date() - inicio} millisegundos`);
    }, []);

    const sleep = milliseconds => {
      const date = Date.now();
      let currentDate = null;
      do {
        currentDate = Date.now();
      } while (currentDate - date < milliseconds);
    };

    return (
      <View style={{marginBottom: 20}}>
        <Text>Item {props.nome}</Text>
        <Text>Tempo - {tempo}</Text>
      </View>
    );
  };

  return (
    <View style={{padding: 40}}>
      <Item nome="1" />
      <Item nome="2" />
      <Item nome="3" />
    </View>
  );
};

export default Teste;

Answer 1

这里有两个问题...

1. 睡眠功能，我什至无法
2. 定义item teste> teste组件，这意味着每当teste渲染器时，item重新定义，

我建议将iteg> item移出teste ，并使用基于承诺的 Sleep

const sleep = (ms) => {
  let timer;
  const promise = new Promise(r => {
    timer = setTimeout(r, ms);
  });
  return [ promise, () => { clearTimeout(timer); } ];
};

const Item = ({ nome }) => {
  const [tempo, setTempo] = useState('calculando...');

  useEffect(() => {
    const inicio = new Date();
    const rdm = Math.random();
    const [ delay, cancel ] = sleep(rdm * 1000 + 2000);
    delay.then(() => {
      setTempo(`${new Date() - inicio} millisegundos`);
    });

    return cancel; // make sure timeout is cleared on unmount
  }, []);

  return (
    <View style={{marginBottom: 20}}>
      <Text>Item {nome}</Text>
      <Text>Tempo - {tempo}</Text>
    </View>
  );
};

const Teste = () => (
  <View style={{padding: 40}}>
    <Item nome="1" />
    <Item nome="2" />
    <Item nome="3" />
  </View>
);

在这里 sleep> sleep（）返回两者，一旦超时到期，也可以解决一个诺言，以及如果您的组件已卸下，则可以取消延迟的函数。