使用 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

阅读更多

以太坊概念与使用 wep3/infura 实现以太币及合约币交易流程

, , ,

前言

最近在写一个自动转账的脚本，经过了一番搜寻查阅及实战编写，总结了一些心得和见解，写出来希望能帮助到更多有需要的人。

以太币及合约币转账概念

一个以太坊账号包含三个部分，助记词（Mnemonic Phrase）、私钥（Private Key） 以及 地址 ，其中助记词与私钥是可以相互转换的。

由于私钥64位，长得太难看，没有可读性，而私钥的备份在电脑上复制起来容易，手抄下来就比较麻烦，但私钥保存在联网的电脑上毕竟不安全，有被其他人看到的风险，于是有了助记词工具，利用某种算法可以将64位私钥转换成十多个常见的英文单词，这些单词都来源于一个固定词库，根据一定算法得来。私钥与助记词之间的转换是互通的，助记词只是你的私钥的另一种外貌体现。

以太坊是一个分布式的智能合约平台，有一套 ERC-20 标准，通过此标准可以发行自己的合约币（Token），最早叫代币，后来统一翻译为通证。以太币是以太坊发行的币，主要是用来结算合约币（Token）交易费用。

阅读更多

实现树莓派(Raspberry Pi)联网发送本机IP到绑定的微信

, , ,

前言

通常我们使用树莓派做小主机时往往是不需要连接屏幕的，在开发树莓派时如果没有屏幕的话首先需要知道主机的 IP 才能访问树莓派。一般情况下我们不需要知道，直接可以通过 ssh pi@raspberrypi.local 来连接主机，但是有些设备没有装 avahi 是不支持 raspberrypi.local 域名访问的，还要回归本质老老实实使用 IP，这时候我们每次访问树莓派都要一些步骤去获取 IP，整个过程可能将变得麻烦。我看网上也有一些比如发邮件的解决方案，实际情况大家用微信的频率要远远高于邮箱，这个项目可以让树莓派联网后自动发送本机 IP 到微信，相比邮箱可以减少微信切邮箱…邮箱切微信的动作。安装本项目后可以节约我们的一些时间成本，还可以增加一些开发乐趣。

阅读更多

使用 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>

阅读更多