如何在 React 中的无状态函数组件中初始化类实例?

Question

使用有状态模式，我通常在构造函数中初始化一种帮助程序类，并在一些组件生命周期方法中使用其方法，如下所示：

class StatefulComponent extends Component {
constructor(props) {
super(props);
this.helper = new HelperClass();
}
componentDidMount() {
this.helper.doSomething();
}
}

现在，我想将相同的逻辑转换为无状态函数组件，如下所示：

const StatelessFunction = (props) => {
this.helper = new HelperClass();
useEffect(() => {
this.helper.doSomething();
}, []);
}

但是当我看到这个组件从一开始就被称为每个道具变化时，我担心。 这让我觉得我的类实例是一遍又一遍地创建的。 我错了吗？我能做些什么来防止重新创建我的类并使用 ref 代替？

我遇到了useRef，但不确定它是否适合我的情况。

Answer 1

回顾这个和一些评论，我可以看到不能信任useMemo不再运行HelperClass构造函数，useRef只会在第一次渲染后设置帮助程序，因为它的初始值不能是一个函数。可能 useState 是执行此操作的最简单、最可靠的方法：

const [helper] = useState(()=>new HelperClass());

您可以使用 useMemo 创建 HelperClass 的实例，并使用 Effect 来调用它。给它们两个空的依赖项数组意味着它们只会被称为"挂载"。我用引号挂载，因为备忘录只会在第一次渲染时调用，效果会在第一个渲染周期完成后调用。

const StatelessFunction = props => {
const helper = useMemo(() => new HelperClass(), []);
useEffect(() => {
helper.doSomething();
}, [helper]);
return (<JSX />);
};

如果你唯一要做的就是调用doSomething，并且不再使用帮助程序实例，你可以使用useEffect来做到这一点：

useEffect(() => {
new HelperClass().doSomething();
}, []);

如果您确实计划在以后使用帮助程序实例，则可以将前面的示例与 useMemo 或 useRef 一起使用：

const helper = useRef();
useEffect(() => {
helper.current = new HelperClass();
//only called once after first render
helper.current.doSomething();
}, []);
//you still have the helper instance as helper.current

Answer 2

我会选择useMemo解决方案，但以下是您可以使用useRef+useEffect来消除一些困惑的方法：

const StatelessFunction = (props) => {
const helper = useRef(); // ref is equivalent of instance prop
useEffect(() => {
helper.current = new HelperClass();
helper.current.doSomething();
}, []); // this is equivalent of componentDidMount
}

Answer 3

只用useRef，不需要和useEffect组合。

const instance = useRef();
if (!instance.current) {
instance.current = new HelperClass();
}

有关详细信息，请参阅 React 文档。

Answer 4

你是对的，useRef允许您在重新渲染时保留相同的HelperClass实例

const StatelessFunction = (props) => {
const helper = useRef(new HelperClass())
useEffect(() => {
helper.current.doSomething();
}, []);
}