6 小时前 / 高飞
这是我们团队杨劲松、杨杰强同学做的内部分享，文章从声明式渲染的基本原理开始，逐步深入讲解 React 渲染与节点挂载的基本流程与源码，适合初中阶同学阅读。PS：我们是字节游戏中台前端团队，日常学习氛围浓厚，目前还有大量 HC，欢迎自荐。 引言相信大家对 React 都已经非常熟悉了，像 React，Vue 这样的现代前端框架已经是我们日常开发离不开的工具了，这篇文章主要是从源码的角度剖析 React 的核心渲染原理。
5 天前 / 王键创生
阅读原文，体验更佳！ 周刊收集包括前端（但不限于前端）的文章、新闻、开源项目、工具等等，每周一更新。 NewsESLint 8 支持 ES2022。 Class public instance fields and private instance fieldsClass public static fields and private static fieldsClass private instance methods and accessorsClass private static methods and accessorsRegExp match indicesTop-level awaithttps://eslint.org/blog/2021/10/eslint-v8.0.0-released Sanitizer API 把 html 字符串不加处理直接渲染到页面上是很危险的行为，一不小心就会触发 XSS 问题...
5 天前 / 冷星1024
大厂技术高级前端Node 进阶 点击上方程序员成长指北，关注公众号 回复 1，加入高级 Node 交流群 前言 相信很多人都很头疼 Docker 的部署，我自己也是。 最近发现一个很有意思的现象：一个人想学某样技术的时候，当学会了之后，但是这时出现了一个问题需要学习另一门技术时，无论这个人前面学得多么刻苦，用功，到这一步有 99% 的概率都会放弃。我愿称这种现象为 “学习窗口”。 写一个网站、学会 Vue.js 是很多人的“学习窗口”，只要离开了这个“学习窗口”，他们就不想学了：我都学这么多了，草，怎么最后还要学部署啊。
12 天前 / Ryan众乐
写文章登录 Relyzer —— 一个 React FC 的运行分析工具黑猫JavaScript 话题下的优秀答主 158 人赞同了该文章 React Hooks 带来了很多好处，同时也引入了一些困扰。常见的问题有： 为什么我的 useEffect 比我预期执行多得多？为什么 useCallback / useMemo 的返回值总是发生变化？ 于是开发了这样的一个工具，配合 React Devtool 使用，在代码块中可视化地展示出 React 函数组件的属性及内部变量的变化情况，可以方便地定位到哪些值总是在发生变化。 截图是基于一个第三方的 TodoMVC，集成上了 Relyzer 工具。
14 天前 / 王键创生
阅读原文，体验更佳！ 1. 推荐 freeCodeCamp 本周 Star 增长：1700+，累计：333k+ GitHub 上排名第一的开源项目。 FreeCodeCamp 是一个自由开源的学习编程的社区，致力于帮助人们利用零散时间学习编程。它的使命是 Learn to code and help nonprofits（学习编程，去帮助那些非盈利组织）。FCC 涵盖 HTML5、CSS、React、JavaScript、Database 等课程，游戏化程度非常高，学员可以通过线上聊天室和线下社区活动（Coffee and Code）相互帮助。
17 天前 / 冷星1024
准备知识熟悉 React 熟悉 TypeScript ( 参考书籍：2ality's guide[1], 初学者建议阅读：chibicode's tutorial[2]） 熟读 React 官方文档TS 部分 [3] 熟读 TypeScript playgroundReact 部分 [4] 本文档参考 TypeScript 最新版本 如何引入 Reactimport*asReactfrom'react' import*asReactDOMfrom'react-dom' 这种引用方式被证明 [5]是最可靠的一种方式，推荐使用。 而另外一种引用方式： importReactfrom'react' importReactDOMfrom'react-dom' 需要添加额外的配置："allowSyntheticDefaultImports": true 函数式组件的声明方式声明的几种方式 第一种：也是...
29 天前 / 太空编程
在开发过程中，我们经常会遇到使用背景的地方，比如登录页面，用户信息页面，封面图…… 寻找契合业务主题的背景十分耗费精力，总觉得做的背景不合适，如果直接用图片呢，逻辑是比较简单，但寻找到一张契合业务主题的图片也不是那么容易，所以想到用符号生成幕布一样的背景。 从这个出发点有了这个组件，滚动的图片墙可能这个需求比较常见，用 SmartBackground 可以很快速的实现。 安装完，以下是使用案例介绍 npm i smart-background -S 默认以圆点作为符号 import React from 'react';import Background from 'smart-background';import { FaLaugh } fro...
33 天前 / 冷星1024
1.浏览器渲染 为了更好的理解 React Fiber, 我们先简单了解下渲染器进程的内部工作原理。 参考资料： 从内部了解现代浏览器 (3)[1]渲染树构建、布局及绘制 [2]1.1 渲染帧帧 (frame): 动画过程中，每一幅静止的画面叫做帧。 帧率 (frame per second): 即每秒钟播放的静止画面的数量。 帧时长 (frame running time): 每一幅静止的画面的停留时间。 丢帧 (dropped frame): 当某一帧时长高于平均帧时长。 一般来说浏览器刷新率在 60Hz, 渲染一帧时长必须控制在 16.67ms (1s / 60 = 16.67ms)。
40 天前 / gisbook
（本文原文链接在此How to Build a Simple Geoprocessing App with GeoTrellis and React） 作者：凯利·英尼斯 (Kelly Innes) 2018 年 2 月 13 日。 翻译：Jade Wang 这篇博文是使用 GeoTrellis、Akka HTTP 和 React 创建 GIS 处理的网页应用程序的指南。 这是用 “Azavea 10% 的研究时间”（Azavea’s 10% research time）完成的研究项目。该研究项目旨在了解 GeoTrellis 以构建地理处理服务，Model My Watershed geoprocessing service 地理处理服务...
41 天前 / 开发者头条
大家好，我是周刊菌。 加入「码农周刊 VIP 会员」，一起牛起来！ 以下内容选自「码农周刊 VIP 会员」圈子，每日更新，精彩不断。码农周刊是什么？码农周刊是一份专为广大程序员、编程爱好者们打造的 IT 技术周刊。每周发送。 2013 年 9 月 12 日创刊至今，已发送 300 多期，订阅用户超 20 万。 专业、简单、有用，是我们一直坚持的办刊宗旨。一路走来，我们见证了不少订阅用户从编程新手进阶成了高级程序员、架构师、CTO…… 2020 年 4 月，为了给用户提供更优质的服务，我们推出了「码农周刊 VIP 会员」服务。
47 天前 / Ryan众乐
首发于前端备忘录写文章 React Hooks 缓存与动画江湖术士DAYZ is coming50 人赞同了该文章 Hooks 与 Component 写法最大的区别，就是控制的颗粒度从组件细化到了节点和状态 比如，我可以控制某个数据的变化： const sFilterd = useMemo(()=> state !==0 ,[state])我还可以控制节点的变化（因为节点 JSX.Element 是函数调用） const el = useMemo(()=> {sFilterd},[sFilterd])如果 el 依赖 state 而不是 依赖 sFiltered，那么 el 的变化就会多出 state === 0 的那几次 这实际上是状态和节点的调度控制能力 调度是啥，详见之前的文章，reducer 就是调度...
49 天前 / Ryan众乐
写文章 2021 年 TypeScript + React 工程化指南 Henry 不会做一手好菜的全栈前端不是好产品经理 86 人赞同了该文章本文同样适合前端初学者。1. 前言大约在四年前，我先后写了《再见，babel-preset-2015》以及《为什么我们要做三份 Webpack 配置文件》，在知乎上受到不错的反响，虽然已经过去很多年，但是让我意外的是至今仍有很多读者在阅读和点赞。 前端技术栈在这些年间不断演进，已经发生了很大的变化，但是从零开始打造一个项目仍然是较为困难的事情，网上的文章实在太多太零散，有些几个月前的文章现在看来都会都会过时。
49 天前 / u587740
2.CDN(function() {var scp = document.createElement('script');// 加载最新的 mdebug 版本 scp.src = 'https://unpkg.com/mdebug@latest/dist/index.js';scp.async = true;scp.charset = 'utf-8';// 加载成功并初始化 scp.onload = function() {mdebug.init();};// 加载状态切换回调 scp.onreadystate = function() {};// 加载失败回调 scp.onerror = function() {};document.getElementsByTagName('head')[0].appendChild(scp);})();
49 天前 / u587740
2.CDN(function() {var scp = document.createElement('script');// 加载最新的 mdebug 版本 scp.src = 'https://unpkg.com/mdebug@latest/dist/index.js';scp.async = true;scp.charset = 'utf-8';// 加载成功并初始化 scp.onload = function() {mdebug.init();};// 加载状态切换回调 scp.onreadystate = function() {};// 加载失败回调 scp.onerror = function() {};document.getElementsByTagName('head')[0].appendChild(scp);})();
53 天前 / 九彩拼盘
首发于百度工程效能部 FE 团队写文章在 React 中使用 Context 的两点注意事项张立理前端开发话题下的优秀答主 292 人赞同了该文章 Context 是个好东西，先不论代数效应之类纯理论的概念，能在组件树上无视深度地透传状态确实能给开发带来很大的便利。 但如果 Context 的使用上不注意一些细节，使用不当，对应用的性能是有可能造成灾难性影响的。近期在做一个产品的性能优化的时候，总结出来微不足道的两点“常识”。