React：如何将可重用组件与通常的哑组件连接起来

Posted 2023-02-22

【中文标题】React：如何将可重用组件与通常的哑组件连接起来

【英文标题】：React: how to connect reusable components with usual dumb components

【发布时间】：2016-10-21 11:23:53

【问题描述】：

当我开发基于 React 的 Web 应用程序时，我经常将组件分为智能组件和哑组件，以及可重用组件和自定义组件。 可重复使用的组件可以是自给自足的，例如<RedButton> 或 <CustomSelect> 但它们也可以是中间件组件，例如 <FluxStoreBinder>。中间件组件呈现其children，同时向它们添加一些功能，通常例如订阅/从 Flux 存储读取，或包装到其他一些有状态的事物中。但是，需要一些额外的工作来将可重用的智能中间件组件连接到哑组件，因为它们的 props 不太可能匹配。例如。 <FluxStoreReader> 可能会“返回”一个名为 data 的属性，而 <ToDoList> 类型的子对象需要 toDoItems。

我想问的问题是如何告诉中间件组件以哪种方式呈现哪些内容。什么是正确和推荐的方法？目前我已经看到了 3 种方法来告诉中间件组件如何渲染它的子组件：

通过props提供一个函数，比如render=(arg1) => <Child prop1=arg1/>。特点是：您可以在此功能内访问自己的状态/道具/等；您可以处理和重新映射道具；您可以根据条件指定要渲染的孩子；您可以为孩子设置所需的道具，而无需通过中间件组件进行代理。

通过返回React.cloneElement(children, props)，同时提供重新映射props的函数。

通过渲染React.cloneElement(children, props) 并将接收到的道具代理到孩子。纯组件方法，没有回调。这个不具备上述 2 的特性/灵活性，并且还需要一些额外的工作：您需要在中间件及其子级之间使用另一个中间件来重新映射道具。

Mike Tronic 建议的第四个选项是使用高阶组件，它们基本上是组件工厂，其中所需的参数之一是子组件类。几乎和#3一样——但是一旦你运行了工厂，你甚至不能改变孩子的类型。

您为自己的应用选择了哪种方法？为什么？请分享想法。

很高兴听到 React 人的意见。

【参考方案1】：

check https://www.youtube.com/watch?v=ymJOm5jY1tQ
http://rea.tech/reactjs-real-world-examples-of-higher-order-components/ and 
http://www.darul.io/post/2016-01-05_react-higher-order-components
What are Higher Order Components?
A Higher Order Component is just a React Component that wraps another one.
This pattern is usually implemented as a function, which is basically a class factory (yes, a class factory!), that has the following signature in haskell inspired pseudocode
hocFactory:: W: React.Component => E: React.Component
Where W (WrappedComponent) is the React.Component being wrapped and E (Enhanced Component) is the new, HOC, React.Component being returned.
The “wraps” part of the definition is intentionally vague because it can mean one of two things:
Props Proxy: The HOC manipulates the props being passed to the WrappedComponent W,
Inheritance Inversion: The HOC extends the WrappedComponent W.
We will explore this two patterns in more detail.
What can I do with HOCs?
At a high level HOC enables you to:
Code reuse, logic and bootstrap abstraction
Render Highjacking
State abstraction and manipulation
Props manipulation
We will see this items in more detail soon but first, we are going to study the ways of implementing HOCs because the implementation allows and restricts what you can actually do with an HOC.

【讨论】：

为什么你需要一个类工厂，一个带参数的类就足以完成任务？工厂 1) 不太灵活 2) 在 JSX 树中不那么明显（没有明确的层次结构）。

高阶函数概念与高阶组件相同，请确保您理解上面的帖子。如果您不了解高阶函数和闭包，这有点令人困惑。

在组件工厂中绝对不需要创建中间件组件。特别是除非你在这里解释它而不通过发布 youtube 链接来破坏线程。请停止宣传您的 youtube 频道。请不要再假设对手的专业水平。