Question

如何重新渲染组件

function Bookmarks({ data }: any) {
  const bookmarkedBlogs = useBookmarks().getBookmarkedBlogs(data.allMdx.nodes);
   .....
}

当书签在钩子中发生变化时

function useBookmarks() {
  const [bookmarks, setBookmarks, accessDenied] = useLocalStorage<BlogType['id'][]>('bookmarks', []);

  const getBookmarkedBlogs = (blogs: BlogType[]) => {
    return blogs.filter(checkIsBookmarked)
  };

因为到目前为止，即使我切换书签，getBookmarkedBlogs 函数也不会执行，除非在组件的初始渲染中。

Answer 1

useLocalStorage 的实现方式，以及如何切换书签？

localStorage 更改不会通知您的每个钩子，除非您创建观察者模型
如果你不制作观察者模型，在其他钩子中切换书签或其他方式不会通知你的这个钩子，所以它不会重新运行

Answer 2

你的钩子实际上不起作用。

似乎您想要一个钩子来订阅来自 React 渲染树之外的某个源的更新。

这是一个简单的例子：

function MyComp() {
  let eventValue = useEventListener()
  
  return (
    <div>
      {eventValue}
    </div>
  )
}


function useEventListener() {
  let [ value, setValue ] = React.useState(1)
  
  React.useEffect(() => {
    setTimeout(() => setValue(5), 1000)
  }, [])
  
  return value
}

它起作用的原因是当数据应该更改时，自定义钩子会调用内置钩子。 React Hooks 框架处理剩下的事情。

您可以订阅事件流，或侦听 IPC 消息或其他内容，而不是 setTimeout。但是：

自定义钩子必须实际返回一些东西
自定义钩子只能通过调用内置钩子来触发重新渲染
自定义钩子必须在第一次调用时设置其订阅更改逻辑，这通常最好由配置为运行一次的 useEffect 处理

如何重新渲染组件

2 个答案: