使用钩子将类组件转换为功能组件

Question

我正试图使用钩子将此类组件转换为功能组件

import React, { Component, cloneElement } from 'react';
class Dialog extends Component {
constructor(props) {
super(props);
this.id = uuid();       
}
render(){
return ( <div>Hello Dialog</div> );
}
}

这个组件是用一个特定的ID启动的，因为我可能需要使用它们的多个实例。如果我使用功能组件，我如何实现这一点？

Answer 1

一种解决方案是在第一次渲染时使用useEffect创建ID，并将其存储在状态：

const Dialog = () => {
const [id, setId] = useState(null);
useEffect(() => {
setId(uuid())
}, [])
return <div>Hello Dialog</div>
}

将一个空数组作为useEffect的第二个参数会使其无法触发多次。

但另一个极其简单的解决方案可能是。。。在组件之外创建它：

const id = uuid();
const Dialog = () => {
return <div>Hello Dialog</div>
}

Answer 2

您可以将其存储在状态：

const [id] = useState(uuid()); // uuid will be called in every render but only the first one will be used for initiation 
// or using lazy initial state
const [id] = useState(() => uuid()); // uuid will only be called once for initiation 

您也可以将其存储在React ref:中

const id = useRef(null);
if(!id.current) {
// initialise 
id.current = uuid();
}
// To access it’s value
console.log(id.current);

Answer 3

任何实例属性都会变成ref，在这种情况下，您将访问id 的idRef.current

function Dialog() {
const idRef = useRef(uuid())
return <div>Hello Dialog</div>
}

Answer 4

谢谢大家，您的解决方案运行良好。我也尝试了这个解决方案，我发现它也可以：用Dialog.id替换this.id。这个解决方案有什么缺点吗？