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来显示与否,所以直接写,不加判断。