Vue和React数据流思考
本文我们渐入佳境，在熟练了vue和react这俩主力框架之后，尝试着探讨一下两者在数据流方面的异同。
基础概念解释
vue的状态，是双向绑定， 也就是双向数据流。而react是典型的单向数据流。所谓的双向数据流，就是父组件能够变更给到子组件的状态，同时子组件也能够直接修改从父组件接收的状态。而单向数据流，则是只能父组件修改，子组件无权变更。就像一个瀑布，只会从上往下，不存在自下向上。
优劣对比鄙人用vue开发了几个大的项目，react也用了不少，个人觉得这就是两者最大的区别，也是我为什么更喜欢react的缘由。双向数据绑定我觉得纯属多此一举，开发过程中尽量少用。一般的项目两者没啥差别但是，如果是一些比较复杂的项目（这里的复杂主要指的是某些状态涉及诸多的组件），开发到最后就会发现，状态追踪调试变得极其的困难。因为修改状态的入口太多，导致你很难查出到底是哪个组件更改了目标状态。相比之下，react的单向数据流则非常的清晰，打个断点即可。
同vue的差异
react是一个库，vue称之为框架。vue实际上为我们提供了一整套的解决方案，而react库专注于html和js之间打通的关系。什 ...
React系列：第四回(诡异的点)
本文重点罗列一些react中，令人诡异的点setState改变值后，打印出来的，居然还是旧的值看如下代码：
const AboutComponent = () => {
const [count, setcount] = useState(0)
const handleClick = (type) => {
setcount(count + 1)
console.log('count>>', count)
}
return (
<div>
<span>{count}</span>
<Button onClick={handleClick}>React点击</Button>
</div>
)
}
点击按钮变更count， 打印出来的count的值: count>> 0。写了两三年vue的我表示：what？setState到底是同步的，还是异步的，开始一波调研
通过setState ...
Https的加密过程
本文介绍目下的https协议，是如何进行加密的很久很久以前，数据都是明文传输的，这样的方式毫无安全可见。中间人可以随意获取甚至篡改数据，那现在的什么网上购物、支付等几无可能。后来就出现了https，在http的基础之上，加了一个安全套接层，它的作用，就是用来对数据进行加密和解密。熟悉osi七层模型的同学都很清楚，http是应用层协议，下面还有传输层的tcp和网络层ip。加密解密的操作，可以看作介于应用层和传输层之间，也就是货物上路之前的和卸货时的时间点。
对称加密和非对称加密形象的比喻，对称加密就是一把钥匙，既能加密，也能解密。而非对称加密则是，加密一把钥匙，解密一把钥匙。
加密策略的演进历程
纯对称加密发送请求前，浏览器会给s端发送加密相关的东西： 加密套件和加密列表.前者就是加密的具体方法，后者指的是浏览器能够支持的哪些方法。s端收到东西之后也会给c端返回数据。这里可以浅显的理解为使用的加密方式，也就是对称加密的钥匙。这样，浏览器之后发送的所有请求，都会用这把钥匙进行加密，到了服务器端，再用这把钥匙进行解密。
缺点: 那把钥匙，在传输过程中，也是明文的，因此问题并未解决。
对 ...
React系列：第三回(状态管理)
本文见到那介绍下React中的状态管理适配react的状态库很多，本文涉及三个： Zustand、Redux 和 Context
Zustand// npm install zustand
// 2. 创建store
import { create } from 'zustand';
const useCounterStore = create((set) => ({
count: 0,
// 同步更新
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
// 异步更新（内置支持，无需中间件）
incrementAsync: () => {
return new Promise((resolve) => {
setTimeout(() => { ...
React系列：第二回(React-router)
本文简单介绍下react-router的相关内容
类似于vue-router，安装react-router配置react项目的路由。先安装一下：
cnpm install react-router-dom
简易版本import { createBrowserRouter, RouterProvider } from 'react-router-dom'
const router = createBrowserRouter([
{
path: '/login',
element: <div>我是登陆页面</div>
},
{
path: '/index',
element: <div>我是内容页面</div>
}
])
...
...
// index入口文件配置
<RouterProvider router={router}></RouterProvider>
上面代码中，我们定义了两个路由的匹配规则，效果显示
通用路由 ...
代理神器-whistle
本文简单备注一下，whistle工具的使用在网络的系列文章中，我们有聊到过代理，何为“代理”？说白了就是双方中间多了个“代理”层，充当中间人的角色。但凡爬过梯子或者去网吧打过游戏的，想必都不会陌生。爬梯子的使用场景是： 上个“油管”，卧槽，咋看个视频都不让呢？架哥梯子吧。首先为什么页面打不开看不了？ 油管部署在外围，大陆网跟外界网络中间隔了一层GFW。由于某些政策原因，该站点被上黑名单。当我们的请求到达网络交界处“GFW”时，直接被咔嚓一刀，造成的看不了。为什么架个梯子就可以？当我们打开梯子软件之后，我们访问油管的请求会被梯子软件接管，他会带着这个请求，首先访问自己部署在外围的机器，然后将油管地址给到外围机器，让那台机器代替你的机器，给油管发请求。拿到内容后，返回给你的浏览器。这一波操作下来，就可以访问了。为什么可以了？因为绕过了中间那个审查隔离层。
代理的工具多如牛毛，那么本文的主角whistle，有什么亮眼的功能呢？
拦截请求到目标地址
https://www.baidu.com https://www.zhihu.com
The Life-And-Death Landscape Woven By Sound And Image Japanese Views On Life And Death Through Anime And Literature
The Life-And-Death Landscape Woven By Sound And Image: Japanese Views On Life And Death Through Anime And LiteratureIn the cultural context of Japan, life and death have never been absolute boundaries of either-or, but rather intertwined, mutually reflective symbiotic existences. The soundtracks composed by Yasuharu Takanashi for Shiki and Hell Girl, with their melodies interweaving pathos and ethereality, establish the emotional foundation for the life-and-death narratives of these two anime se ...
canvas和svg渲染及其他
本文介绍下canvas和svg相关内容渲染层面在目前前端2d层面，图形化开发有两种方案：canvas和svg。借助它们都能帮我们绘制各种图形，但是两者底层原理完全不同。canvas本质就是批量绘制像素点，从dom结构看，他就是一个完整的dom节点，不管你在上面绘制了多少path，最终就是一个dom节点canvas。但是用svg则完全不同，svg绘制的path本身，就是一个个的dom节点。所以如果是海量数据，很显然，使用canvas批量绘制像素点的效率，远高于创建海量的dom节点。但是svg也有优点，因为是一个个的dom，所以支持原生事件（click/hover）、CSS 样式控制，交互开发成本低，且矢量图形缩放无失真。
性能考量-canvas有时候有些极端场景不可避免，比如Canvas 渲染 10 万条折线时出现卡顿，该如何优化？
视图渲染。这种手段的叫法有很多，什么脏矩阵、局部渲染等，但都是一个逻辑：只渲染视图范围内的数据。
数据抽稀。说白了就是减少数据点。比如2d图形开发，本质就是一个个的点组成的。那么一条线段可以用10000个点描述，也可以只用两个点描述（起始点）。这里有一些算 ...
Threejs的一些优化手段
本文主要介绍在threejs中的一些，优化手段场景中的物体数量巨大，该如何优化？核心优化：减少 Draw Call（绘制调用）
合并几何体（无独立交互需求import { BufferGeometryUtils } from 'three/addons/utils/BufferGeometryUtils.js';
const geometries = [];
for (let i = 0; i < 1000; i++) {
const geo = new THREE.BoxGeometry(1, 1, 1);
geo.translate(Math.random() * 50, 0, Math.random() * 50);
geometries.push(geo);
}
// 合并为1个几何体，仅1次Draw Call
const mergedGeo = BufferGeometryUtils.mergeBufferGeometries(geometries);
const mergedMesh = new THREE.Mes ...