React ~ Component Advance API - rohit120582sharma/Documentation GitHub Wiki

PureComponent

It is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.


Fragments

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

import { Fragment } from 'react';
render() {
	return (
		<Fragment>
			<ChildA />
			<ChildB />
			<ChildC />
		</Fragment>
	);
}

Portal

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

Normally, when you return an element from a component’s render method, it’s mounted into the DOM as a child of the nearest parent node. However, sometimes it’s useful to insert a child into a different location in the DOM.

ReactDOM.createPortal(child, container)

The first argument (child) is any renderable React child, such as an element, string, or fragment. The second argument (container) is a DOM element.

A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but you need the child to visually “break out” of its container. For example, dialogs, hovercards, and tooltips.

Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the React tree regardless of position in the DOM tree.

This includes event bubbling. An event fired from inside a portal will propagate to ancestors in the containing React tree, even if those elements are not ancestors in the DOM tree.

/* Html : index.html */
<body>
	<h1 id="colorHeading">Colorizer</h1>
	<div id="container"></div>
</body>
/* Component : ColorParent.js */
return (
	<div className="colorArea">
		<div style={squareStyle} className="colorSquare"></div>
		<form onSubmit={this.setNewColor}>
			<input
				onChange={this.colorValue}
				ref={
					function(el){
						self._input = el;
					}
				}
				placeholder="Enter a color value"
			/>
			<button type="submit">go</button>
		</form>
		<ColorLabel color={this.state.bgColor}/>
	</div>
);
/* Component : ColorLabel.js */
var heading = document.querySelector("#colorHeading");

class ColorLabel extends React.Component {
	render() {
		return ReactDOM.createPortal(
			": " + this.props.color,
			heading
		);
	}
}

Using References (ref)

Refs provide a way to access DOM nodes or React elements created in the render method.

In the typical React dataflow, props are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch.

Refs are created using React.createRef() and attached to React elements via the ref attribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.

You may not use the ref attribute on functional components because they don’t have instances.

import React, { Component } from 'react';

class AutoFocusTextInput extends Component {
	constructor(props){
		super(props);
		this.componentRef = React.createRef();
	}
	componentDidMount() {
		this.componentRef.focusTextInput();
	}
	render() {
		return (
			<CustomTextInput ref={this.componentRef} />
		);
	}
}
import React, { Component } from 'react';

class CustomTextInput extends Component {
	constructor(props){
		super(props);
		this.textInput = React.createRef();
	}
	focusTextInput(){
		// Explicitly focus the text input using the raw DOM API
		this.textInput.focus();
	}
	render(){
		// Use the `ref` callback to store a reference to the text input DOM
		// element in an instance field (for example, this.textInput).
		return (
			<div>
				<input
					type="text"
					ref={this.textInput} />
				<input
					type="button"
					value="Focus the text input"
					onClick={this.focusTextInput} />
			</div>
		);
	}
}

⚠️ **GitHub.com Fallback** ⚠️