**注：**有些模式侧重于状态管理概念，但我们可以避免和其他第三方状态管理工具，因为它们与本文的主题无关。Redux,``````Mobx

渲染道具

响应文档比比皆是：

术语"呈现道具"是指使用其值为函数的 prop 在 React 组件之间共享代码的技术。

简单地说，它只是一个函数值的道具。函数是需要呈现的组件。也许你已经看到了：React Router

<Route path=’/about’ render={(props) => ( <About {…props} isLoad={true} /> )} />

Enter fullscreen mode Exit fullscreen mode

此模式的主要目的是更新同级组件的道具。它使组件更可重用，并帮助我们更容易实现"关注点分离"。

让我们以以下方案为例：

  • 我们需要开发一个组件。Form
  • 里面我们有 和 。From``````p``````input
  • 是用户的输入。input
  • 显示了用户写入的。p

我们可以简单地创建类似的东西：

import React, { useState } from “react”; export default function Input(props) { return ( <> </> ); }

export default function Form() { const [value, setValue] = useState(""); return (

<Input onChange={e => setValue(e.target.value)}/>

{value}

); }

Enter fullscreen mode Exit fullscreen mode

此方法存在两个问题：

1. 在这种情况下，我们不使用"关注点"概念，因为 应控制 和 而不是 。Input``````Value``````Form

2. 我们的组件不太可重复使用和灵活。

我们可以重构代码并使用渲染道具，像这样：

import React, { useState } from “react”;

function Input(props) { const [value, setValue] = useState(""); return ( <> <input type=“text” value={value} onChange={(e) => setValue(e.target.value)} /> {props.render && props.render(value)} </> ); }

export default function Form() { return (

<Input render={(value) =>

{value}

} />
); }

Enter fullscreen mode Exit fullscreen mode

这样，组件控制值，并且它更可重用（相同的功能可以使用不同的元素实现）。Input

HOC - 高阶组件

Higher-Order Components基本上是一个函数，该函数接收组件作为参数，并返回具有特定业务逻辑的新组件。你可能在 “Redux” 中看到了这一点：

export default connect(mapStateToProps , mapDispatchToProps)(From);

Enter fullscreen mode Exit fullscreen mode

使用 ，您可以编写单独的功能到应用的公域（全局）功能，并在项目中的衍射组件上重用它。Higher-Order Components

让我们采取另一个场景：

  • 我们需要开发两个组件。menu
  • 在第一个组件中，我们有一个需要阻止菜单单击事件。button
  • 第二个组件也是 ，但这次我们需要_处理菜单_单击事件。button

问题是我们需要两种菜单-一种是具有停止传播能力的菜单，另一种是没有停止的菜单。

我们可以这样使用：Higher-Order Components

import React from “react”; import “./style.css”;

function stopPropagation(WrappedComponent) { return function(){ const handleClick = event => { event.stopPropagation(); WrappedComponent.handleClick() }; return ; } }

function Button(props){ const handleClick = () => console.log(“button clicked!”); Button.handleClick = handleClick; return <button onClick={props.onClick || handleClick}>Click Me; }

function Menu(props) { const openMenu = () => console.log(“menu opened!”); return (

Menu

{props.children}
); }

export default function App() { const ButtonPropagation = stopPropagation(Button); return (

); }

Enter fullscreen mode Exit fullscreen mode

链接到演示

让我们分析一下此代码：

  • 组件读取我们提到的两个。App``````Menus
  • 组件读取标题和子（本例中为 ）。Menu``````Button
  • Button具有具有单击事件的按钮元素。 * 我们需要使用导出此函数（在类组件中，您可以使用 。**handleClick``````Button.handleClick= handleClick``````static
  • 止损推进是高阶组件。它接收一个组件（在我们的情况下），并发送回具有新能力的组件（在我们的情况下）。Button``````stopPropagation

这是使用 的简单示例。我们可以使用，不需要在不同的组件上再次重写。更重要的是，我们可以创建其他"按钮"HOC，如防止防御和队列点击。Higher-Order Components``````stopPropagation