The difference between the React. PureComponent and React.Com ponent

  • React.ComponentDid not realizeshouldComponentUpdate()
  • React.PureComponentThis function is implemented in a shallow comparison between prop and State

What can a function component use to render the same results given the same props

React.memo is a high-order component that checks only props changes and is only applicable to function components. It improves the performance of components by memorizing the rendering results of components.

If the function component is wrapped in react. Memo and its implementation has a Hook for useState or useContext, it will still re-render when the context changes

Note:

Unlike the shouldComponentUpdate() method in the class component, this returns true if props is equal; If props are not equal, return false. This is the opposite of the return value of the shouldComponentUpdate method.

CreateElement, cloneElement, createFactory

  • CreateElement creates and returns a new React element of the specified type.

  • CloneElement clones the Element element and returns a new React element. The props of the element is the result of superficially merging the new props with the props of the original element. The new child element replaces the existing child element, and the key and ref from the original element are retained.

  • CreateFactory returns the function used to generate the React element of the specified type. (Abandoned)

The React. CreateRef and React. ForwardRef

  • CreateRef creates a ref that can be attached to the React element via the ref attribute.

  • The React. ForwardRef creates a React component that forwards the ref properties it receives to another component in its component tree.

    Application Scenarios:

    1. Forward refs to the DOM component
    2. Forwarding refs in higher-order components
const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="FancyButton"> {props.children} </button> )); // You can now get a ref directly to the DOM button: const ref = React.createRef(); <FancyButton ref={ref}>Click me! </FancyButton>;Copy the code

The life cycle of a class component

  • mount

    • constructor()

      If state is not initialized or method binding is not performed, there is no need to implement a constructor for the React component.

      Before the React component is mounted, its constructor is called. When implementing a constructor for a react.componentsubclass, you should call super(props) before any other statements. Otherwise, this. Props might have undefined bugs in the constructor.

    • static getDerivedStateFromProps()

      GetDerivedStateFromProps is called before the Render method is called, and is called both during the initial mount and during subsequent updates. It should return an object to update state, and if null is returned, nothing is updated.

      The value of state depends on props at all times.

    • render()

    • componentDidMount()

  • update

    • static getDerivedStateFromProps()

    • shouldComponentUpdate()

      Check whether the output of the React component is affected by changes to the current state or props based on the return value of shouldComponentUpdate(). The default behavior is that the component is rerendered every time the state changes.

    • render()

    • getSnapshotBeforeUpdate()

      GetSnapshotBeforeUpdate () is called before the last render output (submitted to the DOM node). It enables the component to capture some information (for example, scroll position) from the DOM before changes are made.

    • componentDidUpdate()

  • uninstall
    • componentWillUnmount()
  • Error handling

    • static getDerivedStateFromError()

      This life cycle is invoked after a descendant component throws an error. It takes the thrown error as an argument and returns a value to update state

    • componentDidCatch()

      This life cycle is invoked after a descendant component throws an error. It takes two arguments:

      Error – An error thrown.

      Info — An object with a componentStack key that contains stack information about component raising errors.

ReactDom

  • render()
ReactDOM.render(element, container[, callback])
Copy the code

Render a React element in the supplied Container and return a reference to the component (or null for stateless components).

  • hydrate()
ReactDOM.hydrate(element, container[, callback])
Copy the code

Same as Render (), but it is used to hydrate HTML content in containers rendered by the ReactDOMServer.

  • unmountComponentAtNode()
ReactDOM.unmountComponentAtNode(container)
Copy the code

Removing a component from the DOM removes its Event handlers and state. This function does nothing if there are no corresponding mounted components on the specified container. Returns true if the component is removed, false if there are no components to remove.

  • findDOMNode()
ReactDOM.findDOMNode(component)
Copy the code

Pay attention to

  1. findDOMNodeIs an escape hatch to access the underlying DOM node.
  2. findDOMNodeIt is only available on mounted components (that is, components that are already placed in the DOM). If you try to call a component that is not mounted (for example, on a component that has not yet been created)render()In thefindDOMNode()) will throw an exception.
  3. findDOMNodeCannot be used for functional components.
  • createPortal()
ReactDOM.createPortal(child, container)
Copy the code

To create a portal. Portal provides a way to render child nodes into DOM nodes that exist outside the DOM component hierarchy.

React differs from HTML in a number of attributes

  • checked

  • className

  • dangerouslySetInnerHTML

    DangerouslySetInnerHTML is an alternative to the innerHTML provided by React to the browser DOM. In general, setting up HTML directly with code is risky because it is easy to unintentionally expose users to cross-site scripting (XSS) attacks. Therefore, you can set HTML directly in React, but when you want to set dangerouslySetInnerHTML, you need to pass it an object containing key __html to warn you. Such as:

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}
Copy the code

  • htmlFor

    Because for is a reserved word in JavaScript, htmlFor is used in the React element instead.

  • onChange

  • selected

  • style

    Style takes a JavaScript object with a small camel named attribute, not a CSS string. This is consistent with the JavaScript property style in the DOM, is more efficient, and prevents cross-site scripting (XSS) security vulnerabilities.

  • suppressContentEditableWarning

    Normally, React issues a warning when an element with child nodes is marked as contentEditable, as this does not take effect. This property disallows this warning. Try not to use this property.

  • suppressHydrationWarning

    If you use React server rendering, you’ll usually get a warning when the server renders something different from the client. However, in some rare cases, it is difficult or even impossible to guarantee consistency. For example, timestamps are often different on the server and client sides.

If suppressHydrationWarning is set to true, React will not warn you that the attribute is inconsistent with the element content. It will only work with element level depth and is intended as a contingency plan. So don’t overuse it.

  • value