React 数据全局状态管理器valtio（全局组件显示隐藏）

2022-06-14 886 阅读1分钟

1.状态管理库 Store

 * 公共的的数据状态管理
 */
import { proxy } from 'valtio'
const Store = proxy({
  load: false,
})

![1.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e6de1e48c0bb42afb9da56551ee086e1~tplv-k3u1fbpfcp-watermark.image?)
export default Store

2.任意组件改变状态值

import Store from "../stores/Store";
import Loading from "../components/Loading";
class Parent extends Component {
  render() {
    Store.load = true;
    setTimeout(() => {
      Store.load = false;
    }, 3000)
    return (
      <>
        <div onClick={this.handleChange}>我是父类</div>
        <Loading></Loading>
      </>
    );
  }
}
export default Parent;

3.组件监听状态值的3改变

import { useSnapshot } from 'valtio'
import Store from "../stores/Store";

export default function Dome(props) {
  const { load } = useSnapshot(Store)
  return (
    <>
      <div style={{ display: load ? 'block' : 'none', width: '100vw', height: '100vh', background: 'rgba(0, 0, 0, 0.7)' }}></div>
    </>
  );
}