<h2>问题发现</h2><p>在完成 docker 部署至生产环境时 发现浏览器获取不到容器注入的环境变量 但是服务端（nodejs）可以；</p><p><br></p><p>尝试了许多方式 <code data-backticks="1">publicRuntimeConfig</code> / <code data-backticks="1">config</code> 以及官方的<code data-backticks="1">NEXT_PUBLIC</code>前缀都无法让浏览器获取到容器注入的环境变量</p><h2>参考方案</h2><p>于是在网上找到了一篇解决方案参考了下：</p><p><a href="https://juejin.cn/post/7331070745923043338">参考连接</a></p><h2>解决方案</h2><p>结果发现在 <code data-backticks="1">_document.tsx</code> 这个入口中导出的 <code data-backticks="1">Document</code> 组件只会在<code data-backticks="1">服务端运行【nodejs】</code> 并且每次刷新都会运行;</p><p><br></p><p>那么就可以在这个组件中将环境变量注入到浏览器的 <code data-backticks="1">window</code> 中</p><div data-language="ts" class="toastui-editor-ww-code-block"><pre><code data-language="ts">import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";

export default function Document() {
	const processEnv = {
		env: {
			NEXT_PUBLIC_CLIENT_URL: process.env.NEXT_PUBLIC_CLIENT_URL
		}
	}
	console.log('这里是服务端生成配置发送给客户端的地方 =&gt; ', processEnv);

	return (
		&lt;Html lang="en"&gt;
			&lt;Head /&gt;
			&lt;body&gt;
				&lt;Script id="initState" strategy="beforeInteractive"&gt;
					{`window.process=${JSON.stringify(processEnv)}`}
				&lt;/Script&gt;
				&lt;Main /&gt;
				&lt;NextScript /&gt;
			&lt;/body&gt;
		&lt;/Html&gt;
	);
}</code></pre></div><p>这样全局的process.env中就能获取到容器注入的环境变量了</p><div data-language="ts" class="toastui-editor-ww-code-block"><pre><code data-language="ts">const BASE_URL = `http://${
    typeof window !== 'undefined' ? process.env.NEXT_PUBLIC_CLIENT_URL : 
    process.env.NEXT_PUBLIC_SERVER_URL
}/clientApi`;</code></pre></div><p>并且在<strong>容器环境变量发生改变时</strong>， 刷新客户端即可获得最新的环境变量了。不需要重启容器</p>

解决nextjs生产环境下客户端（浏览器）无法获取环境变量的问题

<p>下载安装文件</p><p>首先，需要匹配Ingress-nginx版本和kubernetes版本。 在<a href="https://github.com/kubernetes/ingress-nginx">https://github.com/kubernetes/ingress-nginx</a>可以找到，如下图所示：</p><p><img src="http://ragga-1257766585.cos.ap-guangzhou.myqcloud.com/blog/1715186465240_image.png" alt="image" contenteditable="false"><br></p><blockquote><p><strong>这里一定要选择kubernetes对应的ingress-nginx版本 要不会报一些奇怪的错误！</strong></p></blockquote><p>博主k8s版本是v1.23.6，选择安装Ingress-nginx的v1.6.3版本，下载如下文件：</p><div data-language="bash" class="toastui-editor-ww-code-block"><pre><code data-language="bash">wget https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v1.6.4/deploy/static/provider/cloud/deploy.yaml</code></pre></div><h1>修改配置</h1><h2>替换镜像地址</h2><p>由于国内可能无法访问registry.k8s.io 所以替换以下镜像</p><p>ingress-nginx 1个</p><p>kube-webhook-certgen 2个</p><div data-language="bash" class="toastui-editor-ww-code-block"><pre><code data-language="bash">registry.k8s.io/ingress-nginx/controller:v1.6.3@sha256:54f7fe2c6c5a9db9a0ebf1131797109bb7a4d91f56b9b362bde2abd237dd1974
替换成↓
k8s.dockerproxy.com/ingress-nginx/controller:v1.6.3@sha256:54f7fe2c6c5a9db9a0ebf1131797109bb7a4d91f56b9b362bde2abd237dd1974

registry.k8s.io/ingress-nginx/kube-webhook-certgen:v1.6.3@sha256:549e71a6ca248c5abd51cdb73dbc3083df62cf92ed5e6147c780e30f7e007a47
替换成↓
k8s.dockerproxy.com/ingress-nginx/kube-webhook-certgen:v1.6.3@sha256:549e71a6ca248c5abd51cdb73dbc3083df62cf92ed5e6147c780e30f7e007a47</code></pre></div><h2>其他字段修改</h2><div data-language="yaml" class="toastui-editor-ww-code-block"><pre><code data-language="yaml">apiVersion: apps/v1
kind: DaemonSet  # 这里把 Deployment 改成 DaemonSet
metadata:
  labels:
    ...
  name: ingress-nginx-controller
  namespace: ingress-nginx
spec:
  minReadySeconds: 0
  revisionHistoryLimit: 10
  selector:
    matchLabels:
      app.kubernetes.io/component: controller
      app.kubernetes.io/instance: ingress-nginx
      app.kubernetes.io/name: ingress-nginx
  template:
    metadata:
      labels:
        app.kubernetes.io/component: controller
        app.kubernetes.io/instance: ingress-nginx
        app.kubernetes.io/name: ingress-nginx
    spec:
      hostNetwork: true  #这里加一句
      # 移除 strategy
      nodeSelector: # 可选
        kubernetes.io/os: linux
        hasIngress: "true"  # 在存在这个标签的 node 上部署
      containers:
      - args:
        ...</code></pre></div><div data-language="bash" class="toastui-editor-ww-code-block"><pre><code data-language="bash">DaemonSet：修改 Deployment 为 DaemonSet，移除 strategy 字段；
hostNetwork：使用宿主机的网络；
nodeSelector：添加标签选择器（可选）；
将名为 ingress-nginx-controller 的 Service 类型改为 ClusterIP
（要删除 externalTrafficPolicy 字段）；</code></pre></div><p>保存配置文件后  提交文件yaml  部署ingress-nginx</p><div data-language="bash" class="toastui-editor-ww-code-block"><pre><code data-language="bash">kubectl apply -f deploy.yaml </code></pre></div><h3>查看结果</h3><div data-language="bash" class="toastui-editor-ww-code-block"><pre><code data-language="bash">[root@k8s-master ingress]# kubectl get pods -n ingress-nginx
NAME                                   READY   STATUS      RESTARTS   AGE
ingress-nginx-admission-create-b7dqr   0/1     Completed   0          2m5s
ingress-nginx-admission-patch-jnqr8    0/1     Completed   0          2m5s
ingress-nginx-controller-f6rln         0/1     Running     0          2m5s</code></pre></div><h3>验证ingress-nginx</h3><div data-language="bash" class="toastui-editor-ww-code-block"><pre><code data-language="bash">[root@k8s-node1 ~]# curl http://xx.xx.xx.x
&lt;html&gt;
&lt;head&gt;&lt;title&gt;404 Not Found&lt;/title&gt;&lt;/head&gt;
&lt;body&gt;
&lt;center&gt;&lt;h1&gt;404 Not Found&lt;/h1&gt;&lt;/center&gt;
&lt;hr&gt;&lt;center&gt;nginx&lt;/center&gt;
&lt;/body&gt;
&lt;/html&gt;
<br></code></pre></div>

kubernetes安装ingress-nginx

<h1>Js模块化</h1><h2>【成长期】原始的js模块化</h2><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">//    使用立即执行函数 + var的方式
//    例如 有base.js 和 main.js两个文件
//    其中main.js需要调用base.js中的函数 可以这样写

/** base.js  */
var baseModule = (function () {
    var a = 1;
    var b = 11;
    var c = 22;
    
    console.log(a, b, c);
    function addA() {
        a++;
    }
    
    return {
        addA,
    }
})()

/** main.js  */
baseModule.addA();</code></pre></div><h2>【成熟期】CommonJs</h2><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">//    base.js
var a = 1;
var b = 2;
var c = 3;

module.exports = {
    a, b, c
}

//    main.js
const base = require('./base.js');
console.log(
    base.a,
    base.b,
    base.c
)

/** 编译后实际执行的是以下的代码  */
//   base.js
(
    function (exports, require, module, __filename, __dirname) {
        ...
        let count = 0;
        const increase = () =&gt; ++count;
        
        module.exports = {
            increase,
            count
        }
        
        return module.exports;
    }
).call(thisValue, module.exports, require, module, __filename, __dirname)

//   main.js
(
    function (exports, require, module, __filename, __dirname) {
        ...
    }
).call(thisValue, exports, require, module, __filename, __dirname)</code></pre></div><p>● 缺点</p><p>○ 无法动态加载模块只支持同步加载模块</p><p>○ 因为commonJs是为了Nodejs设计的 没有异步问题不大</p><p>○ 服务器端同步加载模块的方案</p><p><br></p><p>面试题：</p><p>● module.exports跟export之间的关系</p><p>○ 两个指向的是同一个东西 module.exports = exports</p><p>○ module.exports可以支持只导出单个变量或者函数</p><p>● 如何避免循环引用</p><p>○ commonJs本身做了缓存 当require过某个文件时 它会将结果缓存下来</p><p>○ 下次使用就不用重新再走一遍</p><p>○ 可以重新设计该模块</p><h2>AMD async module define</h2><blockquote><p>非同步加载模块</p><p>允许异步加载 define(id, [depends], callback); require([module], callback);</p></blockquote><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">//    定义模块的方式
define(
    'amdCountModule',
    ['depModule1', 'depModule2'],
    (depModule1, depMOdule2) =&gt; {
        return {
            ...
        }
    }
)

require(
    ['amdCountModule'],
    amdCountModule =&gt; {
        amdCountModule.xxx
        ...   
    }
)

//    如果再AMD中使用require的方式加载同步模块可以么?
define(require =&gt; {
    ...,
    const depModule1 = require('depModule1');
    const depModule2 = require('depModule2');
    
    exports.xx = xx;
    exports.cc = cc;
})
<br></code></pre></div><h2>CMD</h2><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">define(
    function(require, exports, module) {
        let depModule1 = require('depModule1');
        deoModule1.xxx();
        
        if (xxx) {
            let depModule2 = require('depModule2');
        }
    }
)</code></pre></div><h2>UMD universal module define</h2><p>...太复杂了</p><h2>ESM ecmscript module</h2><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">import xxx from '..';

import { xx } from '..';

export xxx;

export default {
    ...
}


//    在nodejs中使用esm
//    首先命名要改成 .mjs结尾
//    node &gt;= 13.2.0


//    如何支持异步加载
import('...');    //    返回的是一个promise
<br></code></pre></div>

javascript模块化学习

<h1>浏览器内置JS对象&amp;事件&amp;请求</h1><h2>BOM - 【Browser】浏览器对象功能区域的相关操作</h2><h3>location - 跳转 / 读取路由数据</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">location.href =&gt; 'https://www.baidu.com/search?class=browser#comments'
location.protocol =&gt; 'https';
location.host =&gt; 'www.baidu.com';
location.origin =&gt; 'https://www.baidu.com';
location.port =&gt; '8080';
location.pathname =&gt; '/search/';
location.search = '?class=browser';
location.hash =&gt; '#comments';    // 单页路由 | iframe通信

location.assign('...') // 跳转到指定的path, 替换pathname的值
location.replace('...')// 效果同上，同时替换浏览历史
location.reload()      // 刷新
locatoin.toString()    // 返回当前地址字符串

面试方向
1. location本身的api操作
2. 路由相关 跳转 / 参数 / 操作 =&gt; 场景：history | hash
3. url处理 - 正则 or 手写处理


【history】
history.state =&gt; 存储当前页面的状态

history.pushState()    //  流转到指定状态页面
history.replaceState() //  替换当前的状态

//    手写location对象</code></pre></div><h2>navigator</h2><blockquote><p>navigator.userAgent</p><p>获取当前用户基础信息 UA读取信息 =&gt; 数据采集 / 流量监控 / 浏览器兼容性优化 剪切板 / 键盘 =&gt; 如何做剪切板 / 监听键盘输入</p></blockquote><h2>screen</h2><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">//    表示显示区域 -- 屏幕

//    判断区域大小
1. window 视窗判断：
全局入口
    window.innerHeight
    window.innerWidth
    
文本处获取(元素本身的宽高)
    document.documentElement.clientHeight
    document.documentElement.clientWidth
    document.body.clientHeight
    document.body.clientWidth
    
网页size类型 =&gt; 
offsetHeight / offsetWidth = clientHeight + 边框 + 滚动条
    document.documentElement.offsetHeight
    document.documentElement.offsetWidth
    document.body.offsetHeight
    document.body.offsetWidth    

定位类型 =&gt; 
scrollLeft / scrollTop - 相对概念 距离常规位置（左上角）滚动距离
offsetLeft / offsetTop - 距离常规位置的距离
    document.documentElement.offsetHeight
    document.documentElement.offsetWidth
    document.body.offsetHeight
    document.body.offsetWidth    

集大成者
el.getBoundingClientRect() - .top / .left / .bottom / .right
* 兼容性 - 在IE中会多2px</code></pre></div><p><img src="http://ragga-1257766585.cos.ap-guangzhou.myqcloud.com/blog/1715186382691_image.png" alt="image" contenteditable="false"><br></p><h2>event事件模型</h2><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">&lt;div&gt;
    &lt;p&gt;Click&lt;/p&gt;
&lt;/div&gt;
// 冒泡（由深到浅） p =&gt; div =&gt; body =&gt; HTML =&gt; document
// 捕获（由浅入深） document =&gt; HTML =&gt; body =&gt; div =&gt; p

//  监听事件  事件名，监听到后的回调，是否捕获
el.addEventListener(eventName, function, useCapture)

//  1. 如何阻止事件的传播
event.stopPropagation();
//  阻止默认事件的传播 =&gt; 无法阻止默认事件的发生【例如a标签跳转...】

//  2. 如何阻止默认事件传播
event.preventDefault(); 

//  3. 阻止相同节点绑定多个同类事件 =&gt; 兼容 &amp; 性能
event.stopImmediatePropagation();

//  4. 手写，实现一个多浏览器兼容的事件绑定
//  attachEvent vs addEventListener
//  区别：
//  a. 传参 attachEvent使用onXXX addEventListener用字符串
//  b. 执行顺序, attachEvent - 后绑定 先执行
//  addEventListener - 先绑定 先执行
//  c. 解绑不同 detachEvent vs removeEventListener
//  d. 阻断不同 e.cancelBubble = true vs e.stopPropagation();
//  e. 阻断默认事件 e.returnValue = false vs  e.preventDefault();

/** 手写代码  */
class BindEvent {
    constructor(element) {
        this.element = element;
    }
    
