框架与类库:React
React 组件设计-避免条件渲染
“新的” React 文档中有一个关于 “以 React 方式思考” 的很棒的部分,其中强调第一步应该始终是将用户界面分解为组件层次结构。我认为我们做得还不够,这就是为什么许多应用程序在某个点上停止了组件组合,然后继续使用它的天敌:条件渲染。
How to control a React component with the URL
"Can we make this screen shareable via the URL?"It's a common feature request. Surprisingly, it also leads to one of the most common causes of bugs in React applications.Take this searchable table. If…
React Native 在「Soul App」的实践 - 拆包与热更新
动态化是 React Native 的核心特点之一。在使用 React Native 的过程中,动态化是一个不可回避的话题。随着业务开发的快速迭代和新业务线的不断加入,子工程的体积不断增加,导致主工程的体积也随之增大。如果热更新以全量包的形式进行,会大大增加用户更新时的流量消耗,因此业务拆包势在必行。
React事件机制的源码分析和思考
在浏览器中,JavaScript是非阻塞的,事件就是一种用来通知正在发生的相关事情的机制,表示基本的用户交互以及其他浏览器内部的事情,JavaScript在接收到这个通知后才会执行相关的事件处理函数,避免阻塞主流程。不管使用什么样的前端框架来开发,与事件打交道都是不可避免的,但是前端框架可能会对浏览器原生的事件机制进行一些封装和改造,例如React就在浏览器原生事件机制的基础上,实现了一套事件机制,将浏览器原生的事件合成为React抽象的SyntheticEvent,并实现了一套模拟浏览器原生事件冒泡和事件捕获的React事件机制。
本文将分别分析原生的事件机制和React事件机制,来了解React事件机制的实现原理以及使用时的一些注意事项。
React 中的接口隔离原则
本文主要介绍 接口隔离原则 在 React 开发中的应用。
React Native在移动端落地实践
在移动互联网产品迅猛发展的今天,技术的不断创新使得企业越来越注重降低成本、提升效率。为了在有限的开发资源下迅速推出高质量、用户体验好的产品,以实现公司发展,业界催生了许多移动端跨平台解决方案。这些方案不仅简化了开发流程,还极大地提升了产品的兼容性和可维护性,确保企业能够在最短时间内,以最经济的成本,将卓越的产品体验带给广大用户。
React 的正确使用方法:ref 篇
你真的用对了 useRef 吗?在与 TypeScript 一起使用、以及撰写组件库的情况下,你的写法能够避开以下所有场景的坑吗?
How Airbnb Smoothly Upgrades React
Incrementally modernizing our frontend infrastructure to roll out the latest React features without downgrades.
Enhancing The New York Times Web Performance with React 18
How upgrading to React 18 energized The New York Times website — and how we tackled some of the challenges we faced along the way.
Balancing Old Tricks with New Feats: AI-Powered Conversion From Enzyme to React Testing Library at Slack
In the world of frontend development, one thing remains certain: change is the only constant. New frameworks emerge, and libraries can become obsolete without warning. Keeping up with the ever…
React的Fiber架构原理
React16通过对引入这Scheduler与Fiber两个架构,实现了异步渲染、优先级调度等能力,让页面加载与用户交互更加流畅。
React Native 在「Soul App」的实践
本文基于 React Native 0.72.10 版本,分享了 Soul App 在现有项目中如何引入 React Native。
Supercharge the Way You Render Large Lists in React
Rendering large lists in React can be a challenging task for developers. As the size of the list grows, the DOM (Document Object Model) tree also grows, leading to performance issues like slow…
React 中 Form 的最佳实践
作者:郜克帅原文:https://dev.to/ajones_codes/a-better-guide-to-
React hooks原理浅谈
React作为前端工作中非常重要的生产工具,阅读它的源码,对编码与设计能力提升很有帮助。
浅析 5 种 React 组件设计模式
作为一名 React 开发者,你可能会面临下面几个问题:
如何构建一个高复用度性的组件,使其适应不同的业务场景?
如何构建一个具有简单 API的组件,使其易于使用?
如何构建一个在 UI 和功能方面具有可扩展性的组件?