前话 业务数据赋予了原生组件对外提供服务的能力，业务组件取数有静态数据和动态数据，业务组件更多的是通过数据请求获取动态数据。 如何写好一个「高可用」的业务系统取决于是否写好了一个个业务组件。「取数」是

用Context管理数据，更贴切React原生语法，并且新版ContextAPI性能也得以提升，之前旧版的Context发生改变时，并不能准确的知道具体有哪些子组件需要更新，需要所有组件更新（内部会有小优化去bailout跳过）,新版ContextAPI更多像是一种依赖收集，将…

SOLID 原则的主要是作为关心自己工作的软件专业人员的指导方针，另外还为那些以经得起时间考验的设计精美的代码库为荣的人。 今天，我们将从一个糟糕的代码示例开始，应用 SOLID 的第一个原则，看看它

每次提及 Hook 时，只能说得出 useState 以及 useEffect 来。是得好好总结总结，全面认识 Hook 。 自定义 Hook ，常见 Hook 的实现。 React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进…

通过高阶函数，渲染属性，hook 都可以实现代码复用，实现的方法大同小异；在自定义 Hook 大放异彩的时候，也请不要忘记高阶函数，渲染属性这些可以复用逻辑的方法。

笔者是一个 react 重度爱好者，在工作之余，也看了不少的 react 文章, 写了很多 react 项目 ,接下来笔者讨论一下 React 性能优化的主要方向和一些工作中的小技巧。送人玫瑰，手留余香，阅读的朋友可以给笔者点赞，关注一波 。 陆续更新前端文章。 方向分别加以探…

hooks是一种能够在函数式组件中调用的函数，他可以让你在不编写class的情况下使用state以及其他的react特性。 然后需要在对应的JSX节点中添加ref属性，这个ref属性值就是调用useRef返回的ref对象。此时需要获取真实DOM，只需要获取到ref的curren…

在 React 16 中，除去 Fiber 架构外，Hooks 是最令人激动的一个特性，相比于 class component，Hooks 加持后的 function component 在写法与思路上都大有不同，很多时候显得更为简洁与清爽（熵更低，弱化生命周期的概念），同时解…

useState、useEffect、useRef是如何替代原生命周期和Ref的。 如何使用React Hooks编写自己的UI组件库。 文章讲了React拖拽上传的精简实现，但直接翻译照搬显然不是我的风格。 于是我又用React Hooks 重写了一版，除CSS的代码总数 1…