https://juejin.cn/post/6844903753200451592

react 的懒加载

react hooks 用例

## 操作数组的核心思想

在 JavaScript 中，数组只是另一种对象。与 objects 一样，您应该将处于 React 状态的数组视为 read-only。

这意味着您不应该重新分配数组中的项目，例如`arr[0] = 'bird'`，也不应该使用改变数组的方法，例如`push()`和`pop()`。

相反，每次您想更新一个数组时，您都需要将一个新数组传递给您的状态设置函数。为此，您可以通过调用其非变异方法（如`filter()`和`map()`）从您所在 state 的原始数组创建一个新数组。然后您可以将您的状态设置为生成的新数组。

这里有一个常见数组操作的参考表。在处理 React 状态中的数组时，您需要避免使用左栏中的方法，而更喜欢右栏中的方法：


| 标题 |  | |
| --- | --- | --- |
|       | 避免（改变数组）| 更喜欢（返回一个新数组）
|添加   |push, unshift	|concat,[...arr]传播语法
|删除	|pop, shift, splice	|filter, slice
|更换	|splice,arr[i] = ...赋值	|map
|排序	|reverse, sort	|首先复制数组

或者，您可以使用 `Immer`，它允许您使用来自两列的方法。




:::info{title="陷阱"}
slice和splice命名相似但有很大不同：

slice  让您复制数组或其中的一部分。
splice **改变数组**（插入或删除项目）。
在 React 中，你会更频繁地使用slice（而不是 splice）
因为你不应该直接改变状态中的对象或数组。
:::


:::info{title="[...arr]是浅拷贝"}
即使你使用`[...arr]`复制了一个数组，你也不能直接改变其中的现有项。

这是因为复制是浅层的——新数组将包含与原始数组相同的项。
```js
// nextList[0]andlist[0]指向同一个对象
// 如果您修改复制数组中的对象，就会改变现有状态

const nextList = [...list];
nextList[0].seen = true; // Problem: mutates list[0]
setList(nextList);
```

这里一定要注意，可以通过更新嵌套对象来解决
详见：`更新数组中的对象`
:::

## 添加元素

你可以使用 [...arr] 进行操作，来代替
添加到数组末尾的 push()
添加到数组头部的 unshift()

```js
// 在数组后面添加

setArtists( // Replace the state
  [ // with a new array
    ...artists, // that contains all the old items
    { id: nextId++, name: name } // and one new item at the end
  ]
);
```

```js
// 在数组前面添加

setArtists([
  { id: nextId++, name: name },
  ...artists // Put old items at the end
]);
```

## 删除元素

你可以使用 filter(), 将需要的内容保留即可，来代替
删除原数组的 pop()

```js
setArtists(
  artists.filter(a => a.id !== artist.id)
);
```

## 转换、更改数组

如果要更改数组的部分或全部项目，可以使用`map()`创建一个新数组。您将传递给的函数map可以根据其数据或索引（或两者）决定如何处理每个项目。

```js
const a = [1, 5, 6]

const b = a.map(v=>{
    return v*2
})

// b ==> [2, 10 ,12]
```

## 替换元素

要替换项目，请使用 . 创建一个新数组map。在您的`map`调用中，您将收到项目索引作为第二个参数。用它来决定是否返回原始项目（第一个参数）或其他东西：

```js
let initialCounters = [
  0, 0, 0
];

const [counters, setCounters] = useState(
  initialCounters
);

const nextCounters = counters.map((c, i) => {
  if (i === index) {
    // Increment the clicked counter
    return c + 1;
  } else {
    // The rest haven't changed
    return c;
  }
});
setCounters(nextCounters);
```

## 插入元素

有时，您可能希望在既不是开头也不是结尾的特定位置插入一个项目。为此，您可以将`...`数组展开语法与`slice()`方法一起使用。该slice()方法允许您切割数组的“切片”。

要插入一个项目，您将创建一个数组
1. 该数组展开插入点之前的切片
2. 然后是新元素
3. 最后是原始数组的其余部分。

```js
const insertAt = 1; // Could be any index
const nextArtists = [
  // Items before the insertion point:
  ...artists.slice(0, insertAt),
  // New item:
  { id: nextId++, name: name },
  // Items after the insertion point:
  ...artists.slice(insertAt)
];
setArtists(nextArtists);
```

## 对数组进行其他更改

JavaScript 的 reverse()和sort()方法正在改变原始数组，因此您不能直接使用它们。

但是，您可以先复制数组，然后再对其进行更改。

