React.js最佳实践：状态变化时显示或隐藏HTML元素的实现方法

不需要额外使用useEffect监听状态变化，直接将props值动态绑定到元素属性即可，这是React中最简洁也最符合框架设计逻辑的实现方式。

场景1：隐藏后保留元素占位（布局不会抖动） #

如果需要元素隐藏后仍然占据原有页面空间，直接绑定visibility属性即可，实现代码如下：

<td style={{ visibility: props.changeVisibiltyEvent === 1 ? 'visible' : 'hidden' }}>
  <Button variant="contained" onClick={() => changeCase('closeCase')}>fall schließen</Button>
</td>

这种方式下元素仍然保留在DOM树中，绑定的事件、内部状态都会留存，只是视觉上不可见。

场景2：隐藏后不保留占位（元素完全消失，布局自适应） #

如果不需要保留元素占位，可以选择以下两种实现：

方式A：用display属性控制 #

<td style={{ display: props.changeVisibiltyEvent === 1 ? 'table-cell' : 'none' }}>
  <Button variant="contained" onClick={() => changeCase('closeCase')}>fall schließen</Button>
</td>

注意td元素的默认display值为table-cell，如果是普通div可以替换为block或者对应的display值即可。

方式B：条件渲染（直接从DOM树移除元素） #

如果隐藏后不需要保留元素的临时状态、事件监听，推荐用条件渲染，性能开销更低：

{props.changeVisibiltyEvent === 1 && (
  <td>
    <Button variant="contained" onClick={() => changeCase('closeCase')}>fall schließen</Button>
  </td>
)}

这种方式隐藏时元素会直接从DOM中删除，下次显示时会重新创建，适合不需要留存元素临时状态的场景。

补充说明 #

你当前编写的useEffect属于多余逻辑：React的props变化会自动触发组件重渲染，直接把状态绑定到JSX属性上就能实现自动同步，额外增加监听逻辑反而会带来不必要的渲染开销和状态不同步的风险。
如果接收到的changeVisibiltyEvent是字符串类型的'0'/'1'，可以转成数字再判断：Number(props.changeVisibiltyEvent) === 1，避免类型不匹配导致判断错误。

内容的提问来源于stack exchange，提问作者innom