Question

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

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

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

是否可以部分应用<Button>？例如，

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

其中 __ 只是一个等待被当前 ID 替换的占位符。

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

Answer 1

你可以用两种方式

一个，这不是真正的部分

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

以及真正提取上述函数并使用它的部分

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

ids.map(PartialDeleteButton)

你也可以用作

<PartialDeleteButton id={5} />

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

Answer 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
  }
)

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

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

2 个答案: