javascript - Javascript 中加载事件的竞争条件

Question

这或多或少是代码

抱歉语法错误，我是用手机输入的

export default class Main extends React.Component {

  componentDidMount() {
    axios.get('/user?ID=12345')
  .then(function (response) {
    if (response){
    document.addEventListener('load', () => {/* remove spinner using jquery */});
} else { /* redirect to somewhere else */}
  })
  }

  render() {
    return (
      <SomeComponent />
    );
  }
}

我在 React 中使用了 addEventListener，因为我找不到任何其他方法将加载微调器的删除绑定(bind)到加载事件。

问题是这里存在竞争，对于慢速网络站或快速 CPU 的网络站，加载事件可能会在请求解决之前很久就启动，这会导致加载旋转器保持不变。

有没有办法检查加载事件是否已经启动？

如果我能做到这一点，我将能够在添加事件监听器后检查它，如果它已经启动，我将手动删除微调器。

Answer 1

我不会使用 jquery 来完成此任务(或根本不会使用 React)，因为您可以以更“ react ”的方式来完成它。
您可以将数据存储在 state 中，并在状态更改时有条件地在 render 方法中渲染组件。
顺便说一句，您无法避免第一次渲染。

小例子:

const Loader = () => <div>Loading...</div>

const MyComponent = ({message}) => <div>{message}</div>

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ''
    };
  }

  componentDidMount(){
    // mimic async operation
    setTimeout(()=>{
      this.setState({message: 'Hi there!'})
    }, 1500);
  }

  render() {
    const {message} = this.state;
    return (
      <div>
        {message ? <MyComponent message={message} /> : <Loader />}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

编辑
作为您评论的后续内容:

But then you re-render the entire component just to change the display style of the preloader element, right?

不完全正确，我认为您应该阅读更多有关 Reconciliation and The Diffing Algorithm 的内容。看看 this示例:

React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.