Render children at most once through the use of Singletons

dkrutsko
创建于
2018-05-04 20:20:33

Proposed Feature

React.createSingleton

Returns a unique React component which could be used anywhere but its children would only get rendered a single time for every location the returned Singleton is used. Very useful for declaring SVG filters but can be combined with anything else including Portals, Fragments and so on.

Use Case

We have a Ripple component similar to Material-UI which could get applied to anything including a div and a button. Our Ripple effect makes use of an SVG filter for a gooey effect. It's easy for us to bake the SVG into the Ripple component but we only need the SVG rendered once, anywhere in the DOM.

We make use of the Singleton component to handle rendering this SVG once and when the component rendering the SVG gets destroyed, the responsibility falls upon the next component in the list, if any.

Example

const FilterSingleton = React.createSingleton();

const FancyEffect = () =>
{
	return (
		<div>
			<FilterSingleton>
				<svg className='svg-defs' xmlns='http://www.w3.org/2000/svg'>
					<defs><filter id='can-be-used-anywhere'></filter></defs>
				</svg>
			</FilterSingleton>

			<SomeComponent ... />
			<SomeComponent ... />
			<SomeComponent ... />
		</div>
	);
};

// Used all throughout your application but SVG is only rendered at most once on the DOM
<FancyEffect />
<FancyEffect />
<FancyEffect />

Implementation

React.createSingleton = function()
{
	const instances = [ ];

	return class Singleton extends PureComponent
	{
		constructor (props) {
			super (props);
			instances.push (this);
		}

		componentWillUnmount() {
			const index = instances.indexOf (this);

			if (index > -1) {
				instances.splice (index, 1);
			}

			if (instances[0]) {
				instances[0].forceUpdate();
			}
		}

		render() {
			return instances[0] === this ? this.props.children : null;
		}
	};
};
1条回答
aweary
回复于
2018-05-05 05:07:12
#1

Hey @dkrutsko. If you'd like to propose a new API for React you should do so via the RFC process, which you can find here: https://github.com/reactjs/rfcs

Thanks!

当前位于第1页,总计1 条回复

推荐相似问题

Warning: Received `true` for a non-boolean attribute `someProp`

Do you want to request a feature or report a bug? Report What is the current behavior? When I pass a boolean prop, say:
讨论数 3
react
创建时间:2018-05-04 15:13:24

ComponentDidCatch is not working properly React js16.2.0

I'm using componentDidCatch method to catch errors in my child component and show error msg instead of broken UI. The be
讨论数 5
react
创建时间:2018-05-04 11:30:42

When React JS version 15.x is going to be deprecated ? Can any one please enlight the steps to migration from 15.x to 16.x version ?

When React JS version 15.x is going to be deprecated ? Can any one please enlight the steps to migration from 15.x to 16
讨论数 2
react
创建时间:2018-05-04 06:30:17

[create-react-class] missing a interface that as constructor in es6 class

Do you want to request a feature or report a bug? Feature. What is the current behavior? React deprecated compoentWillMo
讨论数 9
react
创建时间:2018-05-03 08:38:20

forwardRef causes componentWillReceiveProps after setState

Do you want to request a feature or report a bug? bug What is the current behavior? When inside of a forwardRef, calling
讨论数 3
react
创建时间:2018-05-03 04:49:32

Use and set a component's state within setInterval function

This is a question, so I apologize if this isn't the best place to ask. I'm trying to work with a component's internal s
讨论数 4
react
创建时间:2018-05-02 20:12:18

Child component correctly deletes parent's state's object entry, but wrong child is unmounted upon re-render

I have an Order component which keeps a Javascript object in this.state.newItems and renders OrderItem components for ea
讨论数 2
react
创建时间:2018-05-02 18:15:57

Why are the Consumer and Provider properties of Consumer?

Is there a higher meaning for 1) Consumer and Provider both being properties of Consumer? 2) And Consumer being of type
讨论数 3
react
创建时间:2018-05-02 18:03:56

Context API bitmask related questions

I'm playing with Context API bitmask feature to bail out unwanted re-render. I have a dynamic model ( a JSON object) as
讨论数 10
react
创建时间:2018-05-02 13:55:21

Hovering on specific element affects other elements

constructor(props) { super(props); this.state = { isHovered: false }; this.handleMenuHover = this.
讨论数 4
react
创建时间:2018-05-02 11:14:42