Question

使用const [open, setOpen] = useState(false)，我可以创建一个变量open，该变量将保留在功能组件的调用中。

但是如果我不想在设置变量时重新渲染，该使用哪个钩子？

我有一个自定义钩子草稿：

const useVariable = (initialValue) => {
  const ref = useRef();


  return useMemo(() => {
    ref.current = [initialValue, (newValue) => { ref.current[0] = newValue }]
  }, [])
}

但是根据https://reactjs.org/docs/hooks-reference.html#usememo，我不能相信useMemo不会再被调用。

Answer 1

如果您只想将一些数据存储在变量中而在设置变量时不重新渲染，则可以使用useRef钩子

const unsubCallback = useRef(null);

if(!unsubCallback) {
    unsubCallback.current = subscribe(userId)
}

Answer 2

感谢@ shubham-khatri，我找到了解决我问题的方法。只需使用useRef钩子的initialValue：

const useVariable = initialValue => {
  const ref = useRef([
    initialValue,
    param => {
      ref.current[0] = typeof param === "function"
        ? param(ref.current[0])
        : param
}
  ]);
  return ref.current;
};

https://codesandbox.io/s/v3zlk1m90

编辑：为了解释Christopher Camp的评论，我补充说，也可以像useState一样传递一个函数。在codeandbox中查看用法

如何在React挂钩中使用静态变量

2 个答案: