Next.js的响应有着类似于express.js的方法，方便开发

Next.js - Response Helpers


React components 由一组元素构成。

基本函数组件的编写方式与常规 `JavaScript` 函数类似，但有几个不同之处。

- 组件名称必须以大写字母开头（即 MyComponent，而不是 myComponent）。
- 与 `JavaScript` 函数不同，组件必须返回 JSX。

以下是 `React` 函数组件的基本语法：

```jsx
function App() {
  return <div>Hello world!</div>
}
```


React是一个JavaScript库，致力于使UI开发变得简单

React Components


本文将了解消息发送的工作原理，比如希望和后台进行交互。如下：

![zPmZyAzG9](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/zPmZyAzG9.gif)

修改`src/App.jsx`

```jsx
import React, {useState} from 'react'

export default function Messaging() {
  const [message, setMessage] = useState(null)
  const backgroundRequest = () => {
    chrome.runtime.sendMessage({color}, (response) => {
      setMessage(response.msg)
    })
  }

  return (
    <>
      <button onClick={backgroundRequest}>Background request</button>
      {message && (
        <>
          <p className="text-white">{message}</p>
          <br />
        </>
      )}
    </>
  )
}
```

修改`background.js`

```js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (!request.color) {
    sendResponse({msg: `You didn't set any color`})
  }

  sendResponse({msg: `You must really like the color ${request.color}`})
})
```

## Source Code

[【Source Code】](https://github.com/rebelchris/popup-extension/tree/messaging)


基于react、tailwindcss开发自己的chrome插件

Chrome插件开发 - Messaging


Vue 有很多内置指令，比如`v-for`、`v-if`，我们可以自定义类似的指令。

一个简单的自定义指令`v-bg-color`

```vue
<template>
  <h1 v-bg-color="'skyblue'">This background is blue</h1>
</template>
```

```js
import {createApp} from 'vue'
const app = createApp({})

app.directive('bg-color', {
  mounted(el, {value}) {
    // Update the background color
    el.style.background = value
  }
})
```


Vue有很多内置指令，比如v-for、v-if

自定义指令


Docker 中的网络是像容器和镜像一样的另一个逻辑对象。就像其他两个一样，在 docker network 组下有大量的命令可以操纵网络。

要列出系统中的网络，请执行以下命令：

```bash
docker network ls

# NETWORK ID     NAME      DRIVER    SCOPE
# c2e59f2b96bd   bridge    bridge    local
# 124dccee067f   host      host      local
# 506e3822bf1f   none      null      local
```

在表格中查看 DRIVER 列。这些驱动程序可以被视为网络类型。

默认情况下，Docker 有五种网络驱动程序，如下：

- bridge：Docker 中的默认网络驱动程序。当多个容器以标准模式运行并需要相互通信时，可以使用此驱动程序。
- host：完全删除网络隔离。在主机网络下运行的任何容器本质上都附加到主机系统的网络。
- none：此驱动程序完全禁用容器的网络。我还没有发现任何使用场景。
- overlay：用于连接多个 Docker 守护进程的工具，超出了本书的范围。
- macvlan：允许分配 MAC 地址给容器，使它们在网络中像物理设备一样工作。

还有第三方插件，允许您将 Docker 与专用网络堆栈集成。在上面提到的五个中，只需使用桥接网络驱动程序。


Docker - Network Basics


`Streams` 允许从源读取数据或写入数据到目标对象。在`Node.js`中有四种 stream

- `Writeable`：可写
- `Readable`：可读
- `Duplex`：双向，即可用于读写
- `Transform`：根据输入计算输出

每种类型的`stream`都是`EventEmitter`实例，在不同的实例抛出多个事件。常用的事件：

- `data`：当数据可读抛出
- `end`：当数据读取结束
- `error`：当数据读取错误
- `finish`：在调用 `stream.end()` 方法之后，并且所有数据都已刷新到底层系统

## 读取数据

```js
var fs = require('fs')
var data = ''

// Create a readable stream
var readerStream = fs.createReadStream('input.txt')

// Set the encoding to be utf8.
readerStream.setEncoding('UTF8')

// Handle stream events --> data, end, and error
readerStream.on('data', function (chunk) {
  data += chunk
})

readerStream.on('end', function () {
  console.log(data)
})

readerStream.on('error', function (err) {
  console.log(err.stack)
})

