React 自己的钩子不要 re-render 使用组件

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
   } }

还有 header 中的一个按钮，用于更改主题：

<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。

React 自己的钩子不要 re-render 使用组件

React own hook don't re-render used components

javascript

reactjs

react-hooks

use-effect

use-state