React useState 重新渲染太多次

Question

我正在创建一个带有 react 的简单轮播，我注意到我的索引被多次调用，我不明白为什么，这是我的 sn-p 代码这里也是完整版https://codesandbox.io/s/small-bash-4l7ix?file=/src/index.js

...

const pages = [
  React.forwardRef((props, ref) => (
    <animated.div ref={ref} style={{ ...props.style, background: 'lightpink' }}>
      A
    </animated.div>
  )),
  React.forwardRef((props, ref) => (
    <animated.div ref={ref} style={{ ...props.style, background: 'lightblue' }}>
      B
    </animated.div>
  )),
  React.forwardRef((props, ref) => (
    <animated.div ref={ref} style={{ ...props.style, background: 'lightgreen' }}>
      C
    </animated.div>
  )),
]

export default function App() {
  const [index, set] = useState(0)
  const [containerRef, containerSize] = useDimensions()

  const transitions = useTransition(index, p => p, {
    from: { opacity: 0, transform: 'translate3d(100%,0,0)' },
    enter: { opacity: 1, transform: 'translate3d(0%,0,0)' },
    leave: { opacity: 0, transform: 'translate3d(-50%,0,0)' },
  })
  const divStyle = {
    height: `${containerSize.height}px`,
  }

  console.log(index)
  return (
    <>
      <button className={`btn ${index === 0 ? 'btn--active' : ''}`} onClick={() => set(0)}>
        Slide 1
      </button>
      <button className={`btn ${index === 1 ? 'btn--active' : ''}`} onClick={() => set(1)}>
        Slide 2
      </button>
      <button className={`btn ${index === 2 ? 'btn--active' : ''}`} onClick={() => set(2)}>
        Slide 3
      </button>

      <div style={divStyle} className="simple-trans-main">
        {transitions.map(({ item, props, key }) => {
          const Page = pages[item]
          return <Page ref={containerRef} key={key} style={props} />
        })}
      </div>
      <p> Lorem ipusum</p>
    </>
  )
}

...

Answer 1

这是因为useTransition。

这会产生一种额外的渲染，这就是为什么您会看到多次打印索引。

我已删除 useTransition，您可以检查它仅在 index 更改时打印。

检查下面。

Answer 2

为了让组件进出转换，react-spring 中的 useTransition 挂钩会为您跟踪组件实例。这些额外的渲染是由节点的重叠安装和卸载引起的。

例如：

1. 从“幻灯片 1”开始
2. 点击“幻灯片 2”
3. 库装载 'Slide 2' // 触发重新渲染
4. 库开始过渡“幻灯片 1”
5. 库卸载 'Slide 1' // 触发重新渲染

每个过渡都被推入数组，库按顺序对它们进行动画处理。因此，您可以同时触发多个重叠动画。

检查代码和框中的 React DevTools，您将看到节点安装和卸载。