使用 React Context API 和 Hooks 实现全局状态管理和性能优化

介绍

我们知道 React.js 默认没有全局状态的概念，需要安装第三方库来实现，最早的是流行的是 Facebook 自己出的 Flux，因为 Flux 使用流程有点复杂，后来 Redux、MobX 就兴起了。Redux 是借鉴 Flux 开发的，它们都是单向数据流，而 MobX 则有所不同，它是基于观察者模式实现。

虽然默认没有全局状态管理，但是也可以通过 Context 特性拼凑出来一个，那为啥以前没人拼凑一个出来用呢？那是因为 React.js 以前的 Context 不好用，也不稳定，官方不建议使用，所以一般是特殊情况非得用不可的时候才使用它，但是现在时过境迁，当初那个不成熟的 Context 现在已经变得强壮有力了。

在去年二月 React.js 发布了一个大的版本更新 v16.8.0 加入了 hooks 功能，其中内置了 useReducer() hook，它是 useState() 的替代品，简单的状态可以直接使用 useState，当我们遇到复杂多层级的状态或者下个状态要依赖上个状态时使用 useReducer() 则非常方便，在配合 Context 与 useContext() 就能实现类似 Redux 库的功能。

阅读更多

使用 Phonegap + Cordova 搭建混合开发平台

,

介绍

使用 Cordova 工具，把 HTML5 打包为 IOS 及 Android 等应用，Cordova 提供了一组设备相关的 API，通过这组 API，移动应用能够用 JavaScript 访问原生的设备功能，如摄像头、麦克风等。Cordova 支持多个操作系统，例如：ios、android、brower、electron、oxs、windows。

作者所使用的环境

  1. macOS — High Sierra 10.15.5
  2. xcode — v11.5.0
  3. Android Studio — v4.0.0
  4. Node.js — v14.2.0
  5. Phonegap — v9.0.0
  6. Apache Cordova — v9.0.0

阅读更多

利用 Github Actions 自动部署 Hexo 博客

, ,

介绍

Github Actions 可以很方便实现 CI/CD 工作流，类似 Travis 的用法，来帮我们完成一些工作，比如实现自动化测试、打包、部署等操作。当我们运行 Jobs 时，它会创建一个容器 (runner)，容器支持：Ubuntu、Windows 和 MacOS 等系统，在容器中我们可以安装软件，利用安装的软件帮我们处理一些数据，然后把处理好的数据推送到某个地方。

本文将介绍利用 Github Actions 实现自动部署 hexo 到 Github Pages，在之前我们需要写完文章执行 hexo generate --deploy 来部署，当你文章比较多的时候，可能还需要等待很久，而且还可能会遇到本地安装的 Node.js 版本与 Hexo 不兼容的问题，目前我就是因为电脑的 Node.js 版本升到 v14 版本导致与 Hexo 不兼容部署不了，才来捣腾 Github Actions 功能的。利用 Github Actions 你将会没有这些烦恼。

前提

创建所需仓库

  1. 创建 blog 仓库用来存放 Hexo 项目
  2. 创建 your.github.io 仓库用来存放静态博客页面

阅读更多

在 WEB 端实现亮/暗主题跟随系统功能

,

黑暗模式介绍

在 2018～2019 年两年时间中，桌面端系统 Windows、MacOS 和 移动端系统 Android、iPhone 分别推出了 黑暗模式。在之前不管是微软的 Windows，还是苹果的 MacOS，界面都是以亮色为主，在夜间为了防止刺眼，我门通常会把屏幕亮度调暗，虽然调暗会有所改善，但是依然避免不了有点刺眼。有个别 APP 也提供的有黑暗模式，这种功能通常要在设置里手动打开，打开后白天 APP 依然是黑暗模式，虽然个别 APP 提供的有根据时间区间来控制开关黑暗模式，但是每个支持的 APP 都要设置一遍很麻烦，况且大多还不支持根据时间调节功能，即使都设置好了，返回到系统主页的时候，系统层面还会是刺眼的亮色。而目前系统提供的黑暗模式则可以让 APP 端跟随系统，这样就保证了不管是进系统界面还是进入 APP 页面都会保持统一的亮/暗色模式。

这里分别引用苹果与谷歌的介绍

苹果介绍：这是一种戏剧性的新外观，可以帮助您专注于工作，以及营造一种无干扰的环境。

谷歌介绍：

  1. 可大幅度减少耗电量（取决于设备屏幕，例如 OLED 屏幕）。
  2. 为弱视以及对强光敏感的用户提高可视性。
  3. 让所有人都可以在光线较暗的环境中更轻松地使用设备。