    addEventListenerr = (type, handler) =&gt; {
        if (this.element.addEventListener) {
            this.element.addEventListener(type, handler, false);
        } else if (this.element.attachEvent) {
            const element = this.element;
            this.element.attachEvent(
                'on' + type, 
                () =&gt; {
                    handler.call(element);
                }
            )
        } else {
            this.element['on' + type] = handler;
        }
    }
    
    removeEventListener = (type, handler) =&gt; {
        if (this.element.removeEventListener) {
            this.element.removeEventListener(type, handler, false);
        } else if (this.element.detachEvent) {
            this.element.detachEvent('on' + type, handler);
        } else {
            this.element['on' + type] = null;
        }
    }
    
    static stopPropagation(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
    
    static preventDefault(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }
    
}

//  5. 性能 - 事件代理
&lt;ul class="list"&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;

const list = document.querySelector('.list');

function onClick(event) {
    let event = event || window.event;
    if (event.target.nodeName.toLowerCase() === 'li') {
        const liList = this.querySelector('li');
        const index = [...liList].indexOf(event.target);
    }
}

list.addEventListener('click', onClick, false);</code></pre></div><h2>网络层</h2><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">//  实例化
const xhr = new XMLHttpRequest();

//  初始化连接 建立连接
xhr.open(method, url, async)

//  end发送请求
xhr.send(data);    // data - encodeURIComponent

//  接收
xhr.reradyStatus
// 0 - 尚未调用open方法
// 1 - 已经调用了open
// 2 - 已经send
// 3 - 已经收到请求的返回数据了
// 4 - 请求已完成
xhr.onreadystateChange = () =&gt; {
    if (xhr.readyStatus === 4) {
        if (
            xhr.status &gt;= 200 &amp;&amp; xhr.status &lt;= 300 ||
            xhr.status === 304
        ) {
            console.log('success', xhr.responseText);
        }
    }
}

//  超时时间
xhr.timeout = 1000;
xhr.ontimeout = () =&gt; {
    //  超时操作
}

//   面试方向
1. Restful - GET POST PUT DELETE
2. 跨域 - CORS / JSONP
3. 状态码 =&gt; 3xx (浏览器缓存概念) =&gt; 强缓存 / 协商缓存</code></pre></div><h3>DOM - 【Document】浏览器视窗内html文本的相关操作</h3><h3>EMCAScript - ES - JS</h3>

浏览器内置JS对象 / 事件 / 请求

<h3>Error: Hydration failed because the initial UI does not match what was</h3><p>rendered on the server.</p><h4>本来在项目中写了个判断渲组件的逻辑，结果报这么个错误</h4><blockquote><p>Error: Hydration failed because the initial UI does not match what was</p><p>rendered on the server.</p></blockquote><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">const ThemeComponent = () =&gt; {
    if (theme === 'sun') {
        return &lt;div&gt;
            &lt;IconSun
                style={{ color: "#000" }}
                className="text-[20px]"
            /&gt;
        &lt;/div&gt;
    } else {
        return &lt;div&gt;
            &lt;IconMoon
                style={{ color: "#000" }}
                className="text-[20px]"
            /&gt;
        &lt;/div&gt;
    }
}

return &lt;div 
	className="
         w-[40px] h-[40px] cursor-pointer 
         mt-[20px] bg-white rounded-[100px]
         flex justify-center items-center
     "
     onClick={handleTheme}
     style={{ boxShadow: '0 0 10px rgba(0,0,0,.1), 0 5px 20px rgba(0,0,0,.2)' }}
 &gt;
    &lt;ThemeComponent /&gt;
&lt;/div&gt;</code></pre></div><p>查了下相关文章 发现可以用这个解决方法</p><p>参考文章：<a href="https://cloud.tencent.com/developer/article/2282752">https://cloud.tencent.com/developer/article/2282752</a></p><div data-language="ts" class="toastui-editor-ww-code-block"><pre><code data-language="ts">import React from "react";
import dynamic from "next/dynamic";
const NoSSR = (props: any) =&gt; &lt;React.Fragment&gt;{props.children}&lt;/React.Fragment&gt;;
const NoSSRComponent = dynamic(() =&gt; Promise.resolve(NoSSR), {
    ssr: false
});

const ThemeComponent = () =&gt; {
    if (theme === 'sun') {
        return &lt;div&gt;
            &lt;IconSun
                style={{ color: "#000" }}
                className="text-[20px]"
            /&gt;
        &lt;/div&gt;
    } else {
        return &lt;div&gt;
            &lt;IconMoon
                style={{ color: "#000" }}
                className="text-[20px]"
            /&gt;
        &lt;/div&gt;
    }
}

return &lt;div 
	className="
         w-[40px] h-[40px] cursor-pointer 
         mt-[20px] bg-white rounded-[100px]
         flex justify-center items-center
     "
     onClick={handleTheme}
     style={{ boxShadow: '0 0 10px rgba(0,0,0,.1), 0 5px 20px rgba(0,0,0,.2)' }}
 &gt;
 	&lt;NoSSRComponent&gt;
    	&lt;ThemeComponent /&gt;
    &lt;/NoSSRComponent&gt;
&lt;/div&gt;</code></pre></div><p>判断组件外套一层 NoSSRComponent  组件即可</p>

Next.js Error: Hydration failed because the initial UI does not match what was render

<h1>uni-app 基础</h1><h2>uni-app环境搭建</h2><h3><a href="https://uniapp.dcloud.net.cn/quickstart-cli.html">命令行搭建</a></h3><h4>基础使用差异说明</h4><h5>要使用滚动</h5><div data-language="html" class="toastui-editor-ww-code-block"><pre><code data-language="html">&lt;scroll-view scroll-y="true" class="h-600"&gt;</code></pre></div><h5>类似于v-html</h5><div data-language="html" class="toastui-editor-ww-code-block"><pre><code data-language="html">&lt;rich-text nodes="&lt;h1&gt;1123213&lt;/h1&gt;" /&gt;
&lt;editor /&gt; - text-area</code></pre></div><h4>生命周期</h4><blockquote><p><strong>onLaunch</strong></p><p>uniapp 初始化的时候触发</p></blockquote><blockquote><p><strong>onShow</strong></p><p>uniapp启动，或者从后台进入前台显示</p></blockquote><blockquote><p><strong>onHide</strong></p><p>从前台进入后台</p></blockquote><blockquote><p><strong>onError</strong></p><p>错误触发</p></blockquote><blockquote><p><strong>onExist</strong></p><p>应用退出</p><p>只有在android上有。</p></blockquote><blockquote><p>others</p><p>onUnhandledRejection</p><p>onPageNotFound</p><p>onLastPageBackPress - 按最下面返回的那个按键的退出</p></blockquote><h5>globalData</h5><p>只能用这种写法</p><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">export default {
    globalData: {
        xxx
    }
}</code></pre></div><h4>页面时序描述</h4><p>1.根据pages.json 启动容器 - 相当于打开浏览器</p><p>2.读取template的内容。我先把静态的节点读取出来，先创建一轮dom；</p><p>3.onInit生命周期 - ***只有百度小程序</p><p>4.onLoad生命周期</p><p>a.响应式数据 / 计算属性 / 方法 / props / slots 已经完成</p><p>b.联网获取数据，更新data</p><p>5.onShow 生命周期</p><p>a.监听页面显示，页面出现时触发</p><p>6.执行转成动画</p><p>7.动画之间，创建真实的dom，onReady执行 - 相当于didmount</p><p>a.处理dom，ref等等</p><h3>配置化</h3><h4>page.json配置</h4><p>主要用域配置页面的各种信息，包含tabBar，具体的页面pages的相关信息等</p><h4>manifast.json配置</h4><p>主要配置构建与工程相关的内容，包括某一种小程序 / app的一些特殊配置</p><h4>androidManifest.xml</h4><p>安卓的原生配置，需要自己手动添加</p>

