Question

我正在尝试构建一个React应用，发现更新组件时元素的行为异常。我有两个函数返回相同的内容，但dom元素的方向不同，而一个具有不同css样式的元素则取决于所调用的函数（函数取决于window.innerWidth）。如果宽度足够高，则它将为此调用合适的函数。当然，应用程序会在窗口调整大小事件上应用响应，并且如果其真正的更新组件是基本相同的逻辑。一切正常，但是在实际状态和更新一个div之间表现不佳。似乎在删除之前，div的样式（在本例中为margin）有一瞬间将margin值重置为0。我可以看到状态之间快速，怪异的跳跃。我不知道我说得对吗。代码：

html
    <div id="main">
    </div>

scss
    span{
      width:100%;display:block;
    }
    .addition{
      margin-left:0; 
      height:50px;width:100px;
      background:blue;
    }
    @media only screen and (max-width: 800px) {
      .addition{
      height:50px;width:100px;
      background:blue;
      margin-left:50%;
      }
    }

react
class App extends React.Component {
  constructor(props){
    super(props);
    if(window.innerWidth > 800){
      this.state = {first: true,
                    width:window.innerWidth
                   };
    }else{
      this.state = {first:false,
                    width:window.innerWidth
                   };
    }
  }
  componentDidMount(){
    window.addEventListener('resize',this.updateScreen.bind(this));
  }
  updateScreen = ()=> {
    if(window.innerWidth > 800 && this.state.width <=800){
      console.log(this.state.width);
      this.setState({first: true,width:window.innerWidth});
    }else if(window.innerWidth <= 800 && this.state.width >800){
      console.log(this.state.width);
      this.setState({first: false,width:window.innerWidth});
    }
  }
  firstFun(){
    return(
    <nav>
        <div className="addition"></div>
        <span>Example</span>
  </nav>
    );
  }
  secondFun(){
    return(
    <nav>
        <span>Example</span>
        <div className="addition"></div>
  </nav>
    );
  }
  render(){
    console.log("rendered")
    return(
      this.state.first ?
      this.firstFun() : 
      this.secondFun()
    );
  }
}

ReactDOM.render(
<App/>,
document.getElementById('main')
);

基本上，当我慢慢调整窗口大小时，可以在以800px宽度更新组件之间看到div.addition的怪异行为。我认为只有在@media之间的位置（例如边距，顶部，左侧等）发生变化时，才会发生这种情况。为什么会发生这种情况？将来如何防止这种情况发生？

编辑我使用Mozilla Firefox-在Chrome中永远不会发生。有谁知道如何修复或改善性能？

在渲染之间反应CSS样式

0 个答案: