小编Joj*_*oji的帖子

我有一个问题useRef：如果我添加ref.current到 的依赖项列表中useEffect，并且当我更改了 的值时ref.current，useEffect将不会触发内部的回调。

例如：

export default function App() {
  const myRef = useRef(1);
  useEffect(() => {
    console.log("myRef current changed"); // this only gets triggered when the component mounts
  }, [myRef.current]);
  return (
    <div className="App">
      <button
        onClick={() => {
          myRef.current = myRef.current + 1;
          console.log("myRef.current", myRef.current);
        }}
      >
        change ref
      </button>
    </div>
  );
}

不应该是当useRef.current变化时，里面的东西useEffect就会运行吗？

另外，我知道我可以用useState在这里。这不是我要问的。而且我也知道ref在重新渲染期间保持参照不变，所以它不会改变。但我不是在做类似的事情

 const myRef = useRef(1);
  useEffect(() …

我了解到，在 HTTP1.1 下，每个主机名（来源？）的默认同时持久连接的最大数量将为 6，至少对于 chrome 来说是这样。我并不是询问限制的确切数量，因为我知道它因浏览器而异。我更好奇什么时候我们将为新请求打开一个新连接 - 浏览器是否会以某种方式重用相同的 TCP 连接，或者它总是启动一个新的 TCP 连接，除非它尚未达到并发请求的限制？

假设我们正在使用 HTTP1.1 并且我们Connection: Keep-Alive 在 html 中有 if

<script src="https://foo/foo1.js"></script>
<script src="https://foo/foo2.js"></script>
<script src="https://foo/foo3.js"></script>
<script src="https://foo/foo4.js"></script>
<script src="https://foo/foo5.js"></script>
<script src="https://foo/foo6.js"></script>
<script src="https://foo/foo7.js"></script>

每个脚本都会导致建立一个新的 TCP 连接，还是所有后续请求都将重用第一个脚本选项卡建立的第一个 TCP 连接？如果这些脚本中的每一个都导致建立一个新的 TCP 连接，则考虑到浏览器的并发请求限制为 6，第 7 个请求是否必须等到第 6 个请求完成才能建立连接？

上面的例子是从 HTML 标签发起请求。从 JavaScript 进行的 api 调用怎么样？让我们在 javascript 中

const result1 = apiCall1()
const result2 = apiCall2()
const result3 = apiCall3()
const result4 = apiCall4()
const result5 = apiCall5()
const result6 = apiCall6() …

正在查看这个V8 设计文档，其中有一个部分Constant Pool Entries

它说

\n

常量池用于存储堆对象和小整数，这些对象和小整数在生成的字节码中作为常量引用。\n

\n

\n

...小整数和强引用的奇怪类型\xe2\x80\x99s 有字节码可以直接加载它们，并且不会进入常量池。

\n

所以我很困惑：小整数是否被合并？

我的理解是，如果sizeof(int) < sizeof(int *)- 因为只复制实际整数而不是复制指向常量池中整数的指针更便宜，所以不值得池化小整数。此外，保存整数的变量可以优化为直接存储在 CPU 寄存器中，并跳过首先在内存中分配。

另外，它们位于 V8 堆还是堆栈上？我的理解一直是 smis 只是在堆栈上分配的立即值，而不是在堆上分配的指针+整数。另外，如果您使用 chrome devtool 拍摄堆快照，则无法在堆快照中找到 smis - 只有堆编号（例如大整数或双精度（如 3.14））位于堆上，直到我看到这篇文章https://v8.dev/blog/pointer -压缩#v8 中的值标记

\n

V8 中的 JavaScript 值都表示为对象并分配在 V8 堆上，无论它们是对象、数组、数字还是字符串。这允许我们将任何值表示为指向对象的指针。

\n

现在我很困惑 - smis 也分配在堆上吗？

这是现场演示：https://codesandbox.io/s/vigorous-rgb-u860z ?file=/src/index.ts

enum Keys {
  One = "one",
  Two = "two"
}

const a = Object.values(Keys).map((value, index) => ({
  label: value,
  id: String(index)
})) as const;

这是错误消息

“const”断言只能应用于对枚举成员、字符串、数字、布尔值、数组或对象文字的引用。

我不确定我在这里缺少什么，因为Object.values确实返回了一个数组。为什么我不能对其进行 const 断言

我有一个像这样的异步重击

export const updateIndexingConfig = createAsyncThunk(
  "settings/updateIndexingConfig",
  (config: UpdateIndexingConfigurationRequest) => {
    return sdkClient.updateIndexingConfiguration(config).promise();
  }
);

如果有错误消息，更新请求可以返回错误消息。将updateIndexingConfiguration.promise()返回一个承诺。当用户单击此按钮时会调度它

<Button
  onClick={async () => {
    if (!isFormValid()) return;
    const updateIndexingConfigResponse = await dispatch(
      updateIndexingConfig(constructUpdateIndexingConfigRequest(indexingConfig))
    );
    if(updateIndexingConfigResponse.error) {
      // ... show error banner 
    } else {
      window.location.href = "#/settings/";
    }
  }}
>
  Update
</Button>;

TypeScript 编译器在这一行给了我这个错误，if(updateIndexingConfigResponse.error) 说

类型“AsyncThunkAction<any, UpdateIndexingConfigurationRequest, {}>”上不存在属性“错误”。

我认为这是由于SDK没有定义响应类型。但通过阅读其文档，我知道当出现问题时，响应可能会出现错误消息。所以我很快自己做了一个

interface UpdateIndexingConfigurationResponse {
  error?: {
    message: string;
  };
  [key: string]: any;
}

我在 thunk 处添加了它

export const updateIndexingConfig = createAsyncThunk(
  "settings/updateIndexingConfig", …

我有一个可以提供一些价值的输入。我需要检查该值是否存在，换句话说，输入字段中至少应该有一个字符/字母。

我在赛普拉斯有一个这样的测试

cy.get('input').should('be.visible').and(($input) => {
  expect($input).to.have.value('')
})

这不起作用，因为此测试检查该值是否恰好是''. 我想要的是该值的长度至少应为 1/ 非空。有办法做到吗？

我正在尝试编写一个函数，它遍历字符串列表并返回列表中前 10 个最常用的字符串。我正在尝试为这个问题提出多种解决方案

这是我的第一个解决方案

const list = [
    "this",
    "is",
    "a",
    "test",
    "which",
    "word",
    "wins",
    "top",
    "i",
    "don't",
    "know",
    "off",
    "hand",
    "do",
    "you",
    "this",
    "a",
    "a",
    "this",
    "test",
    "a",
    "a",
    "do",
    "hand",
    "hand",
    "a",
    "whatever",
    "what",
    "do",
    "do"
  ];

function fn1(strArr) {
    const map = new Map()
    for(const str of strArr) {
        if(map.has(str)) {
            map.set(str, map.get(str) + 1)
        } else {
            map.set(str, 1)
        }
    }
    const sortedMap =[...map.entries()].sort(([_,a], [__,b]) => a < b ? 1 : -1)
    return sortedMap.slice(0 , …

我有一个我想测试的重试 util 函数。看起来像这样

export const sleep = (t: number) => new Promise((r) => setTimeout(r, t));

type RetryFn = (
  fn: Function,
  config: {
    retryIntervel: number;
    retryTimeout: number;
    predicate: Function;
    onRetrySuccess?: Function;
    onRetryFail?: Function;
  }
) => Promise<any>;

export const retry: RetryFn = async (
  fn,
  { predicate, onRetrySuccess, onRetryFail, retryIntervel, retryTimeout }
) => {
  const startTime = Date.now();
  let retryCount = 0;
  while (Date.now() - startTime < retryTimeout) {
    try {
      const ret = await fn();
      if (predicate(ret)) { …

我有一个图像 url 数组，我想按照数组中相应 URL 的放置顺序在网页上显示这些图像。

例如，我们有

const imgUrls = [
  "https://picsum.photos/400/400",
  "https://picsum.photos/200/200",
  "https://picsum.photos/300/300"
];

在这种情况下，我们希望显示400/400first、then200/200和last 300/300。

如果我们天真地实现它，那么顺序就无法保证。

function loadImages(imgUrls, root) {
  imgUrls.forEach((url) => {
    const image = document.createElement("img");
    image.onload = () => {
      root.append(image);
    };
    image.src = url;
  });
}

所以我使用 Promises 来管理异步流程控制

async function loadImagesInOrder(imgUrls, rootEl) {
  const promises = imgUrls.map(
    (url) =>
      new Promise((resolve, reject) => {
        const image = document.createElement("img");
        image.onload = resolve;
        image.onerror = reject;
        image.src = url;
      })
  );

  for …

例如：

<body>
  ...all content is above the script...
  <script src="https://foo/bar.js" defer></script>
</body>

defer如果我们从 script 标签中删除 ，有什么关系吗？通过将脚本放在 body 标记的末尾已经延迟了脚本的执行，因此上面的代码应该与下面的代码片段相同，对吧？

<body>
  ...all content is above the script...
  <script src="https://foo/bar.js"></script>
</body>