共找到12篇关于主题:react 的文章

自定义react render方法

2021-08-283分钟阅读

背景 以前,写过一个自定义 react render 的仓库 ,核心通过 react-reconciler 实现 ract 中生命周期来实现自定渲染。现 react hooks 已经大面积使用,是否可以继续使用上述方法实现自定义渲染? 如下是个人尝试 初始工程 react-reconciler 各版本之前不兼容, 当前例子为 0.26.2。 也是因为这个原因, 直接升级 react 版本可能会导致错误 将旧 render…

algebraic effects 是什么

2020-11-102分钟阅读

前言 react hooks 底层机制参考了 algebraic effects,但在网上搜索这个词汇,大多都是偏学术的,我不擅长谈论学术,只能根据个人经验对 algebraic effects 做一些相关思考 什么是algebraic effects 简单来说, 其实就是 的一种变体。 algebraic effects 主要解决2个问题 抛错后无法继续执行 上述代码若入参缺失, 会直接停止执行, 导致后续 方法不被执行。algebraic effects…

react hooks 基础用法

2020-09-063分钟阅读

背景 本文主要介绍一下 react hooks 在开发中基础用法。内容按照方法归纳,使用方式可以想见官方文档,主要以 技巧为主 技巧 所有 hooks 严禁动态添加 react hook 实现原理类似于事件注册机制, 在组件首次初始化时会确定顺序,不可改动。 hooks 依赖中来自组件外或 setState 可以不写入依赖 在组件中的 setState 在 react 内部保证了 immutable hooks useState 与 class 组件中 state…

react statement management library比较

2020-06-193分钟阅读

背景 react 我最喜欢使用什么状态管理库?这里是我对现有流行开源库的理解和比较 setState 对新人最友好,最简单的。在 16.8 之后 出现解决了 react 组件模板过多的问题,大幅减少 了代码量,但是在复杂组件中与 class 模式相比代码相对难以维护 优点 简单易用 不依靠 react 版本 适合 ui 组件开发(0 外部依赖) 缺点 代码冗余且丑陋 state 和 prop 逻辑冲突 state 入门容易,用好很难 context…

为什么我选择react作为我第一优先前端框架

2020-01-293分钟阅读

过年在家,闲来无事,总结一下我为什么使用 react 的原因。 背景 起初, 使用 react 的原因很简单:公司项目需要迭代, 原有技术(jquery)已无法满足需求, 故需要切换为更现代的框架技术(angular, react, vue, knockout)。 由于小公司,没有能力做不同框架之间的调研,只能通过查询科技新闻(2015),选择了 react。现在回想起来, 盲选的结果不错。 现在个人认为: 重大核心技术选择, 需要以大厂、开源、Do One Thing…

react生态圈介绍(内部演讲)

2019-09-181分钟阅读

内部演讲 ppt: https://slides.com/zhangqing/react-introduce/live

React 也是一种 LLVM UI 框架(翻译)

2019-03-182分钟阅读

LLVM是一组模块化和重用编译和工具链技术, LLVM 使得开发中能够简单的创造编程语言。 当我们首次见到React, 它介绍他是。当你深入了解其内部,React同样也可以被称为LLVM用来构建UI。它让开发中能够简单的构建声明式UI。 如果你问为什么你要使用声明式UI, 因为他更容易阅读,编写, 管理和测试,以及深度测试(100%单元测试), 手动管理更新UI是笨重和容易出错的, 但是类似于React的工具能够做的更好。 React一开始用于web…

react ssr 服务器端渲染 优点整理

2019-01-283分钟阅读

背景 接触 react 差不多快 3 年了, 一直都是用的客户端渲染, 最新在做个人博客网站,所以对 react 服务端渲染进行了初步调研, 总结一下该何时使用 ssr SEO: 搜索引擎优化 数据预处理页面: 例如 个人博客, 门户首页, 产品宣传页面, 高访问量页面 SEO 众所周知, react 项目由纯 javascript…

react-virtualized

2019-01-093分钟阅读

前言 本文主要介绍 , 使用版本 前端开发会遇到一种棘手的情况: 渲染大量数据。首先, 这种情况要分析是否可以避免, 大致有如下的方式: 服务端分页 减少一次返回的数据,前端可以使用列表或者表格的形式展现, 表格展示一般使用分页, 列表的话, 监听 onscroll 事件, 当快触底时, 加载更多数据 前端假分页 获取的数据也许是第三方的数据,没有提供切片相关的接口, 只能前端分页。适用方式和服务端很类似,表格和列表均可适用(列表使用有点会有点奇怪) 图表渲染 svg…

create-react-app 源代码简析(3)

2019-01-011分钟阅读

最后, 查看 这里定义了整个CRA需要用到的路径 这里面情况很特殊, CRA 存在一种eject的情况, 会把所有配置暴露出来, 让用户自己修改。故我会忽略eject的情况, 代码会变成如下: 不考虑 eject 后的path代码

create-react-app 源代码简析(2)

2018-12-3111分钟阅读

webpack配置解析 承接上篇create-react-app 源代码简析(1) 是整个 CRA 的核心。这一版本 CRA 将开发和生产的 webpack.config 合 2 为 1, 虽然精简了代码量, 但使得阅读难度大大提升 变量设置, 组件引用 CRA 中 webpack.config.js 配置说明说的很完善, 我只会添加一些个人见解和简单翻译 这篇webpack配置可以算是webpack的经典配置, 包含大量的插件使用, 非常适合收藏

create-react-app 源代码简析(1)

2018-12-3011分钟阅读

前言 简称为 , 之后均用 表示 是个多包仓库, 我 fork 了一份(地址), 以便追溯。 核心包: 简析版本为, 发布日期为 2018-11-01 由于我不熟悉, 故相关部分会会不准确,请见谅! 是功能强大的自动化前端构建工具, 但是配置复杂多变。将配置隐藏起来,适合新入门的开发者。 另外一种使用场景为需要同时在多个项目中开发, 又想保证不同项目配置统一, 是一种不错的选择。为了能在工作中用好, 所以需要深入了解去实现源码,故作此笔记。 项目目录介绍 整个 CRA…