```js
const [list, setList] = useState(initialList);

function handleClick() {
  const nextList = [...list];
  nextList.reverse();
  setList(nextList);
}
```

## 更新数组中对象

对象并不真正位于数组“内部”。
它们可能看起来在代码中“内部”，但数组中的每个对象都是一个单独的值，数组“指向”。这就是为什么在更改嵌套字段，另一个人的列表可能指向数组的同一个元素！

更新嵌套状态时，您需要从要更新的点开始创建副本，一直到顶层。
```js
setMyList(myList.map(artwork => {
  if (artwork.id === artworkId) {
    // Create a *new* object with changes
    return { ...artwork, seen: nextSeen };
  } else {
    // No changes
    return artwork;
  }
});
```

## 使用 immer 解决状态更改的逻辑

详细的使用可以查看 immer 的相关文档

```js
import { useImmer } from 'use-immer';

export default function BucketList() {
  const [myList, updateMyList] = useImmer(
    initialList
  );

  function handleToggleMyList(id, nextSeen) {
    updateMyList(draft => {
      const artwork = draft.find(a =>
        a.id === id
      );
      artwork.seen = nextSeen;
    });
  }

  return (
    <>
      <h1>Art Bucket List</h1>
      <ItemList
        artworks={myList}
        onToggle={handleToggleMyList} />
  );
}
```

react 中数组的操作与更改

## 背景
Docker 服务启动后默认会创建一个 docker0 网桥（其上有一个 docker0 内部接口），它在内核层连通了其他的物理或虚拟网卡，这就将所有容器和本地主机都放到同一个物理网络。

Docker 默认指定了 docker0 接口 的 IP 地址和子网掩码，让主机和容器之间可以通过网桥相互通信，它还给出了 MTU（接口允许接收的最大传输单元），通常是 1500 Bytes，或宿主主机网络路由上支持的默认值。这些值都可以在服务启动的时候进行配置.

## 为什么要修改默认网段

docker 默认指定的 docker0 的网段 ip，可能会与办公网段冲突



例如 
docker0 网段 为 172.22.22.22
办公网段 也是 172.xx.xx.xx
就有可能出现 ip 冲突的问题，或者整个 172 办公网段都不能访问该 docker 服务


## 查看 docker0 网桥
```
#查看命令
ifconfig docker0
```

![image.png](https://oss.silon.vip/img/89b7c2f55365c8201389cd003570473e.image.png)

默认docker0的网段是172.xx.xx.xx

## 修改默认网段

```
#修改文件
vi /etc/docker/daemon.json
#把{}内容修改为(ip:你想要改的网段，netmask:端口)
"bip": "ip/netmask" [ 切勿与宿主机同网段 ]
```

![image.png](https://oss.silon.vip/img/42477ec836c2cc98188d9b09a5325fe7.image.png)

完成修改后，需要重启 docker，及相关服务，例如 docker-compose
```
#重启docker
systemctl restart docker
```

到此就完成 docker 默认网段的修改，可以通过网桥查看命令查询是否成功

```
#查看命令
ifconfig docker0
```


![image.png](https://oss.silon.vip/img/6faba1718109ad867a7b92ef9435dc0c.image.png)

## 参考来源
https://www.bbsmax.com/A/mo5kVkNWJw/

修改Docker0网桥的默认网段

## 场景说明
很多时候需要对上传的图片进行信息校验，例如文件大小，图片名称、长宽等属性

文件大小、名称通过 file 对象本身就可以获得到。
图片的长、宽则需要通过读取图片本身获取



## 代码示例

```js
// 假设这里已经拿到了上传文件 file

//读取图片数据
const reader = new FileReader();
reader.onload = function (e:any) {
  const data = e.target.result;
  //加载图片获取图片真实宽度和高度
  const image = new Image();
  image.src = data;
  // 因为 image 不是赋予属性就可以直接拿到长宽属性的，所以要加上监听
  image.onload = function () {
    const width = image.width;
    const height = image.height;
    const sizeAllow = width <= 1024 && height <= 1024;
    if (sizeAllow) {
      // 触发上传
    } else {
      Modal.warning({
        title: '提示',
        content: '上传图片长宽不可超过 1024px',
      })
    }
  };
};
reader.readAsDataURL(file);  
```

标题
	避免（改变数组）	更喜欢（返回一个新数组）
添加	push, unshift	concat,[...arr]传播语法
删除	pop, shift, splice	filter, slice
更换	splice,arr[i] = ...赋值	map
排序	reverse, sort	首先复制数组