Bokk的博客

目录前言一、background1.1 需求1.2 example二、实现2.1 example2.2 useToggle实现2.3 设计新的dispatch2.4 调用user的onChange逻辑2.5 final veriosn总结 前言 最近开始学习React，跟着Kent学，有很多干货，这里分享Rect中的一个设计模式Control Props，这个设计方法跟React中的Control Component 文章中完整的示例代码可以查看 这里 一、background 1.1 需求 有时候用户希

目录前言一、background 前言 最近开始学习React，跟着Kent学，有很多干货，这里分享Rect中的一个设计模式方法重写或者是控制反转IoC，就是用户可以根据API提供的方法重写某些方法以满足设计需求，这样也满足了对修改封闭，对扩展开放原则 一、background 用户的需求是时刻变化的，之前提供的API可能不完全cover用户的需求，这时候就需要给API做扩展；具体的例子比如是reducer给接受的action中的方法需要改变 ...

目录前言一、background二、原型2.1 example2.2 实现2.3 改进总结 前言 最近开始学习React，跟着Kent学，有很多干货，这里分享Rect中的控制反转Inversion of Control 这里还是讨论props传递的问题，之前React中的设计模式 - 组合组件(上) 以及React中的设计模式 - 组合组件(下) 已经讨论过很多模式，本文讨论利用控制反转， 让组件使用者调用props, 而不是被动从父组件接受props 文章中完整的示例代码可以查看 这里 一、back

目录前言一、background二、解决办法2.1 初始方案2.2 使用hook2.3 子组件获取属性总结 前言 最近开始学习React，跟着Kent学，有很多干货，这里分享Compound Components组合组件的第二种模式 文中完整的示例代码可以查看 这里 一、background 之前在React中的设计模式 - 组合组件(上)中，我们提到可以通过cloneElement的方法修改给子组件加属性，从而不需要通过props向下传递，但是如果遇组件跟DOM元素嵌套之后，这个方法就不能用了，情况如

目录前言一、background1.1 example1.2 需求二、React的组合模式2.1 需求2.2 设计2.3 新的设计2.4 支持DOM元素总结 前言 最近开始学习React，跟着Kent学，有很多干货，这里分享Compound Components组合组件 文中完整的示例代码可以查看 这里 一、background 1.1 example 组合模式是backend的一个概念，但是frontend其实也是有类似的设计模式的，比如select跟options的组合 <select>

目录前言一、background1.1 一般context的使用1.2 提出问题1.3 提出解决方案1.4 最佳实践总结 前言 最近开始学习React，跟着Kent学，有很多干货，这里分享Context API 一、background 1.1 一般context的使用 如果大家使用过Reducer，那么以下的场景不会陌生 / src/context/counter.js const UserContext = React.createContext() function UserProvider({