自定义 hook 简单实现 React 状态管理

本文探讨了 web 开发过程中常见的组件状态同步问题,并介绍一种简单实用的解决方案。读者在阅读完本文后,可以尝试阅读 React Context 实现,原理与此类似。在阅读源码的过程中,你会发现第三方库尽管看起来代码量很多,技术原理可能并没有想象中那么复杂。在掌握了分析问题的能力与相关的知识后,阅读源码也会更加顺畅。整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。
摘要由CSDN通过智能技术生成

背景

在我们开发前端需求时,会遇到多个组件内部状态同步的问题,这些组件往往在 DOM 结构上相距甚远。以网页中常见的“换肤功能”为例,ThemeSwitch 组件在更改内部主题色状态 color 时,希望实时更新其他组件的主题色,实现动态主题切换实时预览功能:

为了实现类似的功能,大家可能会使用 Redux 之类的状态管理库。但是有两个问题值得我们思考:

1.我只是想同步个状态,能简单实现不引入第三方类库么?
2.状态管理类库内部是如何实现的,原理是什么?

问题分析

分析问题的思路有很多,大致可以分为两种:

  • 0 - 1 :先把代码跑起来,一步步遇到问题,解决问题;适合解题路径较清晰问题;
  • 1 - 0 :从结果出发,分析要想达到该结果的前置条件,追本溯源;适合拆解复杂问题;

这里我们采用 1 - 0 的方法来分析:

1. 通知同步

要想达到状态同步,当主题切换组件 ThemeSwitch 改变内部主题状态,执行 setColor(newColor)时,我们只要 通知 其他组件执行同样 setColor(newColor) 操作更新自己的状态

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值