Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to achieve DOM operation in react", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve DOM operation in react" article.

Working with scen

Here are a few situations suitable for using refs

1. Handle focus, text selection, or media control

2. Trigger forced animation

3. Integrate third-party DOM libraries

If it can be done declaratively, try to avoid using refs

[note] do not directly expose the open () and close () methods on Dialog components, it is best to pass the isOpen property

Ref

React supports adding special properties to any component. The ref property accepts a callback function that executes immediately when the component is loaded or unloaded.

[note] get the ref after the component mount. Neither componentWillMount nor the first render can be obtained, but can only be obtained in componentDidMount.

[HTML element]

When the ref attribute is added to the HTML element, the ref callback receives the underlying DOM element as a parameter

The React component passes the DOM element into the callback function of ref when loading and null when unloading. Ref callbacks are performed before lifecycle callbacks such as componentDidMount or componentDidUpdate.

Class CustomTextInput extends React.Component {constructor (props) {super (props); this.focus = this.focus.bind (this);} focus () {this.textInput.focus ();} render () {return ({this.textInput = input;}} / >);}}

The shorter words are as follows

Ref= {input = > this.textInput = input} [class components]

When the ref property is used for a custom component declared with class, the callback of ref receives the loaded React instance

Class AutoFocusTextInput extends React.Component {componentDidMount () {this.textInput.focusTextInput ();} render () {return ({this.textInput = input;}} / >);}}

[note] this method is only valid for CustomTextInput declared by class

[functional components]

You cannot use the ref property on functional components because they have no instances

[expose DOM nodes to parent components]

Expose a special attribute on the child node. The child node will get a function attribute and attach it to the DOM node as a ref attribute. This allows the parent to call back the ref to the child's DOM node through middleware

This method is suitable for class components and functional components.

Function CustomTextInput (props) {return ();} class Parent extends React.Component {render () {return (this.inputElement = el} / >);}}

In the above example, Parent passes its ref callback to CustomTextInput as a special inputRef, and CustomTextInput passes it to it through the ref attribute. Eventually, the this.inputElement in the Parent will be set to the DOM node corresponding to the element in the CustomTextInput

Uncontrolled component

To write an uncontrolled component instead of an event handler for each status update, you can use ref to get the form value from DOM

[note] it is possible to get the Dom value through e.target.value without binding react

Class NameForm extends React.Component {constructor (props) {super (props); this.handleSubmit = this.handleSubmit.bind (this);} handleSubmit (event) {alert ("A name was submitted:" + this.input.value); event.preventDefault ();} render () {return (Name: this.input = input} / >);}}

Because uncontrolled components store real data in DOM, it is easier to integrate both React and non-React code when using uncontrolled components

[default]

During the life cycle of React, the value attribute on the form element will override the value in DOM. When working with uncontrolled components, you usually want React to assign an initial value to it, but no longer control subsequent updates. To solve this problem, specify a defaultValue property instead of value

Render () {return (Name: this.input = input} / >);}

Similarly, and support defaultChecked, and support defaultValue

ReactDOM

The react-dom package provides methods for DOM that can be called in the application's top-level domain or used as an exit out of the React model if necessary. But most components should not need to use this package

Render () unmountComponentAtNode () findDOMNode () [render ()] ReactDOM.render (element, container, [callback])

Render a React element, add it to the DOM element in the provided container, and return a reference to the component (or return null for stateless components)

If the React element has been previously rendered into container, the code will be updated once and only those DOM elements that are necessary to reflect the latest state of the element will be changed.

[unmountComponentAtNode ()]

ReactDOM.unmountComponentAtNode (container)

Remove the mounted React component from the DOM element and clear its event handler and state. If no components are mounted in the container, this function will do nothing. Returns true when a component is uninstalled, and false when there is no component to uninstall

[findDOMNode ()]

ReactDOM.findDOMNode (component)

If the component is already mounted in DOM, the function returns the DOM element generated in the corresponding browser. This function is useful when you need to read values from DOM, such as the value of the form, or calculate the size of the DOM element. In most cases, you can add a reference to the DOM node to avoid using the findDOMNode function altogether. When render returns null or false, findDOMNode also returns null

New ref

Prior to version 16.3, React had two ways to provide ref: strings and callbacks. Because there is something wrong with the way strings are used, it is officially recommended to use callbacks to use ref. And now the introduction of createRef API, according to officials, is a zero-defect way to use ref, and the callback mode can also make way.

Class MyComponent extends React.Component {constructor (props) {super (props); this.myRef = React.createRef ();} render () {return;}}

Then use the current attribute to get the current element

This.myRef.current

Typical applications are as follows

Constructor (props) {super (props) this.Mask = React.createRef () this.MenuList = React.createRef ()} handleClick = () = > {ReactDOM.findDOMNode (this.MenuList.current) .classList.toggle ("transform-zero") ReactDOM.findDOMNode (this.Mask.current) .classList.toggle ("mask-show")}

[note] the interface exposed with styledComponents-styled elements is innerRef, not ref

The above is about the content of this article on "how to realize the DOM operation in react". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.