Question

我最近观看了Lyn Clarke的视频，声称ReactJS 16.2.0或反应光纤为我们提供了一个平台，我们可以拥有平滑的CSS过渡和动画。我通过转换和创建999项的列表并通过单击按钮更新所有999项来尝试相同的操作。点击按钮后，我对转换产生了闪烁效果，这不应该像docs那样。我在代码中做错了什么？以下是我的组成部分：

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>

我打算自己测试异步渲染，所以我会尽可能用我的代码链接更新答案。

反应光纤动画无法正常工作

1 个答案: