javascript - React - 每次渲染同一张图片时的随机位置

Question

每次我按下按钮时，都必须在 DOM 中呈现相同的图片。这张图应该有随机top每次渲染时的值位置。
我正在使用 Math.random()但初始随机数不会改变。例如，如果我刷新页面并且我得到 30 作为随机数，那么每个图片的这个数字都是相同的
这是我尝试过的:

let top = Math.floor(Math.random()*50)

const ChipStyles = {
   position: 'absolute',
   top: top,
   left: '50%',
   transform: 'translate(-50%, -50%)'
}

const Image = () => {
   return (
     <img src={myImg} style={ChipStyles} alt="" />
   )
}

export default Image

Answer 1

根据您当前的设置，您的 top无论您创建多少图像组件，值都将始终相同。如果您想要一个不同的顶部值，那么您将需要为每个 Image 组件生成一个新的顶部值。您可以使用以下代码执行此操作。

import React, { useRef } from 'react';
    
const Image = () => {
   const ChipStyles = useRef({
       position: 'absolute',
       top: Math.floor(Math.random()*50),
       left: '50%',
       transform: 'translate(-50%, -50%)'
   });

   return (
     <img src={myImg} style={ChipStyles.current} alt=""}/>
   )
}
    
export default Image

此示例使用 Ref 对象，该对象将值存储在其 current 上。属性(property)。 Refs 不会从一个渲染更改为下一个渲染，而常规对象会。
根据他们的文件:

This works because useRef() creates a plain JavaScript object. The only difference between useRef() and creating a {current: ...} object yourself is that useRef will give you the same ref object on every render.

见 Reactjs useRef从他们的官方文档中获取更多信息。
编辑
这最初使用 useMemo ，但是正如亚当指出的那样，useMemo 并不可靠，并且更适合性能优化而不是存储值。