useEntryPointLoader

useEntryPointLoader

用于简化安全处理入口点，同时避免数据泄露到中继存储中的钩子。它将在状态中保留一个入口点引用，并在它不再通过状态访问时释放它。

const {useEntryPointLoader, EntryPointContainer} = require('react-relay');

const ComponentEntryPoint = require('Component.entrypoint');

function EntryPointRevealer(): React.MixedElement {
  const environmentProvider = useMyEnvironmentProvider();
  const [
    entryPointReference,
    loadEntryPoint,
    disposeEntryPoint,
  ] = useEntryPointLoader(environmentProvider, ComponentEntryPoint);

  return (
    <>
      {
        entryPointReference == null && (
          <Button onClick={() => loadEntryPoint({})}>
            Click to reveal the contents of the EntryPoint
          </Button>
        )
      }
      {
        entryPointReference != null && (
          <>
            <Button onClick={disposeEntryPoint}>
              Click to hide and dispose the EntryPoint.
            </Button>
            <Suspense fallback="Loading...">
              <EntryPointContainer
                entryPointReference={entryPointReference}
                props={{}}
              />
            </Suspense>
          </>
        )
      }
    </>
  );
}

参数

• environmentProvider：一个带有 getEnvironment 方法的对象，该方法返回一个中继环境。
• EntryPoint：入口点，通常通过导入 .entrypoint.js 文件获得。

流类型参数

• TEntryPointParams：入口点 getPreloadProps 方法的第一个参数的类型。
• TPreloadedQueries：传递给入口点组件的 queries 属性的类型。
• TPreloadedEntryPoints：传递给入口点组件的 entryPoints 属性的类型。
• TRuntimeProps：传递给 EntryPointContainer 的 props 属性的类型。此对象也作为 props 传递给入口点组件。
• TExtraProps：如果入口点的 getPreloadProps 方法返回一个包含 extraProps 属性的对象，这些额外的属性将作为 extraProps 传递给入口点组件，并具有类型 TExtraProps。
• TEntryPointComponent：入口点组件的类型。
• TEntryPoint：入口点的类型。

返回值

包含以下值的元组

• entryPointReference：入口点引用，或 null。
• loadEntryPoint：一个回调函数，当执行时，将加载一个入口点，该入口点将可作为 entryPointReference 访问。如果之前已加载了入口点，它将释放它。如果在 React 的渲染阶段调用它，则可能会抛出错误。
  • 参数
    • params: TEntryPointParams：传递给入口点的 getPreloadProps 方法的参数。
• disposeEntryPoint：一个回调函数，当执行时，将 entryPointReference 设置为 null 并在其上调用 .dispose()。它的类型为 () => void。它不应在 React 的渲染阶段调用。

行为

• 当调用 loadEntryPoint 回调函数时，入口点关联的每个查询（如果有）都将加载它们的查询数据和查询 AST。一旦查询 AST 和数据都可用，数据将被写入存储。这与 prepareEntryPoint_DEPRECATED 的行为不同，后者仅在使用 usePreloadedQuery 渲染关联的查询时才将数据写入存储。
• 入口点引用的关联查询引用将由中继存储保留，防止其数据被垃圾回收。一旦你在入口点引用上调用 .dispose()，关联查询的数据有可能被垃圾回收。
• 如果在 React 的渲染阶段调用 loadEntryPoint 回调函数，它可能会抛出错误。

---

此页面有用吗？

通过以下方式帮助我们改进网站 回答几个快速问题.