如何表达 React 组件实例的静态(不可变)状态?

Question

使用函数式 React API 表达组件静态(不可变(状态的最佳(最高性能和最佳实践(方法是什么？

对于现实世界的用例，假设我们需要为每个 react 组件实例生成唯一的静态标识符(对于 htmlid(。

1( 一种方法可能是使用内部组件状态 (useState(

let incrementId = 1;
const Slider = () => {
const [id] = useState(`slider_${incrementId++}`); // THIS LINE
return <div id={id}>...</div>
}

2(或者使用记忆(useMemo(

let incrementId = 1;
const Slider = () => {
const id = useMemo(() => `slider_${incrementId++}`, []);  // THIS LINE
return <div id={id}>...</div>
}

3(也许还有第三条路。

我自然会使用1) useState因为它确实表明我们正在谈论组件状态，但最近才看到useMemo用于同样的原因。

稍微扩展一下初始问题，这里的两种方法都可以用于安全地表达这种情况吗，还是其中一种更好(更快，更清晰(？

Answer 1

我认为这里没有性能考虑，因为代码在这两种情况下都只运行一次。

我会把它提取到它自己的钩子中并像这样使用：

let incrementId = 1;
const useSliderId = () => useMemo(() => `slider_${incrementId++}`, []);

用法：

const Slider = () => {
const id = useSliderId()
...
}