0

我最近观看了 Lyn Clarke 的视频，指出 ReactJS 16.2.0 或 React Fiber 为我们提供了一个平台，我们可以在其中拥有平滑的 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;
  }
}
4

1 回答 1

1

AsyncMode渲染应用程序时需要使用组件。

<AsyncMode> <App /> </AsyncMode>

我计划自己测试异步渲染，所以我会在可能的时候用我的代码链接更新答案。

于 2018-04-09T18:35:50.953 回答