反應光纖動畫無法正常工作

Question

最近，我觀看了Lyn Clarke的視頻，指出ReactJS 16.2.0或react fibre為我們提供了一個平台，使我們可以進行平滑的CSS過渡和動畫處理。 我嘗試了同樣的方法，進行了轉換，創建了999個項目的列表，並單擊按鈕更新了所有999個項目。 單擊按鈕后，我會在過渡上產生閃爍的效果，這不應該按照文檔進行操作。我在代碼中做錯什么了？ 以下是我的組件：

import React from "react";

export default class ReactFibre extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            randomArray:[]
        }
        this.changeArray = this.changeArray.bind(this)
    }

componentWillMount(){
    let tempArray = [];
    for(let i=0; i<999; i++){
        tempArray.push(Math.random());
    }
    this.setState((state,props) =>{
        return {
            randomArray: tempArray
        }
    })
}

changeArray(){
    let tempArray = [];
    for(let i=0; i<999; i++){
        tempArray.push(Math.random());
    }
    this.setState((state,props) =>{
        return {
            randomArray: tempArray
        }
    });
}
render() {
    let randomArray = this.state.randomArray;
    return (
        <div className="content">
            <strong>The Power of React Fibre</strong>
            <button onClick={this.changeArray}>Change State</button>
            <div className="block"></div>
            <ul>
                {
                    randomArray.map((item)=>{
                        return <li key={item}>{item}</li>
                    })
                }
            </ul>
        </div>
    );
}
}

CSS：

.block {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 50px;
  background-color: #0CB1C4;
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

@keyframes spin {
  from {
     width: 100px;
  }

  to {
    width: 300px;
  }
}

Answer 1

呈現應用程序時，您需要使用AsyncMode組件。

<AsyncMode> <App /> </AsyncMode>

我正計划測試自己的異步渲染，所以我將盡可能地通過代碼鏈接更新答案。