Hook API

UseAsync and useAsyncRetry are both react-use apis, useState, useEffect, useRef,

  1. useAsync
const mgm = useAsync((): Promise<IMGMDetail|undefined> => getMGMActivity({ id }), [id])
Copy the code
  1. useImperativeHandle
  useImperativeHandle(ref, createHandle, [deps])
  // ref: defines the ref of the current object
  CreateHandle: a function that returns an object, the current of the ref
  // Object [dePS] : the list of dependencies. UseImperativeHandle reprints the instance properties of the child component to the parent when the listening dependency changes
Copy the code

UseImperativeHandle takes the first argument to ref and the second is an immediate function.

UseImperativeHandle allows you to customize the instance value exposed to the parent component when using the ref with the forwardRef:

A parent component rendering
can call inputref.current.focus ().

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () = > ({
    focus: () = >{ inputRef.current.focus(); }}));return <input ref={inputRef} . />;
}
FancyInput = forwardRef(FancyInput);
Copy the code
  1. useRef
const refContainer = useRef(initialValue);
Copy the code

UseRef returns a mutable ref object whose.current property is initialized as the passed parameter (initialValue). The ref object returned remains constant throughout the life of the component. UseRef is like a “box” that can hold a mutable value in its.current property.

// Mandate access to child components
function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () = > {
    // 'current' points to the text input element mounted to the DOM
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}
Copy the code

UseRef does not notify you when the ref object’s contents change. Changing the.current property does not cause component rerendering. If you want to run some code when React binds or unbinds the REF of the DOM node, you need to use the ref callback to do so.

Ii. Refs forwarding

Ref forwarding is a technique for automatically passing a Ref through a component to one of its children. This is usually not required for components in most applications. But it can be useful for some components, especially reusable component libraries.

The React. ForwardRef creates a React component that forwards the ref properties it receives to another component in its component tree. This technique is uncommon, but is particularly useful in two scenarios:

  • Forward refs to the DOM component
  • Forwarding refs in higher-order components

React.forwardRef accepts the render function as an argument. React will call this function with props and ref as arguments. Functional components cannot add ref by default. They do not have their own instances like class components. This API is typically used by functional components to receive refs from parent components.

1. Forward refs to the DOM component

Ref forwarding is an optional feature that allows certain components to receiverefAnd passes it down (in other words, “forwards” it) to the child components

In the following example, FancyButton uses the React. ForwardRef to get the ref passed to it and forward it to the DOM button it renders: In this way, a component using FancyButton can get the ref of the underlying DOM node button and access it if necessary, just as if it were using DOM Button directly.

// the second argument ref exists only when the react. forwardRef component is defined
const FancyButton = React.forwardRef((props, ref) = > (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can get the DOM button ref directly:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
Copy the code

2. Forward refs in higher-order components

We can use the React. ForwardRef API to explicitly forward refs to the internal FancyButton component. The React. ForwardRef takes a render function that accepts the props and ref arguments and returns a React node. Such as:

function logProps(Component) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:'.this.props);
    }

    render() {
      const{forwardedRef, ... rest} =this.props;

      // define the custom prop property "forwardedRef" as ref
      return <Component ref={forwardedRef} {. rest} / >; }}// the react. forwardRef callback has the second argument "ref".
  // We can pass this as a regular prop property to LogProps, such as "forwardedRef"
  // It can then be mounted to a child component wrapped around LogProps.
  return React.forwardRef((props, ref) = > {
    return <LogProps {. props} forwardedRef={ref} />;
  });
}
Copy the code