尝试在没有工作记忆的情况下进行思考和学习

via LINUX DO - 最新话题 (author: Kai)

React Hooks的个人理解

发布一个关于React Hooks的个人简介，因为我确实没写过React但是打算先学一些知识。请佬友们多多指正。

React Hooks

useState

useState是React提供的一个用于管理状态的Hook。 它接收一个初始值，并返回一个数组，数组中包含两个元素：一个是当前状态值，一个是更新状态的函数。

const [count, setCount] = useState(0);

1. 它出现解决了什么问题

● 在React中，状态管理是一个非常重要的问题。在React 16.8之前，状态管理通常使用类组件来实现。类组件虽然可以管理状态，但是存在一些问题： 1. 状态逻辑难以复用 2. 状态逻辑难以维护 3. 状态逻辑难以理解 4. 状态逻辑难以调试 5. 状态逻辑难以优化 useState的出现让这些变得简单，更容易维护和理解。

2. useState的state到底存放在哪？它是怎么做到响应式的？

● React的每个Hook都有一个对应的Fiber节点，Fiber节点中有一个memoizedState属性，它是一个链表(你也可以叫它列表)，链表中存储了当前组件的Hook。

// 伪代码 大概就是长这样
const fiber = {
  stateNode: myComponentInstance,  // 组件实例 (如函数组件或类组件的实例)
  type: 'function',                // 组件类型（函数组件、类组件、DOM 元素等）
  props: { count: 5 },             // 组件的 props
  memoizedState: {                 // 存储 Hook 状态（每个 Hook 的缓存值）
    hook1: { value: 0 },           // 例如 useState(0)
    hook2: { value: "Alice" },     // 例如 useState("Alice")
  },
  effectTag: 'UPDATE',             // 更新类型（例如更新、插入、删除等）
  nextEffect: null,                // 下一个 effect 节点（用于链式处理副作用）
  updateQueue: [],                 // 更新队列（例如状态更新）
  return: parentFiber,             // 父组件的 fiber 节点
  child: childFiber,               // 子组件的 fiber 节点
};

● 当我们每次调用setState的时候，React会遍历Fiber节点，检查每个memoizedState的旧值是否发生变化，如果发生变化，则更新状态，并调用组件的更新函数。
● 所以说我们每次修改值，都会触发组件的更新。这样组件频繁的更新，就会导致性能问题。然而React.memo() 和 useMemo() 的出现，让我们可以优化组件的渲染。

useMemo

useMemo是React提供的一个用于记忆化计算的Hook。 它接收一个计算函数和依赖数组，当依赖数组中的值发生变化时，会重新计算计算函数的值，并返回新的值。

1. 它出现解决了什么问题?

1. 避免重复计算昂贵的计算
2. 避免组件的频繁渲染
3. 提高组件的性能

2. 它是怎么做到的？

1. 当依赖数组中的值发生变化时，会重新计算计算函数的值，并返回新的值。
2. 当依赖数组中的值没有发生变化时，会返回缓存中的值。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const computeExpensiveValue = (a, b) => {
  return a + b;
}

● 当依赖数组中的值a、b发生变化时，会重新计算计算函数的值，并返回新的值。
● 当依赖数组中的值a、b没有发生变化时，会返回缓存中的值。 当子组件引用了useMemo的值，当父组件的值发生变化时，子组件不会重新渲染。这样就解决了性能问题。

const Child = React.memo(({ memoizedValue }) => {
  return &LTdiv>{memoizedValue}&LT/div>;
});

3.useState配合useEffect不也能实现昂贵的计算吗？

● 是的，useState配合useEffect也能实现昂贵的计算。 但是有个问题，useEffect的执行时机是组件挂载后和每次更新后，而不是组件渲染时就执行的。这就导致我们Effect实现的memo会在组件挂载后才进行计算，会有效率问题。 再就是写很多的Effect，会让代码变得臃肿，难以维护。

const [count, setCount] = useState(0);
useEffect(() => {
  setCount(computeExpensiveValue(a, b));
}, [a, b]);

React.memo() 和 useMemo()

● React.memo() 是React提供的一个用于记忆化计算的组件。
● useMemo() 是React提供的一个用于记忆化计算的Hook。
● React.memo() 是用于组件的记忆化计算，而useMemo() 是用于状态的记忆化计算。
● React.memo() 和 useMemo()都是会对组件props进行浅比较也就是内存地址的比较，如果props没有发生变化，则不会重新渲染组件。

const Child = React.memo(({ props }) => {
  return &LTdiv>{props.count}&LT/div>;
});

3 个帖子 - 2 位参与者

阅读完整话题

via LINUX DO - 最新话题 (author: twelve)

好抽象啊哈哈哈哈，笑喷了，当贝AI

明明他思考里面答案是“鸡”字，但是他回答了个“坤”哈哈哈哈哈哈

4 个帖子 - 4 位参与者

阅读完整话题

via LINUX DO - 最新话题 (author: 咩噗茶)

有佬教教如何隐藏root环境吗

3 个帖子 - 3 位参与者

阅读完整话题

via LINUX DO - 最新话题 (author: gjhlmy)

情话说给耳朵听，眼睛怎么流了泪

【在百万豪装录音棚大声听 邓紫棋《11》【Hi-res】】 在百万豪装录音棚大声听 邓紫棋《11》【Hi-res】_哔哩哔哩_bilibili
【邓紫棋《红蔷薇白玫瑰》百万豪装录音棚大声听】 邓紫棋《红蔷薇白玫瑰》百万豪装录音棚大声听_哔哩哔哩_bilibili

Cause you know
爱意就像大雨落下怎么能让人不牵挂
过得好吗想说的话你能听到吗
Wow 没能陪你到最后 别再叹息皱眉头
怎么会忘掉你所有

梦里鲜红的蔷薇

睁眼是苍白的玫瑰

它躺在月亮下

纪念着曾经最真挚的爱

记忆里快乐再真切

早已被冷空气凝结

而此刻月亮下

只有伶仃的一个墓地

守护着死去的爱

这两首歌快哼一下午了 😂

8 个帖子 - 4 位参与者

阅读完整话题

via LINUX DO - 最新话题 (author: shiya)

遇到了关于MybatisPlus一个奇怪的报错，佬们帮忙看看

via LINUX DO - 最新话题 (author: Feng Da)

京东外卖地推

有没有佬做过地推的，看了下京东外卖地推，单价170，周末想搞，但是没任何地推经验

7 个帖子 - 4 位参与者

阅读完整话题

via LINUX DO - 最新话题 (author: Augest)

佬友们openwebui如何为newapi的gemini thinking模型显示思考过程，我是用newapi集合的google的key

2 个帖子 - 2 位参与者

阅读完整话题

via LINUX DO - 最新话题 (author: Burr)

一上午没进来，可急死我了

坐标苏B，不知道哪里的问题， 一上午都没进得来。一度以为出了啥事儿，我可不能失去LinuxDo啊~~~ :bili_029::bili_029::bili_029:
2 个帖子 - 2 位参与者

阅读完整话题

via LINUX DO - 最新话题 (author: Cos0)

为什么广东没有显示器国补，蹲了很久了 🙃

1 个帖子 - 1 位参与者

阅读完整话题

via LINUX DO - 最新话题 (author: Ben)

关于净水器的问题

小孩子开始喝奶都是买的农夫山泉的婴儿纯净水，现在大了些，就准备用自来水烧开了泡奶喝。
但感觉自来水的杂质较多，就打算买个净水器，想问下使用过净水器的大佬，如何检测没有净过的水和净过的水的区别，谢谢

2 个帖子 - 2 位参与者

阅读完整话题

via LINUX DO - 最新话题 (author: Tian)

最近还有没有买鸡哥的朋友

现在鸡哥品控如何了？

5 个帖子 - 3 位参与者

阅读完整话题

via LINUX DO - 最新话题 (author: 多幹點飯)

求如何在校园网内让安卓设备整机dns强制走1.1.1.1

我在安卓设备上使用了随机mac，每次重新连接校园网Wi-Fi后都没有流量，需要重新设置内网静态IP地址，已知校园网每天早3点会将所有连接设备断开，我需要强制让校园网dns地址为1.1.1.1，但是Wi-Fi和手机默认dns地址为223.5.5.5，1dot1dot1dot1.cloudflare-dns.com 会显示无法存取网络，使用dns.google会导致使用代理时dns泄露，具体表现为出现两个dns提供商：cf和google，并且导致部分应用dns回环（如QQ）走233.5.5.5

3 个帖子 - 2 位参与者

阅读完整话题

via LINUX DO - 最新话题 (author: webview)

光大银行 微信立减金 活动

首页-搜索框-权益-我的活动-超值绑，一键绑多个平台，点击活动页我的权益，跳转微信小程序，满10减4元，多邦多得。

首页-搜索框-快捷支付-点击解约平台绑定。

😀

1 个帖子 - 1 位参与者

阅读完整话题

via LINUX DO - 最新话题 (author: 王也)