React中style属性变更无法触发重渲染？添加key恢复正常的原因

问题1：为何在React中style属性变更无法触发组件重渲染？ #

• 先纠正一个常见误解：不是style变更本身不会触发重渲染，核心在于style的变更是否由React的响应式数据驱动。
• 如果style是基于普通变量（非useState/useReducer状态、非props）或者硬编码的固定值，React无法感知到它的变化，自然不会触发组件重渲染。
• 只有当style依赖的是响应式状态或props时，状态/props的变更才会触发组件重渲染，React才会对比虚拟DOM差异，更新真实DOM上的style属性。

问题2：点击按钮时span的display属性仅变更一次，添加key后恢复正常的原因？ #

你代码里的核心问题是写错了CSS的display属性值——static不是合法的display取值（合法值包括inline、block、none、flex等），浏览器会直接忽略这个无效设置。

具体执行流程：

1. 初始状态isShow=true，span的style设置为display: 'static'，浏览器不识别该值，使用span默认的inline显示方式，所以span正常显示。
2. 第一次点击按钮，isShow变为false，style设置为display: 'none'，浏览器生效，span隐藏。
3. 第二次点击按钮，isShow变回true，style再次设置为display: 'static'，浏览器依旧忽略这个无效值；但React的diff算法认为这是同一个span元素，只会更新它的style属性，不会重新创建元素，导致真实DOM里的span仍然保持display: 'none'的状态。
4. 当你给span加上key={isShow}后，每次isShow切换，key值都会变化（true→false→true）。React的diff算法会把不同key的元素判定为全新元素，会卸载旧的span并重新挂载新的span。新挂载的span因display: 'static'无效，会使用默认的inline显示方式，因此能正常显示。

更合理的修复方案：把static改成合法的display值，不用加key也能正常工作，修改后的代码如下：

<span style={{display: isShow ? 'inline' : 'none'}}>content area</span>

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