Reanimated useSharedValue在组件重渲染时未生效，是Bug还是正常行为？

原因分析 #

useSharedValue 是Reanimated库中用于存储跨JS/UI线程持久化状态的Hook，它的核心特性是组件重渲染时不会重新初始化内部值。也就是说，第一次渲染时width被设置为100，之后哪怕父组件触发子组件重渲染，这个SharedValue的引用和内部值都会保留之前的修改结果，不会自动回到初始的100。

它和React原生的useState逻辑类似：useState的初始值仅在组件挂载时生效，后续重渲染会忽略初始参数；useSharedValue的初始值同样只在组件首次挂载时设置一次，后续重渲染不会覆盖已有值——这是设计预期的行为，目的是保证动画状态或跨线程状态的连续性。

解决方法 #

如果你需要在父组件重渲染时让width回到100，可以根据场景选择以下方案：

方案1：监听父组件传递的重置触发信号 #

如果父组件重渲染是因为特定props变化，可通过useEffect监听该props来重置值：

function Child({ resetTrigger }) {
  const width = useSharedValue(100);

  useEffect(() => {
    width.value = 100;
  }, [resetTrigger]);

  return (
    <View>
      <Button>Click</Button>
      <Animated.View style={{ width }} />
    </View>
  );
}

方案2：用useDerivedValue绑定外部状态 #

如果width的初始值需要跟随父组件状态动态变化，可使用useDerivedValue实时计算：

function Child({ baseWidth }) {
  const width = useDerivedValue(() => baseWidth || 100);

  return (
    <View>
      <Button>Click</Button>
      <Animated.View style={{ width }} />
    </View>
  );
}

方案3：无外部依赖时强制重置 #

如果单纯想在每次子组件重渲染时重置width，可结合useRef记录渲染次数实现：

function Child() {
  const width = useSharedValue(100);
  const renderCount = useRef(0);

  useEffect(() => {
    renderCount.current += 1;
    // 跳过首次渲染，仅在后续重渲染时重置
    if (renderCount.current > 1) {
      width.value = 100;
    }
  });

  return (
    <View>
      <Button>Click</Button>
      <Animated.View style={{ width }} />
    </View>
  );
}

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