2022-05-25 react 页面组件二次渲染

前言：一个react+antd搭的项目，业务需求是点击弹出一个弹窗（antd modal，这个modal被我写成了页面内的一个组件），

然后在弹窗内点击一个下拉组件（antd select）,触发该组件的onChange事件，这时候这个弹窗就会隐藏，然后又重现出现，这个我将它成为页面内组件的二次渲染。

这个效果的体验极差，基本上就是你点一下它又刷新一下，窗口会不断闪现。

说一下我的代码结构，就是一个类函数，我在render return之前自定义了一个弹窗（antd modal），然后用一个状态（譬如：status）来控制它是否显示，render return的代码如下：

{/* 省市区选择框 */}
{
  this.state.status ?
  <CityBoxModal />
  :
  null
 }

然后，就是不断地去找原因了。

这里我不着重描述原因，直接说解决方案：

不要用上面那种写法，咱们就直接把弹窗写出来，不要用这种形式↓

{
  this.state.status ?
    //  xxx组件
  :
  null
 }

来控制该xxx组件地显示与否，反正弹窗它已经是默认监听了status来显示与否，所以直接写，不加判断。