console.log('Program Ended') // Program Ended Tutorials Point is giving self learning content to teach the world in simple and easy way!!!!!
```

## 写入数据

```js
var fs = require('fs')
var data = 'Simply Easy Learning'

// Create a writable stream
var writerStream = fs.createWriteStream('output.txt')

// Write the data to stream with encoding to be utf8
writerStream.write(data, 'UTF8')

// Mark the end of file
writerStream.end()

// Handle stream events --> finish, and error
writerStream.on('finish', function () {
  console.log('Write completed.')
})

writerStream.on('error', function (err) {
  console.log(err.stack)
})

console.log('Program Ended')
```

## Pipe-管道流

`pipe`是一种机制，我们将一个`stream`的输出作为另一个`stream`的输入。它通常用于从一个`stream`中获取数据，并将该`stream`的输出传递给另一个`stream`。`pipe`操作没有限制。

```js
var fs = require('fs')

var readerStream = fs.createReadStream('input.txt')
var writerStream = fs.createWriteStream('output.txt')

readerStream.pipe(writerStream)

console.log('Program Ended')
```

## 链式流

`chaining`是一种将一个`stream`的输出连接到另一个`stream`并创建多个`stream`操作链的机制，它通常用于管道操作。

```js
var fs = require('fs')
var zlib = require('zlib')

// Compress the file input.txt to input.txt.gz
fs.createReadStream('input.txt')
  .pipe(zlib.createGzip())
  .pipe(fs.createWriteStream('input.txt.gz'))

console.log('File Compressed.')
```


Streams允许从源读取数据或写入数据到目标对象。

Node.js - Streams


V8 是由 Chromium 项目为 Google Chrome 网页浏览器开发的开源 JavaScript 引擎。它是用 C++语言编写的，并且是一个轻量级的引擎，可以在很小的内存中运行。现在，它用于很多项目，比如 Couchbase、MongoDB、Node.js，等等。

## Node.js - V8

Node.js V8 模块表示 V8 引擎的实例，可以通过 V8.createContext()方法创建一个上下文，然后通过 V8.runInContext()方法来执行 JavaScript 代码。

它提供`v8.getHeapStatistics`和`v8.getHeapSpaceStatistics`方法来获取堆空间的统计信息。

```js
const v8 = require('v8')
```

## getHeapStatistics

该方法返回关于堆的统计数据，比如堆的大小，堆的使用情况等。

```js
const v8 = require('v8')
console.log(v8.getHeapStatistics())
// {
//   total_heap_size: 8589934592,
//   total_heap_size_executable: 0,
//   total_physical_size: 8589934592,
//   total_available_size: 8589934592,
//   used_heap_size: 8589934592,
//   heap_size_limit: 8589934592,
//   malloced_memory: 0,
//   peak_malloced_memory: 0,
//   does_zap_garbage: 0
// }
```

## getHeapSpaceStatistics

该方法返回关于堆空间的统计信息，比如堆空间的大小，堆空间的使用情况等。

```js
const v8 = require('v8')
console.log(v8.getHeapSpaceStatistics())
// [
//   {
//     space_name: 'new_space',
//     space_size: 8589934592,
//     space_used_size: 0,
//     space_available_size: 8589934592,
//     physical_space_size: 8589934592
//   },
//   {
//     space_name: 'old_space',
//     space_size: 8589934592,
//     space_used_size: 0,
//     space_available_size: 8589934592,
//     physical_space_size: 8589934592
//   },
//   {
//     space_name: 'code_space',
//     space_size: 8589934592,
//     space_used_size: 0,
//     space_available_size: 8589934592,
//     physical_space_size: 8589934592
//   },
//   {
//     space_name: 'map_space',
//     space_size: 8589934592,
//     space_used_size: 0,
//     space_available_size: 8589934592,
//     physical_space_size: 8589934592
//   },
//   {
//     space_name: 'large_object_space',
//     space_size: 8589934592,
//     space_used_size: 0,
//     space_available_size: 8589934592,
//     physical_space_size: 8589934592
//   },
//   ]
```

## V8 内存管理

目前，默认情况下，v8 在 32 位系统上的内存限制为 2GB，在 64 位系统上的内存限制为 4GB。


V8是由Chromium项目为Google Chrome网页浏览器开发的开源JavaScript引擎