为什么在 React 中使用 useImperitaveHandle hook？

Question

我找不到 useImperativeHandle Hook 的用例。尝试 Google 并理解我遇到了一个代码沙箱，其中显示了为什么使用 useImperitaveHandle Hook 的示例。这是 codesandbox

的 link

https://codesandbox.io/s/useimperativehandle-example-forked-illie?file=/src/App.js

我修改了代码，使其在下面的代码框 link 中没有 useImperitaveHandle 的情况下工作。有人可以解释为什么要使用钩子吗，因为我相信没有它也可以编写代码来提供完全相同的功能。

https://codesandbox.io/s/useimperativehandle-example-forked-2cjdc?file=/src/App.js

Answer 1

我找到了一个使用它的例子。根据我的理解，如果您需要为库编写一些自定义功能并且需要库的一些内置功能，则主要需要它。

在我将提供的示例中，我将为库 ag-grid（Table 库）编写自定义 CellEditor，因为我想 select 中单元格的值table 使用 Material UI 的自动完成功能。下面是代码

import React, { useState, forwardRef, useImperativeHandle } from "react";

import MuiTextField from "@material-ui/core/TextField";
import MuiAutocomplete from "@material-ui/lab/Autocomplete";

const AutocompleteEditor = forwardRef(
  ({ fieldToSave, fieldToShow, textFieldProps, options, ...props }, ref) => {
    const [value, setValue] = useState("");

    useImperativeHandle(ref, () => {
      return {
        getValue: () => {
          return value;
        },
        afterGuiAttached: () => {
          setValue(props.value);
        },
      };
    });

    const tranformValue = (value, fieldtosave) =>
      Array.isArray(value)
        ? value.map((v) => v[fieldtosave] || v)
        : value[fieldtosave];

    function onChangeHandler(e, value) {
      setValue(value ? tranformValue(value, fieldToSave) : null);
    }

    return (
      <MuiAutocomplete
        style={{ padding: "0 10px" }}
        options={options}
        getOptionLabel={(item) => {
          return typeof item === "string" || typeof item === "number"
            ? props.options.find((i) => i[fieldToSave] === item)[fieldToShow]
            : item[fieldToShow];
        }}
        getOptionSelected={(item, current) => {
          return item[fieldToSave] === current;
        }}
        value={value}
        onChange={onChangeHandler}
        disableClearable
        renderInput={(params) => (
          <MuiTextField
            {...params}
            {...textFieldProps}
            style={{ padding: "5px 0" }}
            placeholder={"Select " + props.column.colId}
          />
        )}
      />
    );
  }
);

export default AutocompleteEditor;

如果自动完成部分令人困惑，请忽略它，这对于理解 useImperativeHandler 并不重要

所以要解释代码的作用。上述组件的值由用户自动完成设置，但ag-grid table 也需要该值，因为它需要更新相应单元格中的值。

它在内部使用传递给 customCellEditor 的引用。 useImperativeHook 然后告诉 ag-grid 在调用 getValue 时使用来自组件状态的值（当单元格需要显示值时调用）

为什么在 React 中使用 useImperitaveHandle hook？

Why is useImperitaveHandle hook used in React?

reactjs

react-ref

react-hooks