4 天前 / Dunizb
来源：https://medium.com/swlh，作者：Nir Yosef 在这篇文章中，我将分享我对 React Hooks 的观点，正如这篇文章的标题所暗示的那样，我不是一个忠实的粉丝。 让我们来分析一下 React 官方的文档中描述的放弃类而使用钩子的动机。 动机 1：class 令人困惑我们发现，class 可能是学习 React 的一大障碍，你必须了解 this 在 JavaScript 中的工作方式，这与大多数语言中的工作方式截然不同。你必须记住要绑定事件处理程序，代码会非常啰嗦，React 中函数和类组件之间的区别，以及何时使用每个组件，甚至在有经验的 React 开发人员之间也会导致分歧。
16 天前 / 冷星1024
作为 React 开发者，你能回答如下几个问题么？ 为什么 string 类型的 ref prop 将会被废弃？ function 类型的 ref prop 会在什么时机被调用？ React.createRef 与 useRef 的返回值有什么不同？ 其实，这三个问题中的 ref 包含两个不同概念： 不管是 string、function 类型或是 React.createRef、useRef 创建的 ref，都是作为数据结构看待 问题 2 探讨的时机是将 ref 作为生命周期看待 接下来本文会分别从数据结构、生命周期两个角度探讨 ref。 这，就是关于 ref 的一切。
37 天前 / 冷星1024
日益忙碌的一周又过去了，是时候开始每周一次的总结复盘了，今天笔者就来剖析一下 github 中 star 数 15.1k 的开源项目 redux-thunk。 作为一名 React 方向的前端工程师，不管是被面试还是面试别人，大部分都会说起 redux-thunk 的实现原理，因为它非常经典且有用，而且代码量少的感人，只有短短 12 行代码，却能解决 React 开发中同一个函数支持多 dispatch 和异步 action 的问题（虽然这完全依赖于 redux 的中间件机制（Middleware））。
64 天前 / 冷星1024
写在开头在 vue 中有天然的 keep-alive 这个功能实现，react 也有一个库，react-keep-alive，但是这个库是直接进行 dom 操作，会导致数据驱动失效，断层至于为什么会失效断层，大家可以看我之前对 react-keep-alive 这个库源码的研究讲解，大概一共 1500 行 TS 代码最近确实比较忙，没什么时间写文章，但是尽量给大家写一些实用的东西，也在准备做一个非常棒的东西给大家去学习如何在 React 中实现 keep-alive？(react-keep-alive 源码讲解)本源码库地址： https://github.com/searchq=react-activation 使用安装 yarn add react-activation# ornpm instal...
65 天前 / 冷星1024
React 是一个专注的组件库。因此，它对如何请求远程数据没有什么建议。如果要通过 HTTP 请求数据并将其发送到 Web API，可以考虑下面四种方法。 内联写法集中管理自定义 Hookreact-query/swr 注意：在本文中，我将使用 fetch 进行 HTTP 调用，但是这些模式也适用于 Axios 之类的替代方法。另外，如果你使用的是 GraphQ L，还可以考虑使用 Apollo 之类的其他不错的选择。这篇文章假设你正在调用传统的 REST API。 方式 1：内联这是最简单，最直接的选择。在 React 组件中进行 HTTP 调用并处理响应。
68 天前 / Ryan众乐
文末福利：开发者藏经阁 NO.1 背景介绍 IDE 的 Layout 系统需要整合不同的功能视图模块，向用户提供一个完整易用的最终集成开发环境。业界现有 IDE 产品的实现基本上都是只提供一个最终的成品 IDE，视图本身具有一定的拓展性，但是不需要具备可强自定义的能力，所以只需要预定义好一套视图系统，其他视图模块开发时按照约定的规范来进行贡献即可。KAITIAN 的定位与业界的 IDE 产品有所不同，目的是提供一个强大且可拓展可定制的 IDE 底层，基于这个 IDE 底层，我们需要满足集成方的各式各样的布局定制需求...
68 天前 / Dunizb
来源：https://medium.com/js-dojo/ 作者：Oahehc (Andrew) 这是有关 React 和 Vue 语法比较的第三篇文章。在本文中，将比较两种生态系统中最著名的状态管理库（Redux 和 Vuex）的语法。 第一篇文章：React.js 和 Vue.js 的语法并列比较 第二篇文章：Next.js 和 Nuxt.js 的语法比较，Vue 和 React 的两大 SSR 解决方案 议程创建 StoreAction 异步 ActionReducer | MutationCombine-Reducers | ModulesConnect-with-Component 中间件 | 插件 Selector | GetterDevTools 创建 StoreRedux: https://redux.js.org/basics/store import React from 'react' imp...
75 天前 / Ryan众乐
首发于飞冰（ICE）写文章开发 React 和 Rax 样式用这款 VS Code 插件就够了洋小风前端 26 人赞同了该文章我们通过 React 和 Rax 开发了大量的前端应用。在开发 JSX 文件时，基于代码提示和补全，代码片段，TypeScript 等方式很好的提升了页面逻辑的开发效率。而我们却经常忽略了样式的开发效率，相信你在开发样式文件的过程中，一定遇到了很多不方便的地方。 现在给大家推荐一款超好用的 VS Code 插件 Iceworks Style Helper，它可大大提升外样式文件的开发效率。
95 天前 / Ryan众乐
点击上方“前端技术砖家”关注 ahooks[1] 是由蚂蚁 umi 团队、淘系 ice 团队以及阿里体育团队共同建设的 React Hooks 工具库。ahooks 基于 React Hooks 的逻辑封装能力，提供了大量常见好用的 Hooks，可以极大降低代码复杂度，提升开发效率。 ahooks 致力成为和 antd/fusion 一样的 React 基础设施，帮助开发者在逻辑层面省去大量的重复工作。 ahooks 前身 ahooks 的前身是蚂蚁开源的 @umijs/hooks[2]，可以说 ahooks 是 umi hooks 的 2.0 版本。 umi hooks 从 2019 年 9 月 发布 v1.0 之后，一路前行，得到了不少用户的青睐。
97 天前 / 前端De早读课
前言 今日早读文章由字节跳动 @HcySunYang 授权分享。 正文从这开始~~ TOC： effect() 和 reactive() shallowReactive() readonly() shallowReadonly() isReactive() isReadonly() isProxy() markRaw() 哪些数据是可以被代理的 markRaw() 函数用于让数据不可被代理 toRaw() ReactiveFlags 调度执行 effect - scheduler watchEffect() 异步副作用和 invalidate 停止一个副作用 (effect) watchEffect() 与 effect() 的区别 track() 与 trigger() ref() isRef() toRef() toRefs() 自动脱 ref customRef() shallowRef() triggerRef() unref() Lazy 的 effect()...
97 天前 / Ryan众乐
项目背景源于 2019 年 11 月 16 日FCC 成都社区主办的Web 全栈大会上尹吉峰老师的 GraphQL 的分享，让我产生了浓厚的兴趣。GraphQL 是一个用于 API 的查询语言，是使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。一个 GraphQL 服务是通过定义类型和类型上的字段来创建的，然后给每个类型上的每个字段提供解析函数。 参考学习资料： https://graphql.cn/learn/ https://typescript.bootcss.com/basic-types.html https://www.apollographql.com/docs/react/ 基于以上的一番学习，做了个实践的小项目，就代码做以下分析。
101 天前 / lmjben
点击上面的前端日志关注我们吧！ 翻译：lmjben 作者：Tyler Hawkins 正文：1970字 预计阅读时间：5 分钟 关于前端开发，我最开心的事情就是总有新的东西可以学习。但我们可能一辈子都在掌握各种编程语言、库和框架，但仍然一无所知。 因为我们都在学习，这也意味着我们都容易犯错误。没关系，我们的目的是变得更好。如果你犯了一个错误并从中吸取教训，你就做得很好！但是如果你没有学到任何新的东西，并且不断重复犯同样的错误，emmm......可能你的职业生涯就会停滞不前。 本着这种精神，下面是我在 CodeReview 初级开发同学时经常看到的三个错误。
116 天前 / 高飞
React React 是一个用于开发用户界面的 JavaScript 库， 是由 Facebook 在 2013 年创建的。 React 集成了许多令人兴奋的组件、库和框架 [1]。 当然，开发人员也可以自己开发组件。 图片在最佳实践之前，我建议在开发 React 应用程序时使用测试驱动开发（TDD）[2]。 测试驱动开发意味着首先编写一个测试，然后根据测试开发你的代码，这样更容易识别出错误。 本文翻译自 Medium：https://towardsdatascience.com/react-best-practices-804def6d5215#c966...
125 天前 / 苏溪云
自上一篇写关于 diff 的文章到现在已经过了二十天多，利用业余时间和 10 天婚假的闲暇，终于搞懂了 React 源码中的调度原理。当费劲一番周折终于调试到将更新与调度任务连接在一起的核心逻辑那一刻，忧愁的嘴角终于露出欣慰的微笑。 最早之前，React 还没有用 fiber 重写，那个时候对 React 调度模块就有好奇。而现在的调度模块对于之前没研究过它的我来说更是带有一层神秘的色彩，色彩中朦胧浮现出两个字：“困难”。