仅为每个渲染组件指定一次静态样式

Question

有没有办法让我的风格只应用于每个单独的卡片图像一次。 例如，我通过函数将转换样式分配给 css;我希望图像保留该原始值，但是当呈现新组件时，该卡应应用不同的转换值，但不应重新渲染原始现有组件样式。 目前所有变换样式都使用不同的值重新渲染，这在 React 的功能组件中是否可行？根据我在 Card 函数中放置当前变量的位置，所有值都会不断变化，在 Card 函数之外，值是静态的，并且卡片彼此重叠显示，因此您只能看到一张卡片。

const getStyle = () => {
let angle = Math.random() * 90 - 45
let xPos = Math.random() * 40 - 20
let yPos = Math.random() * 40 - 20
let transform = `translate(${xPos}px, ${yPos}px) rotate(${angle}deg)`
return transform
}

const Card = (props) => {
let current = getStyle()
return (
<img style={{ transform: current }} className="Card" alt={props.name} src={props.cardImg} />
)
}

Answer 1

使用 useMemo。

const Card = (props) => {
let current = useMemo(getStyle, [])
return (
<img style={{ transform: current }} className="Card" alt={props.name} src={props.cardImg} />
)
}