阅读更多

Metalness vs Specular Workflows for PBR Shading

, , , ,

前言

随着计算机硬件以及渲染上的进步，我们可以更好的从物理上去模拟灯光属性，从而诞生了新的工作流程 PBR 工作流。PBR是一种着色和渲染技术，基于物理的渲染过程，用于更精确的描述光如何与物体表面互动。

PBR的优势：

  1. 方法论和算法基于精确的计算公式，免除创作表面的猜想过程。
  2. 在任何光照环境都能表现出正确的结果。
  3. 为不同的艺术家，提供统一的工作流程。

PBR 工作流分类

PBR有两种工作流：

  1. Metal Roughness Worfkow（金属性/粗超度工作流程）
  2. Specular Glossiness Worfkow（高光/光泽度工作流程）

THREE.js 使用的是第一种工作流，名字子叫做 Metallic-Roughness，对应材质为 MeshStandardMaterial

阅读更多

使用 Three.js 的 RenderTarget 实现离屏渲染

,

RenderTarget 介绍

在渲染的时候调用 renderer.render(scene, camera, renderTarget, forceClear) 方法，render 方法有四个参数，我们平时使用只传前两个参数，第一个参数是要绘制的场景，第二个参数是指定相机，相机照射的区域会转换成 2D 绘制到屏幕，而我们今天要讲的就是使用第三个参数，不让渲染的内容直接绘制到屏幕，而是存放到 renderTarget 里。RenderTarget 是一个缓冲区，用来记录渲染后的像素，而不是直接绘制到屏幕上，因此我们可以在绘制屏幕之前做一些处理，以满足特殊的需求。

把 RenderTarget 作为贴图使用

首先创建两个场景：一个 RTScene 场景，用来渲染 RenderTarget 贴图、另一个 Scene 场景，用来渲染最终显示到屏幕上的，并调用 RTScene 场景作为贴图。

创建一个尺寸为 300×300 大小的 RenderTarget 存放 RTScene 的渲染结果

1
2
const RT_SIZE = 300;
const RenderTarget = new THREE.WebGLRenderTarget( RT_SIZE, RT_SIZE);

阅读更多

使用 redux-store-provider 简化 react 开发流程

, ,

介绍

仓库地址: https://github.com/sanonz/redux-store-provider
演示地址: https://sanonz.github.io/redux-store-provider/examples/

安装依赖

1
npm install react react-dom react-redux lodash redux-store-provider blueimp-md5 --save

创建 index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Redux Store Provider Example</title>
  <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css">
  <style>
    .content{margin-top:20px;}
  </style>
</head>
<body>
  <div id="root"></div>
</body>
</html>

阅读更多

浏览器 HTTP 并发请求规则探讨

并发请求介绍

由于端口数量和线程切换开销的考虑，浏览器不能无限量的并发请求，再者将所有请求一起发给服务器，也很可能会引发服务器的并发阈值控制而被 BAN，而另外一个控制的原因是 keep alive 技术的存在使得浏览器复用现有连接和服务器通信比创建新连接的性能要更好一些，出于客户端和服务端因素的综合考虑，因此衍生出来了并发限制。

以下为各大浏览器并发请求限制的数量（只在同一与域名下有效）

浏览器HTTP 1.1HTTP 1.0
IE 6, 724
IE 8, 966
Firefox 1366
Chrome 206?
Safari 5.1.76?
Opera 11.648?

阅读更多

JavaScript Event Loop、Micro Task、Macro Task

Event Loop

Event Loop：事件循环、Micro Task：微任务、Macro Task：宏任务

我们知道 JavaScript 是单线程语言，一心不能二用，也就是说它只能把一件事干完才能去干另一件事，但前端的一些任务是非常耗时的，比如网络请求，定时器和事件监听，如果让它们和别的任务一样，都老老实实的排队等待执行的话，执行效率会非常的低，甚至导致页面的假死。所以为了保证使用流畅，浏览器采用了 Event Loop 事件循环系统来管理，把那些耗时的任务放入 task queues 栈中，等主程序执行完再执行 task queues 中的任务，通常使用回调函数监听 task queues 中的任务状态。

在其它语言中可以迟延执行，比如 C 语言的 sleep(3) 可以迟延 3 秒执行后边的逻辑，但是在 JavaScript 中是没有这样的操作（除了 alert、confrim、prompt 和异步 xhr，官方说这些是历史遗留的错误设计😂），只能使用异步方式去模拟，模拟的实际也不是真正意义上的 sleep 效果。

阅读更多