javascript - React 组件在状态更改后不重新渲染，但正在调用 render()

Question

所以我有一个方法需要一段时间才能完成(>20 秒)，它会执行大量数学运算和 CPU 繁重的工作，这就是它需要这么长时间的原因。在运行时，它会多次调用 setState 并且状态会正确更新并调用 render()。但是，该组件不会在网页上重新呈现，但它会在该方法完成后重新呈现。

我相当确定该方法与 CPU Hook ，因此 React 不会重新渲染。有没有办法稍微暂停该方法的执行以使网页重新呈现？或者有没有办法强制页面重新呈现？

class FibonacciPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      n: 0
    }
    // compute to 1000th place
    this.nth = 1000
  }

  fibonacci(nth) {
    console.log(nth)
    this.setState({
      n: nth
    })
    if (nth < 2) {
      return 1
    } else {
      return this.fibonacci(nth - 1) + this.fibonacci(nth - 2)
    }
  }

  componentDidMount() {
    this.fibonacci(this.nth)
  }

  render() {
    console.log("RENDER")
    return ( <p> {this.state.n} </p>
    )
  }
}

ReactDOM.render(<FibonacciPage />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

这个片段可能不会在浏览器中显示它的意义，因为它使用 console.log，我不知道你是否能看到。

Answer 1

这并不是说它与 CPU Hook (当然它可能与 一个 核心 Hook )，而是只有一个浏览器线程用于运行 JavaScript 和更新页面显示。只要您的方法在运行，浏览器就无法更新页面的显示。

Is there a way to pause the execution of the method for a little bit in order for the webpage to rerender? Or is there a way to force the page to rerender?

为此，您必须:

1. 将您的函数分成多个 block 并分别运行每个 block ，使用 setTimeout 或类似的方法来安排下一个 block 。通过这样做，您可以让线程退出您的 JavaScript 代码并被浏览器用来重新绘制页面。

   或

2. 将计算量大的代码移至 Web Worker(spec、MDN)，这样它就可以与页面更新并行运行，即使该方法进行大量计算也能保持页面响应。