Question

我有一个自用的主题挂钩：

// 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共享状态？不可以。自定义挂钩是一种重用状态逻辑的机制（例如，设置订阅和记住当前值），但是每次使用自定义挂钩时，其中的所有状态和效果都是完全隔离的。 ...

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

反应自己的钩子不重新渲染用过的组件

1 个答案: