背景 以前，写过一个自定义 react render 的仓库 ，核心通过 react-reconciler 实现 ract 中生命周期来实现自定渲染。现 react hooks 已经大面积使用，是否可以继续使用上述方法实现自定义渲染？ 如下是个人尝试 初始工程 react-reconciler 各版本之前不兼容， 当前例子为 0.26.2。 也是因为这个原因， 直接升级 react 版本可能会导致错误 将旧 render…
前言 react hooks 底层机制参考了 algebraic effects，但在网上搜索这个词汇，大多都是偏学术的，我不擅长谈论学术，只能根据个人经验对 algebraic effects 做一些相关思考 什么是algebraic effects 简单来说， 其实就是 的一种变体。 algebraic effects 主要解决2个问题 抛错后无法继续执行 上述代码若入参缺失， 会直接停止执行， 导致后续 方法不被执行。algebraic effects…
背景 本文主要介绍一下 react hooks 在开发中基础用法。内容按照方法归纳，使用方式可以想见官方文档，主要以 技巧为主 技巧 所有 hooks 严禁动态添加 react hook 实现原理类似于事件注册机制, 在组件首次初始化时会确定顺序，不可改动。 hooks 依赖中来自组件外或 setState 可以不写入依赖 在组件中的 setState 在 react 内部保证了 immutable hooks useState 与 class 组件中 state…
背景 react 我最喜欢使用什么状态管理库？这里是我对现有流行开源库的理解和比较 setState 对新人最友好,最简单的。在 16.8 之后 出现解决了 react 组件模板过多的问题，大幅减少 了代码量，但是在复杂组件中与 class 模式相比代码相对难以维护 优点 简单易用 不依靠 react 版本 适合 ui 组件开发(0 外部依赖) 缺点 代码冗余且丑陋 state 和 prop 逻辑冲突 state 入门容易，用好很难 context…
过年在家，闲来无事，总结一下我为什么使用 react 的原因。 背景 起初, 使用 react 的原因很简单：公司项目需要迭代, 原有技术(jquery)已无法满足需求, 故需要切换为更现代的框架技术(angular, react, vue, knockout)。 由于小公司，没有能力做不同框架之间的调研，只能通过查询科技新闻(2015)，选择了 react。现在回想起来, 盲选的结果不错。 现在个人认为: 重大核心技术选择, 需要以大厂、开源、Do One Thing…
LLVM是一组模块化和重用编译和工具链技术, LLVM 使得开发中能够简单的创造编程语言。 当我们首次见到React, 它介绍他是。当你深入了解其内部,React同样也可以被称为LLVM用来构建UI。它让开发中能够简单的构建声明式UI。 如果你问为什么你要使用声明式UI, 因为他更容易阅读,编写, 管理和测试，以及深度测试(100%单元测试), 手动管理更新UI是笨重和容易出错的, 但是类似于React的工具能够做的更好。 React一开始用于web…
背景 接触 react 差不多快 3 年了, 一直都是用的客户端渲染, 最新在做个人博客网站,所以对 react 服务端渲染进行了初步调研, 总结一下该何时使用 ssr SEO: 搜索引擎优化 数据预处理页面: 例如 个人博客, 门户首页, 产品宣传页面, 高访问量页面 SEO 众所周知, react 项目由纯 javascript…
前言 本文主要介绍 , 使用版本 前端开发会遇到一种棘手的情况: 渲染大量数据。首先, 这种情况要分析是否可以避免, 大致有如下的方式: 服务端分页 减少一次返回的数据，前端可以使用列表或者表格的形式展现, 表格展示一般使用分页, 列表的话, 监听 onscroll 事件, 当快触底时, 加载更多数据 前端假分页 获取的数据也许是第三方的数据,没有提供切片相关的接口, 只能前端分页。适用方式和服务端很类似,表格和列表均可适用(列表使用有点会有点奇怪) 图表渲染 svg…
最后, 查看 这里定义了整个CRA需要用到的路径 这里面情况很特殊, CRA 存在一种eject的情况, 会把所有配置暴露出来, 让用户自己修改。故我会忽略eject的情况, 代码会变成如下： 不考虑 eject 后的path代码
webpack配置解析 承接上篇create-react-app 源代码简析(1) 是整个 CRA 的核心。这一版本 CRA 将开发和生产的 webpack.config 合 2 为 1, 虽然精简了代码量, 但使得阅读难度大大提升 变量设置, 组件引用 CRA 中 webpack.config.js 配置说明说的很完善, 我只会添加一些个人见解和简单翻译 这篇webpack配置可以算是webpack的经典配置, 包含大量的插件使用, 非常适合收藏
前言 简称为 , 之后均用 表示 是个多包仓库, 我 fork 了一份(地址), 以便追溯。 核心包: 简析版本为, 发布日期为 2018-11-01 由于我不熟悉, 故相关部分会会不准确,请见谅！ 是功能强大的自动化前端构建工具, 但是配置复杂多变。将配置隐藏起来,适合新入门的开发者。 另外一种使用场景为需要同时在多个项目中开发, 又想保证不同项目配置统一, 是一种不错的选择。为了能在工作中用好, 所以需要深入了解去实现源码,故作此笔记。 项目目录介绍 整个 CRA…