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中的状态管理主流就是俩： Redux 和 Context
Redux// 安装
cnpm install @reduxjs/toolkit react-redux
基本使用redux是一个状态管理容器，类似vuex，几个重要的角色： store（数据源）、action及reducer（负责修改数据）。下面代码演示他的基本使用：
// index.js中引入redux的store和provider方法
import store from './store'
import { Provider } from 'react-redux'
...
...
<Provider store={store}>
<RouterProvider router={router}></RouterProvider>
</Provider>
// store的index
import { configureStore } from "@reduxjs/toolkit"; ...
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
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系列：md2模型
本文介绍如何将md2模型，导进我们的页面中前面有介绍过使用gltf的loader，加载glb模型。那么针对古老的md2模型文件，如何操作呢？
1. 导入md2库
import { MD2Character } from 'three/examples/jsm/misc/MD2Character.js';
2. 加入一个平面贴图当作草地
const gt = new THREE.TextureLoader().load( 'textures/terrain/grasslight-big.jpg' );
const gg = new THREE.PlaneGeometry( 20, 20 );
const gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt } );
const ground = new THREE.Mesh( gg, gm );
ground.rotation.x = - Math.PI / 2;
ground.material.map.repeat.set( ...
Threejs系列：补间动画
本文介绍threejs中的补间动画什么是补间动画？物体从a位置移动到b位置，移动过程中的展现形式，就是补间动画。
1. 导入tween库
// threejs自带了，无需安装
import * as TWEEN from 'three/examples/jsm/libs/tween.module'
const cube1 = new THREE.Mesh(
new THREE.BoxGeometry(2,2,2),
new THREE.MeshBasicMaterial({color: 'black'})
)
scene.add( cube1 );
const tween1 = new TWEEN.Tween(cube1.position)
tween1.to({ x: -10}, 3000)
tween1.easing(TWEEN.Easing.Bounce.InOut)
tween1.start()
const tween2 = new TWEEN.Tween(cube1.position)
tween2.to({ x: ...
Threejs系列：光线投射（捕获点击目标）
本文介绍threejs中的光线投射我们都知道，threejs是一个三维场景，但是在前端页面中，三维的场景，是画在二维的canvas画布中的，那么问题来了，在二维画布上的点击事件,需要到三维场景中获取点击目标，如何实现？光线投射。
实现思路： 先要归一化，针对坐标系，将通过点击事件获取的坐标值，转换成笛卡尔坐标系（右正上正）的数值，且区间范围控制在[-1, 1]。然后通过光线投射，由转换后的坐标点及相机位置点，得到一条线，这条线穿过的空间中的物体，就是我们的点击目标。
1. 归一化：坐标转换通过点击事件，获取当前画布的x、y。然后根据视图区域的宽高，归一化坐标数据到下图的坐标系中。
具体代码：
let mouse = new THREE.Vector2()
window.addEventListener('click', (event) => {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1
mouse.y = -((event.clientY / window.innerWidth) * 2 - 1)
...