uni-app学习记录

<h1>数据结构</h1><blockquote><p>数组 &amp; 链表</p><p>相连性 | 指向性</p><p>数组可以迅速定位到数组中某一个节点的位置</p><p>链表则需要通过前一个元素指向下一个元素，需要前后依赖顺序查找，效率较低</p></blockquote><h2>实现链表</h2><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">//    head =&gt; node1 =&gt; node2 =&gt; ... =&gt; null

class Node {
    constructor(element) {
        this.element = element;
        this.next = null;
    }
}


class LinkList {
    constructor() {
        this.length = 0;
        //    1.空链表特征 =&gt; 判断链表的长度
        this.head = null;
    }
    
    //    返回索引对应的元素
    getElementAt(position) {
        //    边缘检测
        if (position &lt; 0 || position &gt;= this.length) {
            return null;
        }
        
        let _current = this.head;
        for (let i = 0; i &lt; position; i++) {
            _current = _current.next;
        }
        
        return _current;
    }
    
    //    查找元素所在位置
    indexOf(element) {
        let _current = this.head;
        for (let i = 0; i &lt; this.length; i++) {
            if (_current === element) return i;
            _current = _current.next;
        }
        return -1;
    }
    
    //    添加节点 在尾部加入
    append(element) {
        _node = new Node(element);
        
        if (this.head === null) {
            this.head = _node;
        } else {
            this.getElementAt(this.length - 1);
            _current.next = _node;
        }
        this.length++;   
    }
    
    //    插入节点    在中间插入
    insert(position, element) {
        if (position &lt; 0 || position &gt; this.length) return false;
        
        let _node = new Node(element);
        if (position === 0) {
            _node.next = this.head;
            this.head = _node;
        } else {
            let _previos = this.getElementAt(position - 1);
            _node.next = _previos;
            _previos.next = _node;
        }
        this.length++;
        return true;
    }
    
    //    删除指定位置元素
    removeAt(position) {
        if (position &lt; 0 || position &gt; this.length) return false;
        
        if (position === 0) {
            this.head = this.head.next;
        } else {
            _previos = this.getElementAt(position - 1);
            let _current = _previos.next;
            _previos.next = current.next;            
        }
        this.length--;
        return true;
    }
    
    //    删除指定元素
    remove(element) {
    }
}</code></pre></div><h2>栈</h2><h4>特点：先入后出（薯片桶）</h4><h2>队列</h2><h4>特点：先入先出（排队）</h4><h2>哈希</h2><h4>特点：快速匹配定位</h4><h2>树</h2><p>遍历 前序遍历（中左右） 中序遍历（左中右） 后序遍历（左右中）</p><p>1.二叉树 or 多子树</p><p>2.结构定义</p><p>a.树是非线性结构</p><p>b.每个节点都有0个或多个后代</p><h2>面试真题：</h2><h3>判断括号是否有效自闭合</h3><blockquote><p>算法流程：</p><p>1.确定需要什么样的数据结构，满足模型的数据  -  构造变量 &amp; 常量</p><p>2.运行方式  简单条件执行 | 遍历 | 递归 - 算法主体结构</p><p>3.确定输入输出 - 确定流程</p></blockquote><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">    //    '{}[]' 和 '[{}]' true,   
    //    '{{}[]' false
const stack = [];

const brocketMap = {
    '{': '}',
    '[': ']',
    '(': ')'
};

let str = '{}';

function isClose(str) {
    for (let i = 0; i &lt; str.length; i++) {
        const it = str[i];
        if (!stack.length) {
            stack.push(it);
        } else {
            const last = stack.at(-1);
            if (it === brocketMap[last]) {
                stack.pop();
            } else {
                stack.push(it);
            }
        }
    }
    
    if (!stack.length) return true;

    return false;
}

isClose(str);</code></pre></div><h3>遍历二叉树</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">//    前序遍历
class Node {
    constructor(node) {
        this.left = node.left;
        this.right = node.right;
        this.value = node.value;
    }
}
//    前序遍历
const PreOrder = function(node) {
    if (node !== null) {
        console.log(node.value);
        PreOrder(node.left);
        PreOrder(node.right);
    }
}
//    中序遍历
const InOrder = function(node) {
    if (node !== null) {
        InOrder(node.left);
        console.log(node.value);
        InOrder(node.right);
    }
}
//    后序遍历
const PostOrder = function(node) {
    if (node !== null) {
        PostOrder(node.left);
        PostOrder(node.right);
        console.log(node.value);
    }
}</code></pre></div><h3>树结构深度遍历</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">const tree = {
    value: 1,
    children: [
        {
            value: 2,
            children: [
                { value: 3 },
                {
                    value: 4, children: [
                        { value: 5 }
                    ]
                }
            ]
        },
        { value: 5 },
        {
            value: 6, 
            children: [
                { value: 7 }
            ]
        }
    ]
}
//    优先遍历节点的子节点 =&gt; 兄弟节点
//    递归方式
function dfs(node) {
    console.log(node.value);
    if (node.children) {
        node.children.forEach(child =&gt; {
            dfs(child);
        })   
    }
}

//    遍历 - 栈
function dfs() {
    const stack = [node];
    while (stack.length &gt; 0) {
        const current = stack.pop();
        console.log(current.value);
        if (current.children) {
            const list = current.children.reverse();
            stack.push(...list);
        }
    }
 }</code></pre></div><h3>树结构广度优先遍历</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">const tree = {
    value: 1,
    children: [
        {
            value: 2,
            children: [
                { value: 3 },
                {
                    value: 4, children: [
                        { value: 5 }
                    ]
                }
            ]
        },
        { value: 5 },
        {
            value: 6, 
            children: [
                { value: 7 }
            ]
        }
    ]
}

//    1. 递归
function bfs(nodes) {
    const list = []
    nodes.forEach(child =&gt; {
        console.log(child.value);
        if (child.children &amp;&amp; child.children.length) {
            list.push(...child.children);
        }
    })
    if (list.length) {
        bfs(list);    
    }
}
bfs([tree]);

//    1.递归 - 方法2
function bfs(node, queue = [node]) {
    if (!queue.length) return;
    
    const current = queue.shift();
    if (current.children) {
        queue.push(...current.children);
    }
    
    bfs(null, queue);
}
bfs(tree);


//    2. 递归
function bfs(node) {
    const queue = [node];
    while(queue.length &gt; 0) {
        const current = queue.shift();
        if (current.children) {
            queue.push(...current.children);
        }
    }
}</code></pre></div><h3>实现快速构造一个二叉树</h3><blockquote><p>1.若他的左子树非空，那么他的所有左子节点的值应该小于根节点的值</p><p>2.若他的右子树非空，那么他的所有右子节点的值应该大于根节点的值</p><p>3.他的左 / 右子树 各自又是一颗满足下面两个条件的二叉树</p></blockquote><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">class Node {
    constructor(key) {
        this.key = key
        this.left = null;
        this.right = null;
    }
}

class BinaryTree {
    constructor() {
    //    根节点
        this.root = null;
    }
    
