React 自己的钩子不会重新渲染使用过的组件

Question

我有一个自己的 useTheme 钩子：

// custom hook
export const useTheme = () => {
   const [theme, setTheme] = useState(localStorage.getItem('theme'))

   const changeTheme = () => {
       const newTheme = theme === LIGHT_THEME ? DARK_THEME : LIGHT_THEME
       setTheme(newTheme)
       localStorage.setItem('theme', newTheme)
   }

   return {
       theme,
       changeTheme
   } }

以及标题中的一个按钮，用于更改主题：

<button className="change-theme-icon"
        onClick={changeTheme}>CHANGE THEME</button>

还有一个 PostReview 组件，它使用了一个钩子：

const PostReview: React.FC<Props> = ({post, postRating}) => {
   const {theme} = useTheme()
   const [classes, setClasses] = useState(['center-block', 'post-review-wrapper'])

   useEffect(() => {
       setClasses([...classes, theme === 'light' ? 'background-light' : 'background-dark' ])
   }, [theme])


   return (<div className={classes.join(' ')}>
         ..........)

为什么主题变量更改后 PostReview 中的 useEffect 不触发？我做错了什么？

Answer 1

来自https://en.reactjs.org/docs/hooks-custom.html：

... 使用相同 Hook 的两个组件是否共享状态？不会。自定义 Hook 是一种重用有状态逻辑的机制（例如设置订阅和记住当前值），但是每次使用自定义 Hook 时，其中的所有状态和效果都是完全隔离的。 ...

因此，如果您想让使用自定义钩子的两个组件保持同步，您必须使自定义钩子依赖于 redux。