javascript - 如何在 native react 中每秒生成一次随机数？

Question

问题很简单，但解决方案却很困惑。

我当前的实现是生成 50 到 100 之间的随机数，并使用 this.setState({...}) 保存它，然后我调用它在我的渲染方法中。

但问题是随机方法本身会多次生成随机数。这是因为每次调用 this.setState({...}) 时，render 方法都会渲染几次，并且在渲染期间，随机数会发生变化，这这不是我想要的。

export default class exampleComponent extends Component {
  constructor() {
    this.state = {
      randomNumber: 0
    };
  }

  generateRandomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

  myview = () => {
    const { randomNumber } = this.state;

    setInterval(() => this.setState({randomNumber: generateRandomNumber(50, 100)}), 20000);

    return (
      <View>
        <Text>{randomNumber}</Text>
      </View>
    );
  };
  
  render() {
    return(
      <View>
        {this.myview()}
      </View>
    )
  }
}

如何确保调用 setState() 后随机数不会多次变化？

Answer 1

是否需要将随机生成的数字分配给state？你可以将它分配给 this.randomNumber 或其他东西吗？它在 react 类中仍然可用，但不会导致重新渲染

类似这样的事情:

export default class exampleComponent extends Component {
  constructor() {
    super()
    this.randomNumber = 0

    this.generateRandomNumber = this.generateRandomNumber.bind(this)

  }

  newRandomNumber(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min; 
  }

  generateRandomNumber(){
    setTimeout(() => {
      this.randomNumber = this.newRandomNumber(1, 1000)
    }, 20000)
  }



  myview = () => {

    return (
      <View>
        <Text>{this.randomNumber}</Text>
      </View>
    );
  };

  render() {
    return(
      <View>
        {this.myview()}
      </View>
    )
  }
}

尝试2:

我使用了 javascript 来获取元素并更新innerHtml，而无需重新渲染整个组件:

class App extends Component {

  constructor() {
    super()
    this.randomNumber = 0

    this.generateRandomNumber = this.generateRandomNumber.bind(this)
  }

  componentDidMount(){
    this.generateRandomNumber() // calls it the first time and the setInterval will keep running
  }

  newRandomNumber(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min; 
  }

  generateRandomNumber(){
    setInterval(() => {
      document.getElementById("randomNumber").innerHTML = this.newRandomNumber(1, 1000)
    }, 1000)
  }

  render() {

    return (
      <div className="App">

        <div id="randomNumber"></div>

      </div>
    );
  }

}

export default App;