javascript - react js模拟动画疑问

Question

var AnimationExample=React.createClass({

            getInitialState:function(){
                return {
                    position:0
                }
            },
            animationFun:function(){
                if(this.state.position<this.props.position){
                    this.setState({
                        position:this.state.position+1
                    })
                }
            },
            componentDidUpdate:function(){
                if(this.props.position){
                    setTimeout(this.animationFun,this.props.timeoutMs)
                }
            },
            render:function(){
                var pStl={
                    marginLeft:this.state.position
                };
                return (
                    <p style={pStl}>This is animate!</p>
                )
            }
            
        });
        

        ReactDOM.render(
            <AnimationExample />,
            document.getElementById('animationContent')
        );
        ReactDOM.render(
            <AnimationExample position={100} timeoutMs={10}/>,document.getElementById('animationContent')
        );

这是一个简单的js模拟动画，我的疑问是为什么最后要render两次，而render一次不行呢

Answer 1

我觉得用React写动画还是不用setState吧，因为一般来说你已经确切的知道要修改哪些属性值，而setState还要去diff整个state，感觉会影响效率。

Answer 2

因为列出的component会根据position属性的变化而更新，第一次render时compoent没有props.position，第二次render后props.position的值为100。