日常踩坑

window10系统，android studio中动过SDK版本后，yarn android无法自动启动模拟器。
https://github.com/facebook/react-native/issues/43320#issuecomment-2011072921

rn项目yarn andoird无法自动打开模拟器问题

周六(2024-03-09)凌晨5点多吧快天亮了，被一条邮箱信息吵醒了，迷迷糊糊打开手机看了一眼，planetScale发来的，一开始以为是数据库长时间没用冻结之类的，点进去结果发现是免费数据库停止服务的提醒。

开始着手数据迁移，先是找到vercel一个免费的256mb postgres数据库，但是数据迁移不太顺利，首先是navicat连接数据库要16以上的版本，或者要修改libcc.dll文件，存在无法备份数据问题（未解决），数据迁移还存在自增id问题，导致无法插入新数据。

后来发现社区推荐的tidbcloud也能免费，而且是 5g5个集群，等于25g！！！
迁移过程也很顺利！！！

planetScale数据库不能白嫖了！迁移至tidbcloud

生活杂谈

蒜第二季还要多久呢

nextjs都更新到14了，要不等蒜第二季出了重构一下博客~~~

技术栈也多了个react-native

dota2太久没玩重新定位到统帅了，虽然前段时间打回了超凡，冠绝还有点遥远。。。开黑班子也散了~~~~



快一年了~~~~

PC硬件

## 配置列表
- cpu: i5-12600kf
- 主板: 华硕b660m 重炮手 ddr4
- 内存: 光威8g*2 3600
- 固态: 西数SN770 1T
- 电源: 长城750w 金牌全模组
- 散热: 瓦尔基里 c240w
- 机箱：半岛铁盒w3
- 显卡: 旧的750ti 等40系

## 装机遇到的问题和解决
只要接了任意usb设备就不能进入bios。未装系统情况下直接黑屏；已装系统情况下，能进系统，开机按f2进bios直接黑屏。

经过排查，怀疑是750ti或其使用的显示器连接线缆兼容性问题导致的。解决办法就是不接任何usb设备后进入bios，开启csm兼容。

记录下装机踩坑

经验记录

## 需求描述
开发一个在线聊天功能，打开会话时，消息内容容器固定高度，当消息列表数量超过内容容器高度时，出现滚动条，并且滚动条默认在最下方。

## 实现方案
### 1. 列表正常渲染，通过js控制滚动逻辑
这种方法最好理解和比较简单，通过调用dom的api让滚动条滚动到最底部即可。但是会存在一个小问题，当消息列表数据更新时，有概率滚动条会从顶部瞬间移动到底部，会造成一种像闪屏的感觉。 可以在切换会话时设置opacity为0，消息列表渲染完成后再设置回1来解决。
> react例子
```ts
// 判断是否进行滚动到底部
const isReacthBottom = useRef(true);

useEffect(() => {
    isReacthBottom.current = true;
}, [sessionName]);

// 当列表数据发生改变时，手动让滚动条滚动到最下方
useEffect(() => {
    if (isReacthBottom.current) {
      wrapperRef.current!.scroll({ top: wrapperRef.current!.scrollHeight });
    }
}, [list]);

// 参考微信PC端，当前会话如果往上滚动了，有新消息来不进行滚动
useEffect(() => {
    const fn = () => {
      if (
        wrapperRef.current!.scrollTop + wrapperRef.current!.clientHeight ===
        wrapperRef.current!.scrollHeight
      ) {
        isReacthBottom.current = true;
      } else {
        isReacthBottom.current = false;
      }
    };
    wrapperRef.current!.addEventListener('scroll', fn);

    return () => {
      // eslint-disable-next-line react-hooks/exhaustive-deps
      wrapperRef.current!.removeEventListener('scroll', fn);
    };
}, []); 
  
  // 参考dom结构
  <div className="online-chat-content">
      <div className="header">{sessionName}</div>
      <div className="content" ref={wrapperRef}>
        {list.map((message, i, mapArray) => {
          const img = message.position === 'left' ? logo : avatar;
          const showTime =
            i === 0 || isTwoTimeDiffGt5Minutes(mapArray[i].time, mapArray[i - 1].time);

          return (
            <div key={message.id} className="content-item" style={{ opacity: showMsg ? 1 : 0 }}>
              {showTime && (
                <div className="content-time">
                  <span>{moment(message.time).format('YYYY-MM-DD HH:mm:ss')}</span>
                </div>
              )}
              <div
                className={cn(['content-message', message.position])}
              >
                <img width={30} src={img} alt="" />
                <div className="message">{message.content}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
```

### 2. 通过flex-direction: column-reverse 解决
这种方法可以让滚动条默认从下往上，但是有浏览器兼容性问题，部分浏览器会出现content容器无法滚动的问题，并且还需要对渲染的列表数据进行reverse反转。

> 参考dom结构
```html
<div class="content">
    <div class="message-item">1</div>
    <div class="message-item">2</div>
    <div class="message-item">3</div>
</div>
```
> css代码

```css
.content {
    display: flex;
    flex-direction: column-reverse;
    /** 
    * 为什么要使用max-height？
    * 因为当消息列表数据不足以形成滚动条时，消息会从下往上渲染，max-height可以完美解决
    */ 
    max-height: 500px;
    overflow-y: auto;
}
.message-item {
    height: 300px;
    flex-shrink: 0;
    flex-grow: 0;
}
```

