小编Eli*_*ski的帖子

我正在优化应用程序的性能，我想知道是否在不依赖于任何变量的函数上使用 useCallback 挂钩。

考虑以下情况：假设我们有一些函数：

const someFunc = () => {
  let someVar = "someVal";
  /**
   * here some extra calculations and statements regarding 'someVar'.
   * none of the statements depends on a variable outside this function scope.
   */
  return someVar;
};

该函数不依赖于任何变量，因此我们可以使用 useCallback 和一个空数组来包装它：

const someFunc = useCallback(() => {
  let someVar = "someVal";
  return someVar;
}, []);

现在我的问题是 - 是否：

• React 实际上声明了该函数（带有内存分配和类似的东西）：

const someFunc = () => {
  let someVar = "someVal";
  return someVar;
};
const someFuncCallback = React.useCallback(someFunc …

我正在将 React 项目从使用 JSX 转换为使用 TSX 文件。

我需要一个常量类型的完整预览：

const canvasProps = {
  setPorts,
  setBoxes,
  setLines,
  selected,
  setSelected,
  actionState,
  setActionState,
  ... // and more
};

将鼠标悬停在canvasProps我得到预览：

const canvasProps: {
    setPorts: React.Dispatch<React.SetStateAction<{
        shape: string;
        id: string;
        name: string;
        port: portType;
        ref: any;
    }[]>>;
    setBoxes: React.Dispatch<React.SetStateAction<BoxType[]>>;
    ... 13 more ...;
    toggleFlowVisibility: (flow: any) => void;
}

我需要获取该常量的完整类型定义，这意味着查看额外的 13 种类型。

（我需要这个，因为我需要声明 的属性React.Context，这取决于尚未声明的函数（在函数组件内））

那么如何才能不费力地获得完整的类型定义呢？

React收集操作（例如“ADD”、“REPLACE”、“REMOVE”等 DOM 操作），以便它们可以在每次渲染结束时一次性批量执行它们。

例如，React 组件内的 setState 调用通过将此操作添加到操作队列来安排到此 React 树的构造结束。然后 React 将遍历这个队列并决​​定需要对 DOM 进行哪些更改。

React 会根据操作队列是否为空来决定是否调用另一个渲染。

有关这个很棒的教程的更多信息，它总结了 React 内部工作原理的基础知识。

我需要访问此队列来确定当前渲染是否是非常自定义的 React 组件的最后一个渲染。（是的，也许我可以避免它，但目前，这是我的要求）
访问必须来自该组件的内部。

我的检查将从最新的 useEffect 调用，这是在渲染结束并且 DOM 更新之后，并且是最新的生命周期事件，因此如果操作队列为空，则肯定不会再进行渲染。（这里很好的文章解释并演示了钩子调用的顺序）

找不到任何公共 API，但解决方法也是可以接受的。（分叉和编辑 React 不是解决方法）

这个src 文件可能是这个队列的主要逻辑。这是实际队列的类型。然而，这是源代码，并且该队列不会在 React 的构建版本中导出（无论是开发还是生产构建）

那么，有没有办法访问React的内部操作队列呢？

我正在编写一个反应库（react-xarrows.tsx），当用户向我的组件提供错误的属性时，会抛出错误（我写的），但它显示了我在“react-arrows.tsx”中编写的行。

出错时用户将看到：

/src/Xarrow.tsx:184:12
    if (!("current" in props.start))
      throw Error(
        `'start' property is not of type reference.
        maybe you set 'start' to other object and not to React reference?.\n`
      );

我想准确地向用户指出他出错的地方 - 我可以通过向 Error 提供“文件名”来做到这一点 - Error([message[, fileName[, lineNumber]]]) - 导入文件的文件名当前模块，使用我的库的用户文件 - 让我们将该文件称为“/src/Example5.tsx”。（关于“名称”我当然是指相对路径）

现在，我需要弄清楚如何获取该文件名（以及稍后的行号）。

（我确实尝试从“moudle.parents”对象中获取它作为其他类似问题的答案，但没有任何模块对象的父属性。 这是最接近帮助我的。）

必须有一种方法可以做到这一点，因为反应本身会向用户指出他出错的地方。我现在在Example5 中留下了一个错误示例（只需单击Example5）。您可以自由地使用它，如果您想出解决方案，请分享。

简化示例5：

/src/Xarrow.tsx:184:12
    if (!("current" in props.start))
      throw Error(
        `'start' property is not of type reference.
        maybe you set 'start' to other object and not to React reference?.\n`
      );

这个问题在这里被问了好几次（这里是最相关的，另一个例子），但没有提出任何解决方案。所以我有两个问题要问你们：

1. 知道为什么它在大型项目中不起作用吗？我的意思是，与项目大小或他包含的包相关的快速刷新是否存在任何已知问题，这些问题会使快速刷新停止工作？有什么办法可以解决吗？
2. 是否有一种方便的方法可以在不使用快速刷新的情况下编辑应用程序中的内部页面（无需独立运行页面，因为它取决于应用程序的所有逻辑）？

这个bug真的让我的开发真的很困难，我很难相信专业开发人员还没有找到解决这个问题的方法，请帮助！

我正在使用 expo-cli(v3.26.2 - Expo SDK 38 that using react-native v0.62)

我读了很多书，发现了类似的东西，但不完全是我想要的。

我想通过使用对象内的 prop 值来定义类型，并使用该信息来定义该对象内的其他属性。

JSX.IntrinsicElements 包含所有 React 元素的定义。让我们重点关注 SVG 元素circle以及path本示例。

所以让我们尝试定义类型防御：

export type svgCustomType<T extends "path" | "circle"> = {
  svgElem: T;
  svgProps?: { [key in keyof JSX.IntrinsicElements[T]]: JSX.IntrinsicElements[T] };
};

在这里，我尝试获取类型值 T（可以是“路径”或“圆”）并使用该值来定义svgProps.（可以是React.SVGProps<SVGCircleElement>或React.SVGProps<SVGPathElement>

用法示例：

const test: svgCustomType = {  //Error: "Generic type 'svgCustomType' requires 1 type argument(s)", why?
  svgElem: "path",
  svgProps: {
    cx: 10,  // next step: should be error here because cx is not defined in `SVGPathElement`
  },
};

为什么我得到 …

我想使用百分比转换来相对于其自身大小偏移 SVG 元素，这与使用 offset div 的transform: translate(100%,0)工作方式非常相似：

这段代码：

  <div style={{ overflow: 'visible', position: 'relative' }}>
    {/* rect */}
    <div style={{ height: 20, width: 20, background: 'black', position: 'absolute' }} />
    {/* circle */}
    <div
      style={{
        height: 20,
        width: 20,
        background: 'purple',
        borderRadius: '50%',
        position: 'absolute',
        transform: 'translate(100%,0)',
      }}
    />
  </div>

看起来像这样 很好，圆的偏移量是相对于它自己的大小的

而这种情况：

<svg overflow={'visible'}>
  <rect width={20} height={20} />
  <circle cx={10} cy={10} r="10" fill="purple" style={{ transform: 'translate(100%,0px)' }} />
</svg>

将导致渲染：

它基本上是相对于 svg 画布大小的偏移（我从未明确设置过）：

为什么transform: 'translate(100%,0)'在 …

经过几天的尝试但没有成功后，我（再次..）来到这里，见诸位专家。

首先：现场演示！因为我们都喜欢现场演示。

代码沙箱

https://codesandbox.io/s/drag-with-not-animation-b3eh7?file=/src/App.js

我正在尝试在容器之间制作交互式可拖动和可放置箭头（意味着 - 有一个连接器到一个框，您可以将鼠标从一个容器拖动到另一个框，并且将在它们之间创建一个箭头）。

• 实现 1：我可以在拖动时获得可拖动箭头的动画 - 但 onDrop 事件不会触发。
• 实现2：在第二个实现中，我可以使放置效果发生，但不能使动画发生。

从来没有他们两个！帮助！;<

代码里面有更详细的解释。

我已经尝试过的：

• React-dnd - 也不起作用，因为它基于与本机浏览器拖放 API 相同的 DOM 事件系统（或者也许（可能）我做错了？）。

我需要一个命令来在给定路径上打开一个新的提升的 PowerShell 窗口。为什么？我想要一个在给定目录上以管理员身份打开 Powershell 的快捷方式（就像按住 shift 并右键单击任何目录会给你，但作为管理员。）

我用它在我的右键菜单中添加了一个“以管理员身份打开 powershell 窗口”的快捷方式。

目前，我有

powershell -Command "Start-Process PowerShell -Verb RunAs"

这将在 C:\WINDOWS\system32 中打开提升的 PowerShell，或者：

powershell.exe -noexit -command Set-Location -literalPath '%V'

这将在当前目录上打开一个新的未提升的 powershell 窗口

我试过

powershell -Command "Start-Process PowerShell -Verb RunAs; Set-Location -literalPath '%V'"

但它不会导航到目录。

注意 - %v 成为您在其中右键单击的目录内的路径。

如何正确组合这些命令以在所需目录中打开提升的 PowerShell？

myFunc可以采用string或number但由于参数被定义为 T 在传递字符串时给出错误。

interface Props<T> {
  items: T[],
  onValueChange: (vals: T[]) => void;
}

export const myComponent = <T extends string | number>(props: Props<T>) => {

  const {
    items = [],
    onValueChange
  } = props;

  const myFunc = (item: T) => {
    //do something
    console.log(item);
    onValueChange([item])
  }

  items.map(item => myFunc(item));

  myFunc('test');

}

错误

Argument of type 'string' is not assignable to parameter of type 'T'.
  'string' is assignable to the constraint of type 'T', but …