Controlled components and uncontrolled components

refs

  • 1. The value is a string

  • 2. Callback form

  • 3.createRef API

  • When ref is applied to a class component, the class component’s methods can be called.

  • You cannot use the ref attribute on a functional component because it has no instance. To retrieve a DOM element of a functional component, use the react. forwardRef method, as described below.

Controlled components (React state becomes the only data source and controls form input)

  • React recommends using controlled components in most cases.

Uncontrolled components (the form data is handed to the DOM for processing and the form data is retrieved by refs above)

Higher order functions & Currization functions

High order Component (HOC)

Function that takes a component and returns a value for the new component

Common operation 1: Enhance Props

Common usage method 2: render loding before authentication/request….

Advantages and Disadvantages

  • Some code can be treated more elegantly.

  • HOC needs to be wrapped or nested on meta-components, and using a lot of HOC creates a lot of nesting that makes debugging difficult.

  • HOC can hijack props and can cause inconsistencies such as conflicting data coverage if not handled properly.

  • Hooks were groundbreaking in that they solved many of the problems that existed before React, such as the this pointing problem and HOC nesting complexity.

ForwardRef Advanced component

Portal Portal

A typical use of portal is when a child component needs to “break” the parent component container and be displayed outside the parent component. Such as Dialogs, HoverCards, toolTips components.

The result of the above code is that the Dialog popup appears in the current component.

For popups, you should render to the screen’s heavily armored position, in the outermost body, such as ANTD’s Modal

Portals provide an excellent way to render the DOM structure of a React child node into a DOM outside the React parent node.

ReactDOM.createPortal(child, container)

  • The first child is any ReactChild that can be rendered, such as Element, String, or fragment.

  • The second argument container is a DOM element.

You can see that the popover component has been pulled away under the Body

Under the processing

Fragment & empty tag

  • You can see that div has too many levels, but you can’t remove div. You can use Fragment instead

  • App.js also works with empty tags

  • The difference is that fragments can write keys when used for traversal, whereas empty tags write nothing.

StrictMode

A strict pattern used to highlight potential problems in a program

It runs only in a development environment and does not affect production

Detect what?

  • 1. Identify unsafe lifecycles

  • 2. Warning about using the outdated string REF API

  • 3. Warning about using the deprecated findDOMNode method

  • 4. Check for unexpected side effects. In strict mode, components are called twice. It is not called twice in a production environment.

  • 5. Detect stale context apis

The React Css is recommended

Plain CSS(naming conventions shouldn’t be too much of a problem)

  • Normal CSS is usually written in a separate file and then imported for use.

  • Disadvantages: The biggest problem is local style control, although you can use naming conventions to control the naming of individual component styles, there is also the possibility of cascading styles.

CSS Modules (recommended)

  • CSS modules are not a React specific solution, but can be used in any environment that uses a WebPack-like configuration.
  • CSS /.less/.scss file name:.module. CSS /.module.less/.module.

  • It does solve the problem of local scope

  • Disadvantages:

(.list-item) (.listitem)

2. All classnames must be written in the style.classname format

3. It is not convenient to change some style values dynamically, so you still need to use inline style. (Working with the classnames tripartite library is not tiring)

CSS in JS(neutral but widely used)

  • It refers to a pattern in which CSS has JS generation rather than being defined in an external file. Not part of React, provided by third-party libraries.

  • IN React thought, artificial logic and UI could not be separated, so with JSX syntax, styles were part of UI. After CSS IN JS mode was written into JS, React was called All IN JS.

  • This approach has received a lot of criticism, but many of the best CSS-in-JS libraries are powerful, convenient, and popular.

  • Styled Components Emotion The popular CSS-IN-JS library: Styled – Components emotion

  • npm i styled-components -S

  • Vscode Installation plug-in – VScode-Styled – Components (Highlighting and intelligence prompt)

  • Styled components Take advantage of this tag template string as the premise for the regular parsing dismantled-style operation.

  • Basic Usage 1

  • Basic Use 2

  • Props to penetrate

  • The use of attrs

  • Pass state as the props property

  • inheritance

  • The theme

Classnames (a handy tripartite library)

React-transition-group

npm i react-transition-group -S

It consists of four main components

  • Transition(Not using too much is platform independent)

  • CSSTransition(commonly used)

1. There are three states: appear Enter exit

2. Define the style corresponding to the state

Type 1: The start state corresponds to the -appear -enter -exit class

The second type is :-appear-active -enter-active -exit-active

The corresponding class is -appear-done -enter-done -exit-done

  • SwitchTransition(this component is used when two components show and hide switches)
  1. In-out: New components are entered and old components are removed.
  2. Out-in: the old component is removed and the new component is entered.

  • TransitionGroup(multiple animation component wraps are typically used to animate list elements)