是否可以部分应用 React 组件？答案

【问题标题】：Is it possible to partially apply a React component?是否可以部分应用 React 组件？
【发布时间】：2021-01-20 14:12:36
【问题描述】：

假设我有一个 <Button> 组件，它具有两个属性：text 和 id 例如，

<Button text="delete" id="123"/>

现在假设我有一个用户 ID 列表：[101, 102, 103, …]

是否可以部分申请<Button>？例如，

ids.map(<Button text="delete" id={__}>)

__ 只是一个占位符，等待被当前 id 替换。

如果可能，部分应用 React 组件会对React Reconciliation Algorithm 产生任何不利影响吗？

【问题讨论】：

是的，有可能。但是你不知道如何使用 .map 函数来反应良好。 .map((_box, _i) => { return (>) }) 我可以在这里给你发一个完整的代码吗？还是我误会了你？

标签： reactjs functional-programming

【解决方案1】：

你可以使用两种方式

一个，这不是真正的部分

ids.map((id)=><Button text="delete" id={id} />)

以及真正提取上述功能并使用它的部分

const PartialDeleteButton = (id) => <Button text="delete" id={id} />

ids.map(PartialDeleteButton)

你也可以用作

<PartialDeleteButton id={5} />

我看不出这些会如何影响对账算法

【讨论】：

感谢您的回答。我知道我可以在两者之间有另一个函数（就像你在两个示例中所做的那样），但这不符合 React 组件的条件。我知道 React 组件只是函数，但 JSX 为它们提供了额外的表现力，我希望即使在部分应用时也能保持这种风格（如果可能的话）。不过还是谢谢你。
@customcommander 如果您可以描述您希望部分组件具有的额外风味，我可以更新相关部分。带有PartialDeleteButton 的第二个是真正的反应功能组件。
当然。好吧，这几乎就是我问题中的例子：.map(<Button text="delete" id={__}/>)。所以我想<Button> 的定义必须以某种方式支持__ 表示法，这表明会有更多的道具出现，同时返回另一个函数。
@customcommander 不使用 JSX 语法，因为它总是以不返回函数的 React.createElement 结尾。

【解决方案2】：

React 中没有组件的部分渲染。

一个组件监视state 和props。每当您更改其中任何一个时，它都会刷新组件。所以如果你动态改变id，它会重新渲染组件。

但是，这将是 1 次额外的重新渲染。

但是，您可以选择编写函数来防止这种情况发生

React.memo: 最新反应
shouldComponentUpdate：对于旧版本。

以下是React.memo的演示：

看什么，注意我添加了一个更新data的setTimeout，它会调用ToDoApp的渲染，但由于组件被记忆，它不会被调用

function Button({id, value}) {
    const onClick = () => {
    console.log(`${id} - ${value}`)
  }
  console.log(`Rendering Btn ${value}`)
    return (<button id={id || '__'} onClick={onClick}>{ value }</button>);
}

const MyButton = React.memo(
    Button,
  (prevProps, nextProps) => {
    return prevProps.value === nextProps.value
  }
)

注意：由于您将停止渲染组件，因此您不会在其中获得更新的道具。

【讨论】：