    //    新增节点
    insert(key) {
        const newNode = new Node(key);
        
        const insertNode = (node, newNode) =&gt; {
            if (newNode.key &lt; node.key) {
    //    没有左节点的场景 =&gt; 成为左节点
                node.left ||= newNode;
                
    //    已有左节点的场景 =&gt; 递归改变参照物，与左节点进行对比判断插入位置
                inertNode(node.left, newNode);
            } else {
    //    没有左节点的场景 =&gt; 成为左节点
                node.right ||= newNode;
                
    //    已有左节点的场景 =&gt; 递归改变参照物，与左节点进行对比判断插入位置
                inertNode(node.right, newNode);
            }
        }
        
        this.root ||= newNode;
        //    有参照物后进去插入节点
        insertNode(this.root, newNode);
    }
    
    //    查找节点
    contains(node) {        
        const searchNode = (referNode, currentNode) =&gt; {
            if (currentNode.key === referNode.key) {
                return true;
            }
            if (currentNode.key &gt; referNode.key) {
                 return searchNode(referNode.right, currentNode);
            }
            
            if (currentNode.key &lt; referNode.key) {
                 return searchNode(referNode.left, currentNode);
            }
            
            return false;
        }
        return searchNode(this.root, node);
    }
    
    //    查找最大值
    findMax() {
        let max = null;
        
        //    深度优先遍历
        const dfs = node =&gt; {
            if (node === null) return;
            if (max === null || node.key &gt; max) {
                max = node.key;
            }
            dfs(node.left);
            dfs(node.right);
        }
        
        dfs(this.root);
        return max;
    }
    
    //    查找最小值
    findMin() {
        let min = null;
        
        //    深度优先遍历
        const dfs = node =&gt; {
            if (node === null) return;
            if (min === null || node.key &lt; min) {
                min = node.key;
            }
            dfs(node.left);
            dfs(node.right);
        }
        
        dfs(this.root);
        return min;
    }
    
    //    删除节点
    remove(node) {
        const removeNode = (referNode, current) =&gt; {
            if (referNode.key === current.key) {
                if (!node.left &amp;&amp; !node.right) return null;
                if (!node.left) return node.right;
                if (!node.right) return node.left;
                
            }
        }
        
        return removeNode(this.root, node);
    }
}</code></pre></div><h3>平衡二叉树</h3><p><img src="http://ragga-1257766585.cos.ap-guangzhou.myqcloud.com/blog/1715186171996_image.png" alt="image" contenteditable="false"><br></p><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">class Node {
    constructor(key) {
        this.key = key;
        this.left = null;
        this.right = null;
        this.height = 1;
    }
}


class AVL {
    constructor() {
        this.root = null;
    }
    
    // 插入节点
    insert(key, node = this.root) {
    	if (node === null) {
    		this.root = new Node(key);
    		return;
    	}
    
    	if (key &lt; node.key) {
    		node.left = this.insert(key, node.left);
    	} else if (key &gt; node.key) {
    		node.right = this.insert(key, node.right);
    	} else {
    		return;
    	}
    
    	// 平衡调整
    	const balanceFactor = this.getBalanceFactor(node);
    	if (balanceFactor &gt; 1) {
    		if (key &lt; node.left.key) {
    			node = this.rotateRight(node);
    		} else {
    			node.left = this.rotateLeft(node.left);
    			node = this.rotateRight(node);
    		}
    	} else if (balanceFactor &lt; -1) {
    		if (key &gt; node.right.key) {
    			node = this.rotateLeft(node);
    		} else {
    			node.right = this.rotateRight(node.right);
    			node = this.rotateLeft(node);
    		}
    	}
    
    	this.updateHeight(node);
    	return node;
    }
    
    // 获取节点平衡因子
    getBalanceFactor(node) {
        return this.getHeight(node.left) - this.getHeight(node.right);
    }
    
    rotateLeft(node) {      
        const newRoot = node.right;        
        node.right = newRoot.left;        
        newRoot.left = node;
        
        //    这里是为了校准更新的这两个节点的高度。只需要把他的左右节点的高度拿来 加1即可
        node.height = Math.max(
            this.getHeight(node.left),
            this.getHeight(node.right)
        ) + 1;
        newRoot.height = Math.max(
            this.getHeight(newRoot.left),
            this.getHeight(newRoot.right)
        ) + 1;

        return newRoot;
    }
    
    getHeight(node) {
        if (!node) return 0;
        return node.height;
    }
}</code></pre></div><h3>红黑树</h3><p><a href="https://codeleading.com/article/10264194287/">参考写法</a></p><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">let RedBlackTree = (function() {
    let Colors = {
        RED: 0,
        BLACK: 1
    };

    class Node {
        constructor(key, color) {
            this.key = key;
            this.left = null;
            this.right = null;
            this.color = color;

            this.flipColor = function() {
                if(this.color === Colors.RED) {
                    this.color = Colors.BLACK;
                } else {
                    this.color = Colors.RED;
                }
            };
        }
    }

    class RedBlackTree {
        constructor() {
            this.root = null;
        }

        getRoot() {
            return this.root;
        }

        isRed(node) {
            if(!node) {
                return false;
            }
            return node.color === Colors.RED;
        }

        flipColors(node) {
            node.left.flipColor();
            node.right.flipColor();
        }

        rotateLeft(node) {
            var temp = node.right;
            if(temp !== null) {
                node.right = temp.left;
                temp.left = node;
                temp.color = node.color;
                node.color = Colors.RED;
            }
            return temp;
        }

        rotateRight(node) {
            var temp = node.left;
            if(temp !== null) {
                node.left = temp.right;
                temp.right = node;
                temp.color = node.color;
                node.color = Colors.RED;
            }
            return temp;
        }

        insertNode(node, element) {

            if(node === null) {
                return new Node(element, Colors.RED);
            }

            var newRoot = node;

            if(element &lt; node.key) {

                node.left = this.insertNode(node.left, element);

            } else if(element &gt; node.key) {

                node.right =this.insertNode(node.right, element);

            } else {
                node.key = element;
            }

            if(this.isRed(node.right) &amp;&amp; !this.isRed(node.left)) {
                newRoot = this.rotateLeft(node);
            }

            if(this.isRed(node.left) &amp;&amp; this.isRed(node.left.left)) {
                newRoot = this.rotateRight(node);
            }
            if(this.isRed(node.left) &amp;&amp; this.isRed(node.right)) {
                this.flipColors(node);
            }

            return newRoot;
        }

        insert(element) {
            this.root = insertNode(this.root, element);
            this.root.color = Colors.BLACK;
        }
    }
    return RedBlackTree;
})()</code></pre></div>

数据结构学习

<h1>React高级用法</h1><h2>Hooks</h2><h2>Reducer</h2><p><img src="http://ragga-1257766585.cos.ap-guangzhou.myqcloud.com/blog/1715186075666_image.png" alt="image" contenteditable="false"><br></p><h3>useReducer：</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">import React, { useReducer, useState } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 }
        case 'decrement':
            return { count: state.count - 1 }
        default:
            console.log('格式不通过!');
    }
}

export default function Reducer() {
    const [number, setNumber] = useState(0);
    
    const [state, dispatch] = useReducer(reducer, initalState);
    
    return (
        &lt;div&gt;
            {state.count}
            &lt;button onClick={() =&gt; dispatch({ type: 'increment' })}&gt;+&lt;/button&gt;
        &lt;/div&gt;
    )
}</code></pre></div><h2>Ref</h2><p>用来指代具体的dom节点</p><h3>类组件: createRef</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">import React, { Component } from 'react';

export default class ClassRef extends Component {
    
    constructor(props) {
        super(props);
        
        this.eleRef = createRef();
        this.inputRef = createRef();
    }
    
