Wells wwsun

Avoiding HOC; Favoring render props

The React community is moving away from HOC (higher order components) in favor of render prop components (RPC). For the most part, HOC and render prop components solve the same problem. However, render prop components provide are gaining popularity because they are more declarative and flexible than an HOC.

Read more:

Comparison Items	Schema-base low-code solution	Tango (Code-based)
Applicable Scenarios	Targeted vertical building scenarios, such as forms, marketing pages, etc.	🔥 Applicable to application building scenarios centered on source code
Language Capabilities	Relies on private protocols for extension, inflexible, and difficult to align with programming language capabilities	🔥 Based directly on JavaScript language, can use all language features, no extensibility issues
Development Capability	LowC

	function isArray(value){
	return Object.prototype.toString().call(value) == '[Object Array]';
	}

	function isFunction(value) {
	return Object.prototype.toString().call(value) == '[Object Function]';
	}

	function isRegExp(value) {
	return Object.prototype.toString().call(value) == '[Object RegExp]';

	// modules are defined as an array
	// [ module function, map of requireuires ]
	//
	// map of requireuires is short require name -> numeric require
	//
	// anything defined in a previous bundle is accessed via the
	// orig method which is the requireuire for previous bundles

	(function outer (modules, cache, entry) {
	// Save the require from previous bundle to this closure if any

	<!DOCTYPE html>
	<html>
	<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>

	import * as React from 'react';
	import { Component, ComponentClass, createRef, forwardRef, Ref } from 'react';

	const myHoc = <ComposedComponentProps extends {}>(
	ComposedComponent: ComponentClass<ComposedComponentProps>,
	) => {
	type ComposedComponentInstance = InstanceType<typeof ComposedComponent>;

	type WrapperComponentProps = ComposedComponentProps & {
	wrapperComponentProp: number;