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

Question

我正在尝试使用钩子将此 class 组件转换为功能组件

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，并将其存储在 state 中：

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

您可以将其存储在 state 中：

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，在这种情况下，您将访问idRef.current以获取 id

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

Answer 4

谢谢大家，您的解决方案效果很好。 我也尝试了这个解决方案，我也觉得没问题：用this.id替换Dialog.id 。 这个解决方案有什么缺点吗？