    handleClick = () =&gt; {
        this.inputRef.current.focus();
        console.log(this.eleRef.current);
    }
    
    render() {
        return (
            &lt;div&gt;
                &lt;div id="xxx" ref={this.eleRef}&gt; eleRef &lt;/div&gt;
                &lt;input ref={this.inputRef} /&gt;
                
                &lt;button onClick={this.handleClick}&gt;&lt;/button&gt;
            &lt;/div&gt;
        )
    }
    
}
<br></code></pre></div><h3>函数组件：useRef</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">import { useRef } from 'react'

export default function FuncRef(props) {
    
    const eleRef = useRef(null);
    const inputRef = useRef(null);
    
    return (
        &lt;div&gt;
            &lt;div id="xxx" ref={this.eleRef}&gt; eleRef &lt;/div&gt;
            &lt;input ref={this.inputRef} /&gt;
            
            &lt;button onClick={this.handleClick}&gt;&lt;/button&gt;
        &lt;/div&gt;
    )
    
}</code></pre></div><h3>Ref转发</h3><p>类似于vue中 调用子组件的方法 refs.xxx()</p><p><img src="http://ragga-1257766585.cos.ap-guangzhou.myqcloud.com/blog/1715186089812_image.png" alt="image" contenteditable="false"><br></p><h2>Context上下文</h2><p>Provider</p><p>Comsumer</p><p>对应Vue，就是provide，inject</p><p>形成一个生成与消费模式的上下文</p><h3>类组件用法</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">import { createContext } from 'react';

const ThemeContext = createContext('light');

//    ClassContext.jsx
export default class ClassContext extends Component {
    
    constructor(props) {
        super(props);
        this.state = {
             theme: 'light'
        }
    }

    render() {
        return (
            &lt;div&gt;
                &lt;ThemeContext.Provider
                    value={this.state.theme}
                &gt;
                    &lt;Parent /&gt;
                    &lt;button onClick={() =&gt; this.setState({ theme: 'light' })}&gt;&lt;/button&gt;
                &lt;/ThemeContext.Provider&gt;
            &lt;/div&gt;
        )
    }
}

const Parent = () =&gt; {
    return (
        &lt;div&gt;
            &lt;Child1 /&gt;
            &lt;Child2 /&gt;
        &lt;/div&gt;
    )
}

class Child1 extends Component {

    static contextType = ThemeContext;
    render() {
        return (
            &lt;div&gt;
                {this.context}
            &lt;/div&gt;
        )
    }
}

class Child2 extends Component {
    render() {
        return (
            &lt;ThemeContext.Consumer&gt;
                {
                    (theme) =&gt; (
                        &lt;div&gt;{theme}&lt;/div&gt;
                    )
                }
            &lt;/ThemeContext.Consumer&gt;
        )
    }
}
<br></code></pre></div><h3>History包装（函数组件）</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">import { useContext, useState, createContext } from 'react';

const ThemeContext = createContext();
const history = window.history;

export default function FuncContext() {
    return (
        &lt;ThemeContext.Provider value={history}&gt;
            &lt;Parent /&gt;
        &lt;/ThemeContext.Provider&gt;
    )
}

const Parent = () =&gt; {
    return &lt;Child /&gt;;
}

const withRouter = (Component) =&gt; {
    console.log(Component, 'ComponentComponent')
    return () =&gt; {
        const nav = useContext(ThemeContext);
        return &lt;Component navigator={nav} /&gt;
    }
}

const Child = withRouter((props) =&gt; {
    console.log(props);
    return (
        &lt;div&gt;
            &lt;button onClick={() =&gt; props.navigator.pushState({}, undefined, 'hello')}&gt;
                hello
            &lt;/button&gt;
        &lt;/div&gt;
    )
})
<br></code></pre></div><h2>高阶函数（HOC）</h2><p>函数可以作为     参数     和     返回值     。</p><h3>属性代理</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">//    CardHoc.jsx
export default function Card({ title, children }) {
    return &lt;div&gt;
        &lt;h2&gt;{ title }&lt;/h2&gt;
        {
            children ? 
            &lt;div&gt;{ children }&lt;/div&gt; : null
        }    &lt;/div&gt;
}

export const withCard = (title) =&gt; (Component) =&gt; {
    return (props) =&gt; {
        const hocStyle = {
            margin: '12px',
            padding: '12px',
            border: '1px solid #ccc',
            borderRadius: '4px'
        }
    
        return &lt;div style={hocStyle}&gt;
            &lt;h2&gt;{title}&lt;/h2&gt;
            &lt;Component {....props} /&gt;
        &lt;/div&gt;
    }
}

//    App.jsx
const Text = ({ num }) =&gt; &lt;div&gt;{num}&lt;/div&gt;
const CardText = withCard('TextCard')(Text);
&lt;CardText num={100} /&gt;
<br></code></pre></div><h3>反向继承</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">import { Component } from 'react';

//    比如我们有一个案例： 我们需要优雅的实现 曝光埋点
/**
 * 有个按钮，我们想知道这个按钮在线上的漏斗转换
 * 每次按钮点击时，记录一个sendLog('my_btn_click'), 其实就是触发一条请求
 * 每次按钮出现时，记录一个sendLog('my_btn_show')
 * 那我的转化，pv('my_btn_click') / pv('my_btn_show')
 */

export default function Extending() {
    return (
        &lt;div&gt;&lt;LogIndex /&gt;&lt;/div&gt;
    )
}

function logProps(logMap) {
    return (WrapperComponent) =&gt; {
        const didMount = WrapperComponent.prototype.componentDidMount;
        return class A extends WrapperComponent {
            componentDidMount() {
                if (didMount) {
                    didMount.apply(this);
                }
                
                Object.entries(logMap).forEach([k, v] =&gt; {
                    if (document.getElementById(k)) {
                        console.log('事件曝光', v);
                    }
                })
            }
            
            render() {
                return super.render();
            }
        }
    }
}
class Index extends Component {
    render() {
        &lt;div&gt;
            &lt;div id="my_text"&gt;这是一个文字信息&lt;/div&gt;
            &lt;button id="my_btn"&gt;这是一个按钮&lt;/button&gt;
        &lt;/div&gt;
    }
}

const LogIndex = logProps({
    my_text: 'my_text_show',
    my_btn: 'my_btn_show'
})(Index)</code></pre></div><h2>渲染优化</h2><h3>类组件 类似于useMemo</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">import React, { Component } from 'react'
export default class renderControl extends Compoent {
    
    constructor(props) {
        super(props);
        this.state = {
            num: 0,
            count: 0
        }
        
        this.component = &lt;Child num={this.state.num}&gt;
    }
    
    controlRender = () =&gt; {
        const { props } = this.component;
        if (props.num !== this.state.num) {
            return this.component = React.cloneElement(
                this.component,
                { num: this.state.num }
            )
        }
    }
    
    render() {
        
        const { num, count } = this.state;
        
        return &lt;div&gt;
            {this.controlRender()}
            &lt;button onClick={() =&gt; this.setState({ num: num + 1 })}&gt;{num}&lt;/button&gt;    
            &lt;button onClick={() =&gt; this.setState({ count: count + 1 })}&gt;{count}&lt;/button&gt;    
        &lt;/div&gt;
    }
}