### 3. 通过 transform 反转来解决 (目前我项目中使用的方法)
方法2的上位替代，主要使content容器进行翻转，然后使里面的message容器再翻转一次（回正）。
> 参考dom结构

```html
<div class="content">
    <div class="message-item">1</div>
    <div class="message-item">2</div>
    <div class="message-item">3</div>
</div>
```
> 参考css代码

```css
.content {
    max-height: 500px;
    overflow-y: auto;
    transform: scale(1, -1);
}
.message-item {
    height: 300px;
    transform: scale(1, -1);
}
```
**此种方法可以很简单的内容从下往上渲染，但是需要将列表数据reverse反转，并且由于content容器反转了，导致滚动条滚动方向反过来了，需要通过几行js代码来解决。**
> 参考js代码

```js
const fn = (e) => {
  if (e.deltaY) {
    e.preventDefault();
    e.currentTarget.scrollTop -=
      parseFloat(getComputedStyle(e.currentTarget).getPropertyValue('font-size')) *
      (e.deltaY < 0 ? -1 : 1) *
      3;
  }
};
const content = document.querySelector('.content')
content.addEventListener('wheel', fn)
```

开发聊天室功能，聊天消息滚动默认从下往上的问题探讨

# 手动更新
- 使用router.push跳转不会马上看到revalidate更新结果，需要手动刷新页面。而使用Link标签可以立马看到更新结果。
- 页面revalidate后，如果Link跳转页面时携带query参数，会导致不能立马看到更新结果，需要手动刷新页面才能看到更新内容。
- 使用postman调用revalidate可以更新吗？可以，但是与请求的地址有没有www有关系，可以在vercel配置域名无www的时候重定向到有www。与http协议无关。

# 自动更新
简单总结就是在请求一个页面之后，当时间超出revalidate设定的值，下一次请求该页面的内容将会更新。
> [参考链接](https://reactions-demo.vercel.app/)


nextjs中Incremental Static Regeneration踩到的坑！

前端技术

## 注入参数

```ts
// 向组件注入primaryColor: 'pink'参数
interface WithThemeProps {
    primaryColor: string
}

export function withTheme<T>(WrappedComponent: React.ComponentType<T & WithThemeProps>) {
    // Try to create a nice displayName for React Dev Tools.
    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'

    // Creating the inner component. The calculated Props type here is the where the magic happens.
    const ComponentWithTheme = (props: Omit<T, keyof WithThemeProps>) => {
        // Fetch the props you want to inject. This could be done with context instead.
        const themeProps = {
            primaryColor: 'pink',
        }
        // props comes afterwards so the can override the default ones.
        return <WrappedComponent {...themeProps} {...(props as T)} />
    }

    ComponentWithTheme.displayName = `withTheme(${displayName})`

    return ComponentWithTheme
}
```

## 增强参数

```ts
// 给组件增加loading参数
interface EnchanceProps {
    loading: boolean
}

const enchanceLoading = <T extends {}>(WrappedComponent: React.ComponentType<T>) => {
    const ComponentWithLoading = (props: T & EnchanceProps) => {
        const { loading } = props

        return loading ? <div>loading.....</div> : <WrappedComponent {...props} />
    }

    return ComponentWithLoading
}
```

## 注入和增强使用

```ts
const A = (props: { a?: string } & WithThemeProps) => {
    return <div>{props.primaryColor}</div>
}

const AwithTheme = withTheme(A)

const LoadingA = enchanceLoading(AwithTheme)

const B = () => {
    return <LoadingA loading={true}></LoadingA>
}
```

React高阶组件之注入和增强使用示例

1、 打开巴哈网站
2、 按F12打开控制台复制下面代码到控制台，按回车。**(代码最后一行30868改为你要下载弹幕的视频地址上"sn="后面那串数字)**
3、 等待片刻，控制台会输出一串xml字符串，点击copy复制。
4、 电脑上新建一个.txt文件，粘贴xml字符串进入，删掉开头和结尾的引号。
5、 修改后缀名为.xml，打开弹弹play导入弹幕即可。

```js
function domToStirng(dom) {
    const div = document.createElement('div')
    div.appendChild(dom)
    return div.innerHTML
}

const getDmXml = async (sn) => {
    const formData = new FormData()
    formData.append('sn', sn)

    const res = await fetch('https://ani.gamer.com.tw/ajax/danmuGet.php', {
        method: 'POST',
        body: formData,
    }).then((res) => res.json())

    const dList = res
    let i = `<i xmlns:xsp="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><chatserver>chat.bilibili.com</chatserver><chatid>10000</chatid><mission>0</mission><maxlimit>8000</maxlimit><source>e-r</source><ds>931869000</ds><de>937654881</de><max_count>8000</max_count>`

    dList.forEach((item) => {
        let d = document.createElement('d')
        d.setAttribute('p', `${item.time / 10},1,25,16777215,1659830799719,0,0,0`)
        d.innerText = item.text
        i += domToStirng(d)
    })

    i += '</i>'

    return (`<?xml version="1.0"?>` + i).replaceAll('<br>', '')
}
// 下面30868改为你要下载弹幕的视频地址上"sn="后面那串数字
await getDmXml('30868')

```