标签: memo

我有一个组件，它同时包含在 Material-UI withStylesHOC 和 React memoHOC 中。

我无法测试此组件，因为我无法调用dive()：

ShallowWrapper::dive() can only be called on components

我目前知道的唯一选择是独立export Demo和export default withStyles(styles)(Demo). 这允许我测试未包含在withStyles. 我想避免这种方法。

如果我删除 memo()，我就可以测试该组件。同样，如果我删除 withStyles()，我也可以测试该组件。这些 HOC 的组合使我的组件无法测试。

有哪些可用的策略可以有效地测试该组件？

演示.js

import React, { memo } from "react";
import MUIIconButton from "@material-ui/core/IconButton";
import { withStyles } from "@material-ui/core/styles";
import Tooltip from "@material-ui/core/Tooltip";
import Typography from "@material-ui/core/Typography";

const styles = () => ({
  root: {
    backgroundColor: "red"
    /* more styles... */
  }
});

const …

不知何故，当组件由映射“生成”时，react.memo（或钩子版本）将无法工作。

代码示例： https: //codesandbox.io/embed/react-memo-example-iuqf4

const Item = ({ step }) => <div>{step.name}</div>;
const MemoItem = React.memo(Item, (prevProps, nextProps) => {
  console.info("memo"); //no console
  if (prevProps.show === nextProps.show) {
    return true;
  }
  return false;
});

const initialSteps = [{
    name: "Pim",
    show: true
  }, {
    name: "Christa",
    show: false
  }, {
    name: "Henk",
    show: true
  }, {
    name: "klaas",
    show: true
  }];

{steps.steps.map((step, 
    <MemoItem key={index} step={step} />
))}

我的期望是每个渲染的项目都会被“记忆”（并在控制台中显示日志）。

我目前正在使用React.memo.

大多数这些组件都有子组件。该项目还使用了 TypeScript。

我开始觉得备忘录组件不支持子组件，因为每次出现错误时都会向我显示以下错误消息：

类型“IntrinsicAttributes & object”上不存在属性“children”

事实证明，这仅适用于我为组件提供 Props 类型的情况。例如

const MyComponent: React.SFC<PropType>

如果我删除道具类型（如下所示），则不会发生错误。

const MyComponent: React.SFC

当然，我在大多数情况下都需要道具类型。

我已经设置了一个模拟问题的代码沙箱：

https://codesandbox.io/s/cool-keldysh-urddu?fontsize=14&hidenavigation=1&theme=dark

tl; dr：当为组件道具提供了类型时，为什么 React.memo 组件不接受子道具？

我正在重构我们的一些组件，所以我正在尝试合并 memoization，因为某些组件可能会使用相同的值重新呈现（例如，热链接的图像 URL，除非它们相同）。

我有一个简单的组件：

const CardHeader = props => {
    // img is a stringand showAvatar is a boolean but it's always true
    const { ..., showAvatar, img } = props;

    return (
        <CardHeader>
            <ListItem>
                // AvatarImage shouldn't re-render if img is the same as previous
                {showAvatar && <AvatarImage img={img} />
            </ListItem>
        </CardHeader>
    );
}

然后是AvatarImage：

const AvatarImage = React.memo(props => {
   console.log("why is this still re-rendering when the img value hasn't changed?");
   const { img …

如果插入符号直接相邻或备忘录中的单词,我需要能够选择TMemo的整个单词.

考虑以下(其中|是插入符号)

Here is some text| =选择 text

Here is so|me text =选择 some

|Here is some text =选择 Here

Here is some text | =选择''

我搜索谷歌但似乎无法找到一个有效的解决方案.

情况很独特.我需要在不同时间"添加"带有注释的行.每当我按下F9键时,行号将显示后跟冒号":"字符,然后我在行号和光标位置输入一些注释.

运行输出应如下所示:

001: startup time
002: watched tv
003: |

"|" 是运行时的最后一个光标位置,等待我输入一些文本.

但相反,当我运行程序并按F9键时,我得到这个:

001: 
002: 
003: 
|

"|" 是运行时的最后一个光标位置,等待我输入一些文本.

如何删除备忘录中的(最后)空白行？

我正在尝试在 R Mardown 中创建以下备忘录格式：https ://texblog.org/2012/03/07/writing-a-memo-in-latex/

---
csl: texMemo.csl

\memoto{someone} 
output: pdf_document
---

我不确定将文本放在哪里，无论是在 YAML 标头中还是在 R Markdown 的正文中。此外，Latex 代码在标题中不起作用。我想有一个简单的解决方案，但我找不到答案。谢谢。

我是钩子的新手。所以这可能很容易，但我不知道如何解决：

我有一个这样的函数，它需要两个数组columns和data. 并且这些数据应该被记住，否则它不起作用。（由 react-table 人员推荐）

function ReactTable(props) {

    const columns = React.useMemo(() => props.columns, [])

    const data = React.useMemo(() => props.data, [])

    return <Table columns={columns} data={data} />
}

这工作正常，但是当道具发生变化时（比如从数据数组中添加或删除一个项目），React.useMemo 不会将更新的数据发送到 Table 组件。我该如何解决这个问题:(

我必须在 Delphi 6 中为我的学校制作一份高分备忘录。有没有办法按数字或字母对备忘录行进行排序？

我使用 4 个 Tedit 和 1 个 TMemo。如果游戏结束，我的代码将检查谁获得了最高分。这是检查玩家 1 是否比玩家 2 获得更高分数的方法：

if in1>p2in1 then begin
  highscore.naammemo.Lines.Add(Speler1.Caption);
  highscore.saldomemo.Lines.Add(Saldo1.Text);
end;

如何为 TMemo 创建代码来对每场比赛的最高分进行排序？

我正在开发一个相对较大的 React 代码库，并且我看到以前的开发人员使用memo并usecallback自由地认为通过使用这些代码可以提高性能。显然不是，这是一个例子

export default function QuestionHelper({ text }: { text: string }) {
  const [show, setShow] = useState<boolean>(false);

  const open = useCallback(() => setShow(true), [setShow]);
  const close = useCallback(() => setShow(false), [setShow]);

  return (
    <span style={{ marginLeft: 4 }}>
      <Tooltip show={show} text={text}>
        <QuestionWrapper
          onClick={open}
          onMouseEnter={open}
          onMouseLeave={close}
        >
          <Question size={16} />
        </QuestionWrapper>
      </Tooltip>
    </span>
  );
}

该应用程序现在可以运行。但我拒绝修复它，因为该应用程序按预期工作。我怎样才能证明我们应该删除代码中所有不必要的memo和？usecallback

是否有客观的方法来说明删除这些内容的好处？