React 中动画的问题

我是 React 菜鸟，帮我看一下这个代码：
```tsx
// ...
const [show,setShow]=useState(false)

const showFn=()=>{
        setShow(!show)
}

//...
<div style={{left:show?'0px':'100px'}}></div>
//...
```
这段代码中，根据 show 的值修改这个定位元素的 left ，并且切换的时候这个元素是有过渡效果的，但是因为状态改变导致整个组件重新渲染，那么这个过渡效果就失效了。
要如何解决？

虽然通过这几行看不出来你所谓的过渡效果是怎么实现的，但只论过渡效果，除非要实现复杂的动画，否则和 React ，或者说和 js 没什么关系。给这个 div 一个 class ，内容类似.transition-left { transition: left 0.3s ease }，应该就可以了。

组件渲染不会导致动画失效，除非是节点结构产生了变化。如果有这个问题应该是你其他代码导致的。这里有一个示例可以看下： https://stackblitz.com/edit/vitejs-vite-fhycqw?file=src%2FApp.jsx

@dufu1991 #4 React Context 仅用来共享对象实例（例如 eventbus 实例）就够了，不要在 Context Provider 中触发任何状态变化