8 天前 / 噶牛爱尚
首发于饿了么前端写文章从 0 到 1 实现 useAxios戯言前端新手，渣渣程序猿58 人赞同了该文章在 React 发布 16.8.0 版本后，Hooks 功能正式启用。这一改变让函数式组件获得了质的飞跃，拥有了如同类组件般处理各种副作用的能力。而自定义 Hooks 的能力，进一步让我们通过 Hooks 封装，进行能力的抽象复用。 今天笔者将带领大家从 0 到 1 实现一个常用的数据请求 Hook —— useAxios。 该 Hook 将具有以下能力： 全局配置手动请求控制请求状态管理请求取消为什么要用 Hook为了说明使用 Hook 的优点，我们通过简单的一个 demo 进行对比。 不使用 H......
17 天前 / 噶牛爱尚
写文章React Fiber的优先级调度机制与事件系统司徒正美JavaScript话题的优秀回答者178 人赞同了该文章经典的事件系统分成两大块，绑定事件与分派事件，在浏览器中，分派事件很少人会直接dispatchEvent。因为创建一个DOM 事件是非常复杂的事情，不同的事件对象对应不同的事件构造器，传参也五花八门。因为分派事件基本上用户行为触发，比如我们点击了某个元素，恰逢在这上方绑定了点击事件，于是触发了。 React的绑定事件是在JSX 中进行，换言之， render时，props的onXXX事件就被收集起来，进行绑定。在jQuery时，人们发明了事件委托，将可以冒泡......
25 天前 / stevending1st
最近我发现很多面试题里面都有「如何理解虚拟 DOM」这个题，我觉得这个题应该没有想象中那么好答，因为很多人没有真正理解虚拟 DOM 它的价值所在，我这篇从虚拟 DOM 的诞生过程来引出它的价值以及历史地位，帮助你深入的理解它。 什么是虚拟 DOM本质上是 JavaScript 对象，这个对象就是更加轻量级的对 DOM 的描述。 对，就是这么简单！ 就是一个复杂一点的对象而已，没什么好说的，重点是为什么要有这个东西，以及有了这个描述有什么好处才是我们今天要介绍的内容。 为什么要有虚拟 DOM再谈为什么要用虚拟 DOM 之前，先来聊一聊 React 是怎么......
35 天前 / 噶牛爱尚
首发于冰山一角写文章对 React conf 2019 的一些 talk 的概览Heaven要做一个有梦想的程序员。佛洛伊德认为：人的精神创伤都与童年遭遇有关。135 人赞同了该文章写这个的原因是发现有点太过于平静。。虽然经常也是这样，conf 的 views 很少很少，但一般（国内）各种社交渠道/平台上还有些风声，但今年的 React conf 好像在太平洋上一样，所以简要的挑了些自己感兴趣的看一下，顺便也是第一次边看边记。。分享一下也是帮助自己梳理。 Building The New Facebook With React and Relay没记错的话这个题目在今年早些时候的 F8 上已经讲过。之前好像是......
35 天前 / 子曰五溪
https://overreacted.io/making-setinterval-declarative-with-react-hooks/ 这是Dan的一篇文章，详细阐述了如何在Hooks中使用setInterval定时器（每秒递增的计数器为例），由于提取精髓，因此略有删减。 我们在 effects 中直接使用定时器会重复启动然后清除，effects 在每次渲染时都会被调用，因此我们需要一个传递一个空数组来保证它只会被调用一次，此时获取 count 新值就会很困难。 最简单处理方式是使用 state callback ： setCount((count) => count + 1) 原因effects 是一个闭包，一直引用了第一次渲染时 count 的值......
38 天前 / 王键创生
create-react-app是一款广泛使用的脚手架，默认它只能使用eject命令暴露出webpack配置，其实这样使用很不优雅，修改内容文件的话也不利于维护，react-app-rewired正式解决这样问题的工具，今天我们就好好学习下它的用法。 1. 安装 react-app-rewiredcreate-react-app 2.x with Webpack 4npm install react-app-rewired --save-dev create-react-app 1.x or react-scripts-ts with Webpack 3npm install react-app-rewired@1.6.2 --save-dev 2. 根目录创建 config-overrides.js/* config-overrides.js */ module.exports = function override(......
38 天前 / 噶牛爱尚
写文章高阶：腾讯新闻构建高性能的 react 同构直出方案小蚊子腾讯 高级前端工程师74 人赞同了该文章在腾讯新闻抢金达人活动 node 同构直出渲染方案的总结文章中我们整体了解了下同构直出渲染方案在我们项目中的使用。正如我在上篇文章结尾所说的： 应用型技术的难点不是在克服技术问题，而是在于能够不断的结合自身的产品体验，发现其中存在的体验问题，不断使用更好的技术方案去优化用户的体验，为整个产品发展添砖加瓦。我们在根据产品的体验效果选择了 react 同构直出渲染方案，必然也要保证当前方案的可用性和可靠性。例如我们的服务能同时支......
47 天前 / 江米小枣tonylua
原文：https://dev.to/voluntadpear/comparing-react-hooks-with-vue-composition-api-4b32 Vue 最近提出了Composition API RFC，一种新的书写 Vue 组件的 API；该 API 受到 React Hooks 的启发，但有一些有趣的差异，也就是本文要探讨的内容。该 RFC 始自于在社区某些部分受到大量非议的之前一个叫做Function-based Component API的版本 -- 人们担心 Vue 开始变得更复杂而不像大家最初喜欢它时那样是个简单的库了。 参阅《在 React 和 Vue 中尝鲜 Hooks》一文 Vue 核心团队解决了围绕首个 RFC 的困惑并在新的版本中提出了一些引人关......
48 天前 / 噶牛爱尚
首发于58HRG校园招聘前端组写文章基于 React 的可视化编辑平台实践Refector我们可能需要造一个轮子……149 人赞同了该文章基于 React 的可视化编辑平台实践 本文主要介绍了基于 React 构建可视化编辑平台的实践，包括对可视化拖拽布局、在线编辑、同构直出的实现。背景目前，HRG 的英才校园在线招聘业务有大量的企业定制化需求，企业在英才校园做招聘，同时也希望有自己的招聘主页，每年都会招聘一部分兼职同学来开发这类的招聘主页，这类招聘主页通常不复杂，但是如果全部需要前端同学实现的话，还是很耗时费力的，我们希望能通过技术手段不断的提......
49 天前 / 黑夜探路人
责任小编：夕颜 性能和渲染（Render）正相关React 基于虚拟 DOM 和高效 Diff 算法的完美配合，实现了对 DOM 最小粒度的更新。大多数情况下，React 对 DOM 的渲染效率足以我们的业务日常。但在个别复杂业务场景下，性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能，其很重要的一个方向，就是避免不必要的渲染（Render）。 渲染（Render）时影响性能的点React 的处理 render 的基本思维模式是每次一有变动就会去重新渲染整个应用。在 Virtual DOM 没有出现之前，最简单的方法就是直接调用 innerHTML。Virtual DOM 厉害的地方并不是说......
64 天前 / 冷星1024
Photo byLiana MikahonUnsplash 原文：https://www.freecodecamp.org/news/async-generators-as-an-alternative-to-state-management/fbclid=IwAR2Py7k7WayAE_zq4tkd99pj3oBP7scsKp9mZbPCtv_zJqvhN4eOVAef6M8 作者：Vitalii Akimov 译者：luyc 校对者：Miya 提示：文中的蓝色字体可点击“阅读原文”访问更多内容 Async Generators（异步生成器）是一个简单但功能强大的特性，它现在已经是JavaScript的一部分，它解锁了许多新的工具来改进软件结构，使其更加灵活、易扩展、更易组合。 概括- 使用Async Generators，将不再需要组件状态、状......
78 天前 / 读芯术
全文共2788字，预计学习时长6分钟 如今，JavaScript 框架、HTML和CSS已经成为现代软件项目前端开发中必不可少的部分。到了2020年，为web应用开发项目选择合适的JavaScript框架依旧是个问题。 正在阅读本文的你，想必也在烦恼应用程序开发的技术堆栈应该如何选择。做决定很困难，此文正是为各位创业者解决困境而作。技术堆栈选择的常见问题有： React还是Vue：新的web开发项目选用哪个更好？ 两者中谁表现更好？ 开发者更喜欢哪一个？ 哪一个更适合小型web应用程序 哪一个更可靠？ 阅读......
85 天前 / 王键创生
为了实现代码规范，我们在使用中会使用诸多插件，比如eslint、prettier、commitlint、stylelint等等，在新项目中这样一套组合拳下来，也是稍显繁琐，另外还要定制配置文件，某种程度上来说是体力活。 本文的目的是介绍如何简化配置，统一规范。 1. magic-lintmagic-lint是一款代码规范工具，集检查、美化于一体，能够检查commit信息，通过hook在代码提交时规范代码，里面包含这些: eslintstylelintprettierlint-stagedhuskycommitlint使用magic-lint之后就不需要单独安装上述插件，可以无门槛使用。 1.1 安装npm install magic-lint --save-dev......
109 天前 / 噶牛爱尚
写文章带着问题看React-Redux源码（一万四千字长文预警）Nero微信公众号 一口一个前端19 人赞同了该文章欢迎关注公众号： 一口一个前端，不定期分享我所理解的前端知识 写在前面之前写了一篇解读Redux运行机制的文章 Nero：简单梳理Redux的源码与运行机制zhuanlan.zhihu.com之后一直想再写一篇React-Redux的解析，但这个源码比较复杂，好在最近收获了一些东西，分享出来。 我在读React-Redux源码的过程中，很自然的要去网上找一些参考文章，但发现这些文章基本都没有讲的很透彻，很多时候就是平铺直叙把API挨个讲一下，而且只讲某一行代码是做什......
131 天前 / 噶牛爱尚
首发于阿里云中台前端/全栈团队专栏写文章在 React 中使用 Shadow DOMHoufengProgramming is playing.73 人赞同了该文章1. Shadow DOM 是什么Shadow DOM 是什么？我们先来打开 Chrome 的 DevTool，并在 'Settings -> Preferences -> Elements' 中把 ' Show user agent shadow DOM' 打上勾。然后，打开一个支持 HTML5 播放的视频网站。比如 Youtube： 可以看到 video 内部有一个 #shadow-root ，在 ShadowRoot 之下还能看到 div 这样的普通 HTML 标签。我们能知道 video 会有「播放/暂停按钮、进度条、视频时间显示、音量控制」等控件，那其实，......