const Child = ({ num }) =&gt; {
    console.log('子组件执行');
    return &lt;div&gt;{ num }&lt;/div&gt;
}
<br></code></pre></div><h3>函数组件 - useMemo</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">import React, { Component, useState } from 'react'
export default function renderControl() {
    
    const [ num, setNum ] = useState(0);
    const [ count, setCount ] = useState(0);
    
    return &lt;div&gt;
            {useMemo(() =&gt; &lt;Child num={num} /&gt;, [num])}
            &lt;button onClick={() =&gt; this.setState({ num: num + 1 })}&gt;{num}&lt;/button&gt;    
            &lt;button onClick={() =&gt; this.setState({ count: count + 1 })}&gt;{count}&lt;/button&gt;    
        &lt;/div&gt;

    
}

const Child = ({ num }) =&gt; {
    console.log('子组件执行');
    return &lt;div&gt;{ num }&lt;/div&gt;
}

<br></code></pre></div><h3>useMemo</h3><p>函数：返回值进行缓存；</p><p>Deps: 依赖项改变了，我就再次执行；</p><h3>useCallback</h3><p>函数：函数进行缓存</p><p>Deps: 依赖项改变了，我就再次执行；</p><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">import React, { useCallback, useState } from 'react';

export default function RenderControl() {
    
    const [num, setNum] = useState(0);
    const [count, setCount] = useState(0);
    
    const handleChange = useCallback(() =&gt; {
        setCount(count =&gt; count + 1);
    }, [])
    
    return (
        &lt;div&gt;
            &lt;MemoChild onChange={handleChange} /&gt;
            &lt;button onClick={() =&gt; setNum(num + 1)}&gt;{num}&lt;/button&gt;
            &lt;button onClick={() =&gt; setCount(count + 1)}&gt;{count}&lt;/button&gt;
        &lt;/div&gt;
    )
}

const Child = ({ num, onChange }) =&gt; {
    console.log('子组件执行');
    return &lt;div&gt;
        &lt;button onClick={() =&gt; onChange()}&gt;
            onChange
        &lt;/button&gt;
    &lt;/div&gt;
}

const MemoChild = React.memo(Child);
<br></code></pre></div>

React高级用法

<h1>React基础</h1><p><img src="http://ragga-1257766585.cos.ap-guangzhou.myqcloud.com/blog/1715185935426_image.png" alt="image" contenteditable="false"><br></p><p><br></p><p>React更新视图的流程 是 一层一层查找 到对应的视图做更新</p><h2>如何生成React工程</h2><div data-language="bash" class="toastui-editor-ww-code-block"><pre><code data-language="bash">//    生成简单的react
npx create-react-app react-app

//    生成typescript的react
npx create-react-app react-app-ts --template typescript</code></pre></div><h2>React的基本能力</h2><h3>父子组件</h3><div data-language="bash" class="toastui-editor-ww-code-block"><pre><code data-language="bash">//    父组件App
import './App.css';
import FuncCom from './basic/FuncCom';
import ClassCom from './basic/ClassCom';

function App() {
    return (
        &lt;div className="App"&gt;
            &lt;ClassCom /&gt;
            &lt;FuncCom /&gt;
        &lt;/div&gt;
        
    );
}

export default App;


//    子组件ClassCom
import React, { Component } from 'react';

export default class ClassCom extends Component {

    render() {
        return (
            &lt;div&gt;ClassCom&lt;/div&gt;
        )
    }
}


//    子组件FuncCom
export default function FuncCom() {
    return (
        &lt;div&gt;FuncCom!!&lt;/div&gt;
    )
}</code></pre></div><h3>State</h3><p>state等同于vue中的data   state需要用特定的方法进行更新</p><h3>类组件</h3><p>必须使用setState方法。</p><p>State的值，互相不影响</p><p>第二个参数，是一个callback，能拿到state</p><p>注意 这里setState是一个异步方法</p><h3>函数调用在类组件的坑</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">import React, { Component } from 'react';

export default class ClassCom extends Component {

    constructor(props) {
        super(props);

        this.state = {
            number: 0,
            message: '1223'
        }
    }
    
    handleClick() {
        this.setState({
            number: this.state.number + 1
        })
    }
    handleClickFn = function() {
        this.setState({
            number: this.state.number + 1
        })
    }
    
    handleFn = () =&gt; {
        this.setState({
            number: this.state.number + 1
        })
    }

    render() {
        
        const { number, message } = this.state;
        return (
            &lt;div&gt;
                ClassCom{ number }
                {/** 这里如果要调用原型上的方法 那么需要bind this 要不然调用这个函数内会找不到this */}
                &lt;button onClick={this.handleClick.bind(this)}&gt;
                    {message}
                &lt;/button&gt;
                {/** 同理 如果是函数时声明的变量也需要bind this */}
                &lt;button onClick={this.handleClickFn.bind(this)}&gt;
                    {message}
                &lt;/button&gt;
                {/** 如果调用箭头函数 那么直接写就行了  */}
                &lt;button onClick={this.handleFn}&gt;
                    {message}
                &lt;/button&gt;
            &lt;/div&gt;
            
        )
    }
}</code></pre></div><h3>双向绑定</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">import React, { Component } from 'react';

export default class ClassCom extends Component {

    constructor(props) {
        super(props);

        this.state = {
            number: 0,
            message: '1223'
        }
    }
    
    handleChange = (event) =&gt; {
        this.setState({
            message: event.target.value
        })
    }
    
    
    render() {

        const { number, message } = this.state;
        return (
            &lt;div&gt;
                &lt;input value={message} onChange={this.handleChange} /&gt;
            &lt;/div&gt;
            
        )
    }
}</code></pre></div><h3>函数组件</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">[state, dispatch] = useState(initState);
//    state: 作为组件的状态，提供给UI渲染视图；
//    dispatch: 用户修改state的方法，同时触发组件更新；
//    参数可以是函数，可以不是，如果是函数，就更新为函数执行的结果，如果不是，直接更新为值。
//    initState：初始值
//    可以是函数可以不是 同dispatch一样


import { useState } from "react"

export default function FuncCom() {

    const [ number, setNumber ] = useState(0);
    const [ message, setMessage ] = useState('哈哈哈');

    function handleSetNumber(type) {
        if (type === '+') {
            setNumber(number + 1)
        } else {
            setNumber((v) =&gt; v - 1)
        }
    }

    return (
        &lt;div&gt;
            FuncCom!!
            { number }
            { message }

            &lt;button onClick={() =&gt; handleSetNumber('+')}&gt;
                加
            &lt;/button&gt;
            &lt;button onClick={() =&gt; handleSetNumber('-')}&gt;
                减
            &lt;/button&gt;
        &lt;/div&gt;
    )
}</code></pre></div><h3>Props 父子组件传值工具</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">//    父组件App
import './App.css';
import FuncCom from './basic/FuncCom';
import ClassCom from './basic/ClassCom';

function App() {
    return (
        &lt;div className="App"&gt;
            &lt;ClassCom name="123" count={111} /&gt;
            &lt;FuncCom
                name="123"
                count={111}
                slotxx={(&lt;div&gt;6666&lt;/div&gt;)}
            /&gt;
        &lt;/div&gt;
        
    );
}

export default App;


//    子组件ClassCom
import React, { Component } from 'react';

export default class ClassCom extends Component {
    
    constrcutor(props) {
        super(props);
    }
    
    render() {
        return (
            &lt;div&gt;
                { this.props.name }
                { this.props.count }
                ClassCom
            &lt;/div&gt;
        )
    }
}


//    子组件FuncCom
export default function FuncCom(props) {
    return (
        &lt;div&gt;
            { props.name }
            { props.count }
            FuncCom!!
            {props.slotxx}
        &lt;/div&gt;
    )
}</code></pre></div><h3>声明周期</h3><h4>类组件</h4><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">//    初始化阶段
//    constructor执行
//    初始化state, 初始化一些其他数据

