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。