关于react.js:重复渲染性问题

咱们先来假如一种场景：当进入页面时须要去申请获取初始数据，初始数据中有一个字段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 ?     <div className={styles.container}>      <div className={styles.box}>        <p>确定要删除吗？</p>        <div>          <button onClick={close}>勾销</button>          <button>确认</button>        </div>      </div>    </div>    :    <></>  )}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 <div>    <Popup visible={visible} close={() => setVisible(false)}></Popup>  </div>}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 ?     <div className={styles.container}>      <div className={styles.box}>        <p>确定要删除吗？</p>        <div>          <button onClick={close}>勾销</button>          <button>确认</button>        </div>      </div>    </div>    :    <></>  )}export default inject('store')(observer(Popup));