2 天前 / 公子
奇虎科技有限公司 前端工程师 9 人赞同了该文章前段时间 React 团队发布了一项用于解决 React 页面在多接口请求下的性能问题的解决方案 React Server Components。当然该方案目前还在草案阶段，官方也只是发了视频和一个示例 demo 来说明这个草案。 Server Components 官方在视频和 RFC 中说明了产生这个方案的主要原因是因为大量的 React 组件依赖数据请求才能做渲染。如果每个组件自己去请求数据的话会出现子组件要等父组件数据请求完成渲染子组件的时候才会开始去请求子组件的数据，也就是官方所谓的 WaterFall 数据请求队列的问题。
4 天前 / 太空编程
以上是将要实现的效果，Javascript 框架 React 的 Logo 图形，首先我们来拆解下，它包括三个交叉的椭圆和中间一个圆点，所以我们 Html 元素可以用以下代码实现： 整个 logo 图形的外层以 main 类包裹，里面的 ellipse 类元素表示椭圆，最下面的类名 ball 表示中间的圆点 首先我们让整个 logo 图形水平垂直居中 .main { height: 100vh; display: flex; justify-content: center;align-items:center;position: relative;} 然后我们给类名 ellipse 元素（及椭圆）添加样式...
8 天前 / Ryan众乐
写文章 Rxjs + React 实战，看完你就知道为什么说 angular 在 5 年后等你 buhi 全不栈程序员 53 人赞同了该文章 rxjs 相信大家都听说过， 没听说过的可以看看他们官网， 是一个响应式编程的库， Rxjs 跟 react 结合来用的人就比较少了， 这里专门用一个例子来举例看看如何使用 rxjs 替代 redux 此类的状态管理库来充当 react 等框架的 model 层。 下面假设读者具有了 rxjs 的基础知识， 对最基础的 API, 例如 subscribe 和 unsubscribe 不做特别介绍。
10 天前 / Ryan众乐
首发于前端备忘录写文章 React 下 DDD 的威力江湖术士埋头搞事中 104 人赞同了该文章总结一下 DDD 下，React 在解决各项问题时的威力： 组件状态保持 Vue 有 keep-alive 用来保持组件状态，用起来还挺舒服的 但是要加个前提 —— 在没有逻辑复用的情况下，用起来挺舒服的 在有逻辑复用的情况下 —— 组件状态保持不是一个问题 为什么？组件逻辑服务单例声明在 条件渲染 之前，状态必然保持 因为不是个问题，所以根本不用讨论，对这个问题说 byebye 吧~ 动画还在想动画的事情？还在选适合自己的动画插件？ 没有必要啦 我们来看看看看，搭配 anime.js ...
12 天前 / Dunizb
什么是 AnimXYZ？ AnimXYZ 是一个 CSS 动画库，用于为你的网站创建自定义 CSS 动画。是什么让 AnimXYZ 如此之好，它是可组合的，这意味着你可以组合和混合不同的动画来创建自己的高度可定制的 CSS 动画，而无需编写一个单一的关键帧。 制作动画就像用文字描述一样简单 例如，你可以通过编写 xyz = "fade big up" 来创建动画，该动画可以使用 AnimXYZ 淡入淡出，按比例放大和向上移动。 AnimXYZ 还有一个小软件包，基本功能是 2.68kb，如果包含方便的实用程序，则是 11.4kb。
15 天前 / Ryan众乐
首发于前端备忘录写文章 React 下，谈谈编程范式江湖术士控制自己，少点发言，越学越觉得自己菜 57 人赞同了该文章大家经常听到 React 环境下，对 函数式，面向对象 等 编程范式 的阐述 但却很少有文章结合 React 特殊语境，对这两个范式进行详细说明，因此，写这篇文章，帮助大家形成 共同语言 首先，编程范式除了实现方式不同以外，其区别的根源在于 —— 关注点不同函数的关注点在于 —— 变化面向对象的关注点在于 —— 结构对于函数，因为结构方便于处理变化，即输入输出是天然关注点...
20 天前 / Ryan众乐
首发于豆皮前端范儿写文章【翻译】React 服务端组件豆皮范儿无豆皮不开心，无代码不起范儿！1 人赞同了该文章 Hello，豆皮粉们，我来了！顶着十二月的寒潮，诚意满满的来了！ 这回约稿又得到来自字节跳动数据平台的的“阳羡”关于 React 最新特性的文章翻译 。 本周，React 团队发布了零打包体积的 React 服务端组件 [1][Server Components），旨在用服务端驱动的心理模型实现现代 UX。这与组件的服务器端渲染（SSR）有很大的不同，可能会导致客户端 JavaScript 打包体积大大减少 。
23 天前 / 苏溪云
苏溪云所有文章关于作者GITHUB轻松掌握React Hooks底层实现原理由于最近业务较忙，2020年搞懂React原理系列文章最终篇直到现在才在业余时间抽空完成。之前在公司内部已有过一次PPT形式的分享，但经过一段时间对hooks的深度使用，对其又有了更深一些了解，故本次加上新内容并以文章形式再分享一次。 持续一年阅读React源码和总结其核心原理，慢慢也有了一些心得： 读懂源码只是第一步，弄懂其功能的代码实现方式。而再进一步是彻底搞懂其实现原理、思想，它通过什么方式实现了什么功能，带来了什么价值。
37 天前 / Ryan众乐
首发于井藏天写文章从 Context 源码实现谈 React 性能优化卡卡颂公众号：魔术师卡颂 17 人赞同了该文章学完这篇文章，你会收获： 了解 Context 的实现原理 源码层面掌握 React 组件的 render 时机，从而写出高性能的 React 组件 源码层面了解 shouldComponentUpdate、React.memo、PureComponent 等性能优化手段的实现 我会尽量将文章写的通俗易懂。但是，要完全理解文章内容，需要你掌握这些前置知识： Fiber 架构的大体工作流程 优先级与更新在 React 源码中的意义 如果你还不具备前置知识，可以先阅读 React 技术揭秘 [1]。
41 天前 / Ryan众乐
写文章漫谈 React Fiber 云音乐前端技术团队已认证的官方帐号 49 人赞同了该文章本文作者：葛星背景 React 实现了使用 Virtual DOM 来描述 UI 的方式，通过对比两棵树的差异最小化的更新 DOM，这样使得用户的代码变的傻瓜，但是同时也来带了一些问题。这个核心的问题就在于 diff 计算并非是免费的，在元素较多的情况下，整个 diff 计算的过程可能会持续很时间，造成动画丢帧或者很难响应用户的操作，造成用户体验下降。
44 天前 / 阿伟
写文章 React 高阶组件 Props 代理的一些小技巧阿伟身在高楼心在北大荒，我就这副死样～1 人赞同了该文章高阶组件的 Props 代理有一些很常见的场景： Props 比原组件多了一些属性 Props 比原组件少了一些属性给原组件的 Props 的某些属性设置了默认值那么在下面这个操作之前： 你是否会先对 props 做一些「编辑」操作呢？比如删除某些属性，赋值某些属性。 其实大部分时候可以先这样去解构你的高阶组件 Props： const {newProp1,newProp2,...rawProps} = props 如果是 ts 项目一般还可以配合： Omit 来移除掉不希望被用户传入的 prop 然后在使用的时候还可...
52 天前 / pshu
React 组件中的七种代码坏味道原文链接 https://dev.to/awnton/7-code-smells-in-react-components-5f66 译文中的我是指代原文作者，译者的话会以译者注的形式出现。 以下是我目前收集到的 React 组件中的 7 种坏味道 组件使用过多的属性组件的属性之间不兼容拷贝组件的属性到组件的状态组件的中又定义函数式组件多个布尔类型的组件状态组件中使用过多的 useStateuseEffect 中实现太多功能 组件使用过多的属性 如果一个组件有太多的属性，说明这个组件应该拆分下。较真的程序员会问，那多少个属性算多呢？嗯......看情况。
61 天前 / pingan8787
React 是一个 Facebook 开源的，用于构建用户界面的 JavaScript 库。 React 目的在于解决：构建随着时间数据不断变化的大规模应用程序。其中 React 合成事件是较为重要的知识点，阅读完本文，你将收获： 合成事件的概念和作用；合成事件与原生事件的 3 个区别；合成事件与原生事件的执行顺序；合成事件的事件池；合成事件 4 个常见问题。接下来和我一起开始学习吧~ 一、概念介绍 React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。
65 天前 / 程序员俱乐部
本文翻译自： https://dzone.com/articles/charts-with-modern-react-and-d3 本文将介绍如何利用 D3JS 和 ReactJS 来创建基础图表。 ReactJS 是一个用于制作可重用 Web 组件的前端 JavaScript 库。它的思路是（通过 React Native）将 Web 应用程序（以及移动应用程序）分解为较小的、独立的、可重用的组件。它使开发和维护中型到大型 Web 应用程序变得容易得多。 D3JS 是一个基于数据的 JavaScript 图形库。它可以帮助将数据绑定到 HTML 元素（SVG）并使用该数据操作 HTML 元素。
66 天前 / 冷星1024
编者按：本文作者郭文涛，奇舞团前端开发工程师 背景本文旨在分享，React hook 在中大型中台项目中的实践，适合熟悉 React hook 用法的同学，希望能对你有帮助。 用到的库 1. unstated-next200 bytes to never think about React state management libraries ever again. 永远不必再考虑 React 状态管理了，仅仅 200 字节的状态管理解决方案。 unstated-next 主要是利用 React.createContext 状态共享，将需要注入 Provider 的状态以及状态更新操作抽象到 hook 中，提供给 Function Component 用的一个状态管理库。ts 源码只有 40 行。