12 小时前 / 九彩拼盘
大家好，我是 ConardLi，最近网上掀起了一波吐槽 React 的热潮，不知道你做何感想呢？ 亲爱的 React ，我们在一起快 10 年了，我们一起走过了很长一段路，但事情逐渐变得有点失控了，我们需要谈谈。 对你一见钟情当我最开始和 JavaScript 相遇时，我并不是一开始就喜欢这个语言。在你出现之前，我对 jQuery、Backbone.js 和 Angular.js 有过很长的学习经历。我知道我可以从这些 JavaScript 框架中得到些什么：更好的 UI、更高的生产力和更流畅的开发人员体验。但也有不得不不断改变我思考代码的方式来匹配框架的思维方式所带来的挫败感。
6 天前 / 九彩拼盘
喜欢就关注我们吧 大家好！截至目前为止，React 已经为全球近千万网站的用户界面提供了支持。 本文将重点介绍一些非常有用的组件库。我们根据 Github 星级和使用情况、Stackoverflow 上的支持社区而精心选择了这些库。 在启动你的下一个 React 项目之前，请一定要了解一下这 8 个 React 组件库。 1. React Joyride 为 app 创建精彩的漫游功能！向新用户展示 app 或解释新特性的功能。使用 react-floater 进行定位和样式设计。并且你也可以使用自己的组件。官方地址：https://react-joyride.com/ 2. React Select 为 React.js 提供选择下拉组件。
9 天前 / 冷星1024
大厂技术高级前端Node 进阶 点击上方程序员成长指北，关注公众号 回复 1，加入高级 Node 交流群 译者：@PP 旭 译文：https://zhuanlan.zhihu.com/p/541391922 作者：@frontendmastery 原文：https://frontendmastery.com/posts/the-new-wave-of-react-state-management/ 了解状态管理库需要解决的核心问题。以及大量涌现的现代库是如何用新的方式解决这些问题。 随着 React 应用程序的规模和复杂性的不断增长，如何管理可共享的全局状态已经成为一个挑战。通常建议是仅在真正需要时才引入全局状态管理方案。
22 天前 / 前端De早读课
前言 Hi，React Query 系列文 Part 3 来了。今日前端早读课文章由 @Yuri 翻译分享。 正文从这开始～～ 声明：在任何的应用里，优化渲染的部分是属于进阶的概念。React Query 在原生上已经有非常好的优化和预设行为，所以不需要再进一步地优化。许多人会放不少心思在 “不需要的重复渲染” 的主题上，这也是我决定要整理这篇文章的原因。不过我想重申一次，在大部分的应用中，优化渲染或许并没有你想像中的兹事体大。重复渲染是件好事。他会让你的应用总是在最新的状态。相对于 “缺少应该要有的渲染”，我更加可以接受 “不必要的重复渲染”。
28 天前 / 九彩拼盘
上个月中，React 团队发了一篇文章 React Labs: What We've Been Working On – June 2022 讲了一下最近他们在做的事情，社区没有看到中文翻译，这里简单解读下原文，我发现如果不常浸泡在技术英文的语境里，有些句子还挺难懂的。 原文链接： https://reactjs.org/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.html 2022 年 6 月 15 日，作者：Andrew Clark、Dan Abramov、Jan Kassens、Joseph Savona、Josh Story、Lauren Tan、Luna Ruan、Mengdi Chen、Rick Hanlon、Robert Zhang、Sathya Gunasekaran、Sebastian Markbge 和 黄...
36 天前 / Ryan众乐
大家好，我是 ssh。今天给大家介绍一个新的框架 Fresh，由 Deno 作者出品，在最近发布了 1.0 的正式版本，宣布支持了生产环境，并且在 Github 上热度也比较高，现在是时候给大家详细地介绍一下这个方案了。接下来会从框架定位、上手体验、优劣势评估和源码实现这几个方面来给大家深入解读 Fresh 框架。 框架定位首先，从定位上来看，Fresh 属于 Web 全栈开发框架。是不是对于这个词非常眼熟呢？相信你已经想到了，像现在大名鼎鼎的 Next.js 以及新出的 Remix 都是走的这个路线。
37 天前 / 冷星1024
大家好，我卡颂。 React18 进入大家视野已经有一段时间了，不知道各位有没有尝试「并发特性」呢？ 当启用「并发特性」后，React 会从「同步更新」变为「异步、带优先级、可中断的更新」。 这也为编写单元测试带来了一些难度。 本文来聊聊 React 团队如何测试并发特性。 遇到的困境主要有两个问题需要面对。 1. 如何表达渲染结果？React 可以对接不同宿主环境的渲染器，大家最熟悉的渲染器想必是 ReactDOM，用于对接「浏览器」与「Node 环境」（SSR）。 对于一些场景，可以用 ReactDOM 的输出结果做测试。
44 天前 / cxc_xinconan
React 是基于 vdom 的前端框架，组件 render 产生 vdom，然后渲染器把 vdom 渲染出来。 state 更新的时候，组件会重新 render，产生新的 vdom，在浏览器平台下，为了减少 dom 的创建，React 会对两次的 render 结果做 diff，尽量复用 dom，提高性能。 diff 算法是前端框架中比较复杂的部分，代码比较多，但今天我们不上代码，只看图来理解它。 首先，我们先过一下 react 的 fiber 架构： Fiber 架构 React 是通过 jsx 描述页面结构的： functionProfile(){ return {[user.firstName,user.lastName].join("")} } 经过 babel 等的编译会变成 render function...
54 天前 / 冷星1024
大家好，我是 ConardLi。 React.js、Vue.js 这些现代的前端框架默认已经对安全做了非常多的考虑，但是这仍然不能阻碍我们写出一些安全漏洞 ......因为框架永远不能完全限制我们编程的灵活性，只要有一定的灵活性存在就意味着有安全风险。 下面我就带大家一起来看一下，为了保证我们 React 应用的安全性，有哪些值得遵循的最佳实践。 dangerouslySetInnerHTMLReact 会对默认的数据绑定 ({})进行自动转义来防止 XSS 攻击，所有数据都会认为是 textContent： 但是为了保障开发的灵活性，它也给我们提供了一些直接渲染 HTML 的方法...
68 天前 / 冷星1024
前言大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。 背景你是否有在开发中遇到过这样的需求：需要实时获取某一个容器的宽度或者长度，也就是容器的 size，而 size 是根据视口的变化而实时改变的。这要是放在以前，我肯定会这么做： 1、监听视口的变化 2、在变化回调中去获取容器的宽度或高度这样就能实时得到容器的 size 了，那要怎么去实现呢？ ahooks 的 useSizeahooks 是一个很出色的库，他的 useSize 就是用来实时获取 size 的，具体用法可以看文档，以下就是 但是我在使用这个 hook 时...
74 天前 / 冷星1024
概述 React 18 将包括对 其服务器端渲染 (SSR) 性能的架构做了改进。这些改进带来了实质性的效果，是几年来其团队工作的结晶。大多数的改进点都是在幕后进行的，但您需要了解一些选择加入机制，尤其是您在不适用框架的情况下。 主要的新 API 是 pipeToNoWritable, 您可以在 "升级到服务器上的 React18" 这篇文章中阅读了解。在最终的正式版本中，我们也将计划写更多关于它的细节。如何在服务端使用 React18 https://github.com/reactwg/react-18/discussions/22 现有的 API 是 ，此文主要是对新架构、其设计及背后要解决的问题进行阐述。
77 天前 / 九彩拼盘
大家好，我是零一，今天给大家带来一份 React 所有 Hooks 的使用文章，也包括 React18 新增的 Hooks 奥！下面列了一张思维导图，根据功能对这些 Hooks 做了一个归类，本文也会一一讲解每个 Hook 的详细使用、注意事项、使用场景！ React Hooks.png 一 前言 React hooks 是 react16.8 以后，react 新增的钩子 API，目的是增加代码的可复用性，逻辑性，弥补无状态组件没有生命周期，没有数据管理状态 state 的缺陷。本章节笔者将介绍目前 React 提供的所有 hooks ，介绍其功能类型和基本使用方法。
86 天前 / 冷星1024
大家好，我卡颂。 一些同学喜欢在 useEffect 中请求初始数据，类似这样： useEffect(()=>{ fetch(xxx).then(data=>setState(data.json())) },[]) 但 React18 并不推荐这种方式。 这么写有什么问题？如果不推荐这种方式，那么推荐的方式是什么呢？ 本文来看看 Dan 在 reddit[1]是如何回答上述问题的。 这是一个普遍的问题除了 React 外，大部分以「组件」形式组织的前端框架，都有如下类似的 API： effect didMount/didUpdate 如果有「初始化时请求数据」的需求，这类框架都会选择在上述回调函数内执行请求操作，并在数据返回后更新状态。
117 天前 / 江米小枣tonylua
原文：https://flaviocopes.com/react-useeffect-two-times/ 在 2022 年 3 月发布的 React 18 的发布公告中，数量可观的新特性扑面而来。而对 useEffect() 的默认行为的改变，可能就此被淹没了。 如果你的应用在更新到 React 18 之后行为迥异，或许正是因为 useEffect() 默认变为被运行 2 次了。 虽然这种情况只发生在 development mode 中，但无疑每位开发者都会遇到。 另一个限制条件是 只在 strict mode 发生，但这同样是用 create-react-app 或 Next.js 所构建应用的默认选项。
120 天前 / 浪客书心
关注“脚本之家”，与百万开发者在一起来源 | 前端印象（ID：zero2one01）已获得原公众号的授权转载大家好，我是零一，react18 已经出来一段时间了，create-react-app 默认安装的 React 版本也已经是 18+，不知道有没有小伙伴发现自己有点看不懂 React 了？ import{useEffect,useState}from'react' functionApp(){ const[data,setData]=useState(0) useEffect(()=>{ setData(preData=>preData+1) },[]) return( {data} ) } 看一下这段简单的代码，页面最终展示的数字是几？ 是 1 这样吗？我觉得应该也是这样，可事实就是在 React18 里，这并不是预期效果...