如何在React中给props赋固定随机值，重渲染时保持不变？

方案1：外部传入随机值并保持固定 #

你之前的写法每次重渲染都会重新调用getRandomInt生成新值，是因为该方法直接写在了JSX的表达式位置，父组件每次渲染都会重新执行该表达式。只需要把随机值放到初始化只会执行一次的逻辑中存储即可：

import { useState } from 'react'

// 父组件内，初始化时生成一次随机值，后续重渲染不会变更
const [rotateList] = useState(() => {
  return Array.from({length: 3}, () => getRandomInt(-5, 5))
})

// 渲染时直接使用预生成的固定值
<MyComponent rotate={rotateList[0]} />
<MyComponent rotate={rotateList[1]} />
<MyComponent rotate={rotateList[2]} />

单个组件使用的话也可以用useMemo加空依赖实现：

const fixedRotate = useMemo(() => getRandomInt(-5, 5), [])
<MyComponent rotate={fixedRotate} />

方案2：MyComponent内部生成固定随机值 #

完全可以在组件内部完成随机值赋值，无需外部传入，同时保证重渲染时数值不变：

函数组件实现

import { useState } from 'react'

function MyComponent(props) {
  // 初始化时生成一次随机值，支持优先使用外部传入的rotate属性
  const [rotate] = useState(() => {
    return props.rotate ?? getRandomInt(-5, 5)
  })

  // 后续业务逻辑直接使用rotate变量即可，重渲染不会变更
  // ...
}

如果不需要响应式变更也可以用useRef存储：

const rotateRef = useRef(getRandomInt(-5, 5))
// 取值时用 rotateRef.current

类组件实现

class MyComponent extends React.Component {
  // 实例属性初始化时生成一次，不会随重渲染变更
  rotate = this.props.rotate ?? getRandomInt(-5, 5)

  // 也可以写在构造函数中：
  // constructor(props) {
  //   super(props)
  //   this.rotate = props.rotate ?? getRandomInt(-5, 5)
  // }

  // ...
}

内部实现的方案使用更灵活，外部调用时可以选择传入固定值，也可以不传直接使用组件自动生成的固定随机值。

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