小编Pav*_* Ye的帖子

让我们从我最喜欢的 JavaScript 表达式开始：

[]==[] // false

现在，让我们说一下React 文档关于跳过副作用的内容：

如果某些值在重新渲染之间没有改变，你可以告诉 React 跳过应用效果。为此，将数组作为可选的第二个参数传递给 useEffect：

useEffect(() => {/* only runs if 'count' changes */}, [count])

Run Code Online (Sandbox Code Playgroud)

现在让我们考虑以下行为让我挠头的组件：

[]==[] // false

useEffect(() => {/* only runs if 'count' changes */}, [count])

添加“apple”时，这是在控制台中记录的内容：

// on first render
Fruit changed to 
Fruits changed to 

// after each keystroke of 'apple'
Fruit changed to a
Fruit changed to ap
Fruit changed to app
Fruit changed to appl
Fruit changed to apple

// ater clicking on 'add' …

我是 i18next 的新手，正在尝试本地化/翻译网站。一切都适用于组件内部的翻译，但在外部（意味着带有 i18n.t() 的 json 文件它不会检索所需的信息，而是显示默认值。

我正在使用 create-react-app 并且它是文件夹引用的默认设置，也许这​​是关键问题，但我不知道为什么以及要更改什么。

import i18n from '../../i18n';


const navigation = [
    {
        'id'      : 'dashboard',
        'title'   : i18n.t('analytics.title', 'NOT FOUND'),
        'type'    : 'group',
        'icon'    : 'apps',

    }
  ]

export default navigation;

这是 i18n.js 文件的设置：

import i18n from "i18next";
import Backend from 'i18next-xhr-backend';
import { initReactI18next } from 'react-i18next';
import detector from "i18next-browser-languagedetector";

i18n

  .use(detector)
  .use(Backend)
  .use(initReactI18next)
  .init({
    lng: localStorage.getItem('language') || 'en',
    backend: {
      /* translation file path */
      loadPath: '/assets/i18n/{{ns}}/{{lng}}.json'
    },
    fallbackLng: ['en', …

在文档中说明了以下内容：

useMemo 只会在依赖项之一发生变化时重新计算记忆值。这种优化有助于避免每次渲染时进行昂贵的计算。

听起来不错，不是吗？但是为了优化性能，在使用之前需要确保计算比 useMemo 本身更昂贵。对何时避免使用 useMemo 有什么建议吗？

假设我们有一个带有复选框的简单的基于函数的组件。

我很好奇为什么随后添加和删除事件侦听器会成功：

function Component() {
  const handler = () => 123

  useEffect(() => {
    window.addEventListener("beforeunload", handler)
    window.removeEventListener("beforeunload", handler)
  }, [isChecked])
}

但是当引入一个条件时，例如：

function Component() {
  const handler = () => 123

  useEffect(() => {
    isChecked
      ? window.addEventListener("beforeunload", handler)
      : window.removeEventListener("beforeunload", handler)
  }, [isChecked])
}

侦听器已添加，但不再删除。

这是为什么？是因为我们的处理程序是在重新渲染时重新创建的吗？当处理程序移出组件时，一切都井然有序。

这是一个演示，供那些想要测试它的人使用：

https://codesandbox.io/s/y8jono6yx?module=%2Fsrc%2FCheckbox.jsx

指示：

• 下载项目文件（顶部栏菜单）
• npm i在下载的文件夹中运行
• 启动开发服务器npm start

事件侦听器列表可以通过调用来检索getEventListeners(window)- 至少在 Chrome 中是这样。