React系列：第七回(组件的设计模式)
本文我们聊聊react组件的设计模式(逻辑复用)一. render props在前面讲解登陆态持久化的文章中，我们实际上已经实践了render props：
const AuthRoute = ({ children}) => {
const token = getToken()
if (token) {
return <>{children}</>
} else {
return <Navigate to='/login' replace />
}
}
通过打印props我们能够看到，包裹着内容，实际上会在props中，以children的属性传递给AuthRoute组件。在AuthRoute中，我们将token的判断逻辑扔在了该组件中，其中包裹着目标组件。若有token，跳转到目标页面，否则，跳转到login。高效复用逻辑代码。
二. 高阶组件函数包裹组件，之前提到的memo就是一个实例，下面写一个HO ...
React系列：第六回(React的渲染流程)
本文简单聊聊React的渲染流程在前面介绍vue的系列文章中，我们通过手写vue类的方式，将vue的渲染流程基本介绍了，其框架底层的逻辑如下：
初次加载时， 数据的响应式处理和模版编译，完成初始化页面的显示。所谓数据的响应式就是让我们能够知道，什么地方用到了数据，然后在数据变化时，通知那些用到该数据的地方重新编译。而模版编译则是将模版代码转换成html代码，让页面能够显示
状态数据变化时， 以更新数据后的新虚拟dom和旧的虚拟dom为输入，经过diff和patch，找出差异， 更新差异，最后重新渲染
一. 那么在react中， 这个过程又是如何的呢？实际上无论什么前端框架，其渲染的逻辑都是一致的，只是实现的方式不同，react亦是如此。
初始渲染：JSX 编译 → React.createElement调用 → 执行调用生成虚拟 DOM → 基于虚拟 DOM 构建 Fiber 树 → 提交（Commit）阶段：根据 Fiber 树创建真实 DOM 挂载到页面 → 执行副作用。
更新渲染：状态变化，触发重渲染 → 生成新的虚拟 DOM → 进入调和阶段：基于新虚拟 DOM 和旧 F ...
React系列：第五回(事件)
本文记录一下原生事件和react事件机制的差异一. 基本介绍原生dom事件： 事件捕获 —> 目标dom —> 事件冒泡react事件系统（合成事件）： 事件在具体的dom节点上触发后， 会被冒泡到document上，document上所绑定的统一事件处理程序，会将事件分发到具体的组件实例中去。这一套机制被称为合成事件。
二. 执行顺序
原生事件优先执行，合成事件后执行。子元素原生事件执行、父元素原生事件执行、子元素合成事件执行、父元素合成事件执行、document原生事件执行。
阻止合成事件间的冒泡: e.stopPropagation()；阻止合成事件与最外层document上事件的冒泡： e.nativeEvent.stopImmediatePropagation()
三. 为什么要用合成事件前面说了，合成事件会模拟原生dom的行为，那么为什么不直接用原来的呢，非要自己搞一套？主要是为了平台兼容。
四：差异
绑定方式：原生事件绑定在真实 DOM，React 事件绑定在虚拟 DOM
执行机制：React 事件通过事件委托到 document 统一处理，原生是直接绑定
...
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