//    合并state和props
static getDerivedStateFromProps(props, state) {
    return {
        ...
    }
}

//    类似于vue的beforeMount
//    如果类中有了getDerivedStateFromProps 那么这个声明周期不会被执行
componentWillMount() {
}

//    类似于vue的mounted
componentDidMount() {
}


/** 更新阶段  */
/** getDerivedStateFromProps存在的时候 该函数不执行  */
componentWillReceiveProps() {
}
/** 相当于是一个拦截器，返回bool值  */
shouldComponentUpdate() {
}
componentWillUpdate() {}
componentDidUpdate() {}

/** 销毁阶段  */
componentWillUnmount() {}</code></pre></div><h3>函数组件</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">//    useEffect
//    有点像vue中的watch
useEffect(() =&gt; destory, deps);


import React, { useEffect, useState } from 'react';
export default function FuncLifeCycle(props) {
    
    const [ state, setState ] = useState(() =&gt; {
        console.log('getDerivedStateFromProps');
    });
    
    useEffect(() =&gt; {
        console.log('componentDidMount');
        return () =&gt; {
            console.log('componentWillUnMount');
        }
    }, [])
    
    useEffect(() =&gt; {
        console.log('componentWillReceiveProps');
    }, [props])
    
    useEffect(() =&gt; {
        console.log('componentDidUpdate');
    })
}</code></pre></div><p>Effect是如何模拟声明周期的？</p><p>上述代码即可!</p>

React - 基础学习

<h1>Vue源码</h1><p>观察者模式 &amp; 发布订阅</p><p>观察者模式：中心一对多 + 系统单点间的灵活和拓展（广播的方式）</p><p>发布订阅：将注册列表遍历发布给订阅者</p><p><br></p><p><img src="http://ragga-1257766585.cos.ap-guangzhou.myqcloud.com/blog/1715185769402_image.png" alt="image" contenteditable="false"><br></p><h2>initInject  initState initProvide他们挂载顺序为什么这样设计？</h2><p>initstate 是将 data | props &amp; methods &amp; watch | computed 初始化</p><p>那么你需要 provide 就必须要存在 data | props..等等初始化数据</p><h3>inject 为什么要在 initstate 之前呢？</h3><p>因为如果我们当前实例有用到 Inject 的地方 那么必须要先 inject 才能操作它</p><h2>Vue3做了哪些优化</h2><h4>源码结构上：</h4><p>monorepo（原子结构 可独立拆分引用）（可作业务上的拆分）</p><h4>性能上：</h4><p>移除了很多使用率比较低的api</p><p>tree-shaking =&gt; 打包产物优化 按需引入</p><h4>编译上：</h4><div data-language="text" class="toastui-editor-ww-code-block"><pre><code>compoile阶段   静态模板 进行分析 =&gt; 分析树 &lt;= PatchFlag</code></pre></div><h4>数据劫持上：</h4><div data-language="text" class="toastui-editor-ww-code-block"><pre><code>Object.defineProperty 本身无法检测对象属性的增加或者删除
Vue2使用$set $delete  数组 push pop ... 层级较深 =&gt; 递归遍历
Vue3 proxy =&gt; 底层优化</code></pre></div><h4>模板编译分段</h4><p>词法分析阶段： template（baseCompile =&gt; baseParse） =&gt; AST</p><p>指令和语法的转化阶段（transform =&gt; node节点打标签）： AST =&gt; 解析不同的节点进行区分 =&gt; 不同类型转化</p><p>可执行函数的生成阶段（generate）：转化后的AST生成渲染函数</p><h4>基于Proxy的响应式</h4><p>数据劫持 | 数据响应(reactive)：数据变化 =&gt; 函数监听执行</p><p>依赖收集（effect）</p><p>当前vm实例上挂载effect =&gt; 当前activeEffect切换为effect =&gt; 在effect上创建deps</p><p>属性，用于传递依赖</p><h2>Vue2中 Watcher和Dep之间怎么处理的？</h2><p><img src="http://ragga-1257766585.cos.ap-guangzhou.myqcloud.com/blog/1715185783352_image.png" alt="image" contenteditable="false"><br></p><p><br></p><p>本质上就是 当render函数读取getter响应式变量的时候  会触发依赖收集 创建一个Watcher</p><p>当这个变量被setter的时候 会告诉Watcher去让组件重新生成render函数</p><h3>手写一个响应式</h3><div data-language="js" class="toastui-editor-ww-code-block"><pre><code data-language="js">class Vue {
    constructor(options) {
        const data = options.data
        this._data = data

        // 数据劫持 =&gt; initData
        _proxy(this, '_data', data)

        // 核心逻辑
        observe(data)

        new Watch(this, function() {
            return data.name + '创建响应式'
        }, function() {
            console.log('watch cb:', this.value)
        })
    }
}

const _proxy = function(vm, sourceKey, data) {
    const keys = Object.keys(data);

    keys.forEach(key =&gt; {
        Object.defineProperty(vm, key, {
            get() {
                return vm[sourceKey][key]
            },
            set(val) {
                vm[sourceKey][key] = val
            }
        })
    })
}

const observe = function(data) {
    const ob = new Observer(data)
}

class Observer {
    constructor(data) {
        this.walk(data)
    }
    walk(data) {
        Object.keys(data).forEach(key =&gt; {
            defineReactive(data, key)
        })
    }
}

const defineReactive = function(obj, key) {
    let val = obj[key]
    const dep = new Dep()

    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
            console.log('依赖收集')
            dep.depend()
            return val
        },
        set(newVal) {
            console.log('派发更新')
            val = newVal
            dep.notify()
        }
    })
}

class Dep {
    constructor() {
        this.id = Dep.uid++
        this.subs = []
    }

    addSub(sub) {
        this.subs.push(sub)
    }

    depend() {
        if (Dep.target) {
            Dep.target.addDep(this)
        }
    }

    notify() {
        this.subs.forEach(sub =&gt; sub.update())
    }

    removeSub(sub) {
        const subIndex = this.subs.indexOf(sub)
        this.subs.splices(subIndex, 1)
    }
}
Dep.uid = 0
Dep.target = null

class Watch {
    constructor(vm, render, cb) {
        this.vm = vm
        this.render = render
        this.cb = cb

        this.deps = []
        this.depsIds = new Set()
        this.newDeps = []
        this.newDepsIds = new Set()

        this.value = this.get()
        this.cb(this.value)
    }

    get() {
        Dep.target = this
        this.newDeps = []
        this.newDepsIds = new Set()

        const value = this.render()

        Dep.target = null
        this.deps.forEach(oldDep =&gt; {
            const notExistInNewDeps = !this.newDepsIds.has(oldDep.id)
            if (notExistInNewDeps) {
                oldDep.removeSub(this)
            }
        })
        this.deps = this.newDeps
        this.depsIds = this.newDepsIds

        return value
    }

    addDep(dep) {
        const depId = dep.id
        if (!this.newDepsIds.has(depId)) {
            this.newDeps.push(dep)
            this.newDepsIds.add(depId)

            if (!this.depsIds.has(depId)) {
                dep.addSub(this)
            }
        }
    }

    update() {
        this.value = this.get()
        this.cb(this.value)
    }
}

let zhaowa = new Vue({
    data: {
        name: 'yy',
        course1: 100,
        course2: 99
    }
})

zhaowa.course1 = 1
zhaowa.course2 = 2</code></pre></div>