如何使用带有反应钩子的静态变量

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

编辑：为了解释克里斯托弗坎普的评论我添加了一个函数也可以像在useState中一样传递。请参阅codesandbox中的用法