全局变量更改时重新渲染

Question

当全局变量发生变化时，我想重新渲染我的组件。我的代码现在看起来像这样

window.loading = true;

setTimeout(() => {
  window.loading = false;
}, 4000);

class MyComponent extends React.Component {
  state = { rerender: window.loading }

  render() {
    return (
      <h1>{`Loading: ${this.state.rerender}`}</h1>
    )
  }
}

但没有任何反应，尽管我可以看到 window.loading 在控制台中更新。

Answer 1

我正在使用 React Hooks

const ChildComponent = ({ fuse }) => {
  const [legalText, setLegalText] = useState([]);

  window.loading = () => {
    setLegalText(JSON.parse(sessionStorage.getItem('legal')));
  };
}

我们在 ChildComponent 内创建了一个全局函数。您需要做的就是在应用程序中的任何位置调用 window.loading ，该函数就会触发。

一定要使用 redux、mobX 或 context API。在某些边缘情况下这很方便

Answer 2

如果你想让你的组件在全局属性更改后重新渲染，你应该使用 Promise、RxJS 或任何其他类似观察者的模式。

代码中的某处：

window.loading = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve();
  }, 300);
});

在你的组件中：

class MyComponent extends React.Component {

  state = { isLoaded: false }

  componentDidMount() {
   window.loading.then(() => 
     this.setState({isLoaded: true})
   )
  }


  render() {
    const {isLoaded} = this.state;
    return (
      ...
    )
  }
}

通过这种方式，您可以在某些全局属性更改（解决）后重新渲染组件。关键是使用Promise而不是bool原语

希望有帮助