重复渲染性问题

我们先来假设一种场景:当进入页面时需要去请求获取初始数据,初始数据中有一个字段A,当A====true时需要弹出一个弹窗。

先封装一个弹窗组件,组件接口两个参数visible、close,visible控制是否显示弹窗,close用来关闭弹窗

import React from 'react';
import styles from './index.module.scss';

interface IProps {
  visible: boolean;
  close: () => void;
}


const Popup = (props: IProps) => {

  const { visible, close } = props;

  return (
    visible ? 
    

确定要删除吗?

: <> ) } export default Popup;

然后在页面中调用

import { inject, observer } from 'mobx-react';
import React, { useEffect } from 'react';
import Store from '../stores/Store';
import Popup from './Popup';

interface IProps {
  store?: Store;
}

const Main = (props: IProps) => {

  const { store } = props;

  const { visible, setVisible } = store as Store;
  
  // 在dom挂在后執行
  useEffect(() => {
    setVisible(true) // 模拟请求,弹出弹窗
  })

  return 
setVisible(false)}>
} export default inject('store')(observer(Main));

这里使用mobx@1.15.4,mobx-react@6.2.2,mobx6版本写法有变动

import { action, observable } from "mobx";

class Store {
  @observable visible = true;

  @action
  setVisible = (visible: boolean) => {
      this.visible = visible;
  }
}

export default Store;

当运行项目时,会发现每次点击关闭弹窗,弹窗又立即重新弹出。这是因为点击关闭时store中的visible发生变化,导致只要类组件render方法或者函数组件return中使用到visible的组件都会重新渲染,重新渲染又会触发useEffect hooks发送请求,如此循环,使得出现上述现象。

那么如何解决上述问题呢?

如果能不触发useEffect hooks是不是可以解决呢?不在外部传入visible以及close,而是在popup组件内部依赖store获取visible和close,这样父组件Main就不用重新渲染,进而useEffect hooks也不用再次执行。

将popup组件实现方式改成如下:

import React from 'react';
import { inject, observer } from 'mobx-react';
import styles from './index.module.scss';
import Store from '../../stores/Store';

interface IProps {
  store: Store;
}


const Popup = (props: IProps) => {
  const { store } = props;
  const { visible, close } = store as Store;

  return (
    visible ? 
    

确定要删除吗?

: <> ) } export default inject('store')(observer(Popup));

你可能感兴趣的