React 和 Redux：将父组件作为道具传递给其子组件是不是存在任何性能问题/可能的副作用

Posted 2023-02-23

【中文标题】React 和 Redux：将父组件作为道具传递给其子组件是不是存在任何性能问题/可能的副作用

【英文标题】：React and Redux: Are there any performance issues/possible side effects with passing a parent component as a prop to its childrenReact 和 Redux：将父组件作为道具传递给其子组件是否存在任何性能问题/可能的副作用

【发布时间】：2018-10-19 15:48:42

【问题描述】：

我正在查看 React-Redux 代码库中的一些代码，在很多情况下，父智能组件被作为道具传递给子组件：

import React from 'react';
import Child from '../components/Child';

export default class Parent extends React.Component 
    constructor(props) 
        super(props);
    
    //...

    render() 
        return <Child parent=this/>;
    

乍一看，这里的意图似乎是将父组件的 props/state/methods 暴露给子组件。这与我过去在 React 中使用的许多设计模式背道而驰，但我不确定它是否值得在代码审查中提出（它已经部署到 QA 中）。它在技术上是有效的（孩子可以调用 this.props.parent[method] 等），并且如果您将单个处理程序/props/（本地）状态的切片传递给孩子，则可以显着减少否则需要的代码行。我知道有缺点（在一种情况下，父属性与减速器共享相同的名称，因此在子组件中，不清楚 this.props['reducerName'] 是指 React 组件还是映射切片州），但我不能确定缺点是否超出了表面水平。

这样的事情是否存在在子组件中进行不必要的重新渲染/差异检查的风险？ React 是否需要递归地序列化组件，从而因为循环引用而产生大量开销？除了我觉得它看起来不对，我还能指出什么？

【参考方案1】：

有几件事我能想到为什么这可能不是一个好主意：

这会在父组件和组件之间创建非常紧密的耦合。此外，我们应该尽量为抽象模块提供最少的数据量。我们称之为

最小特权原则

。在这里，很多信息被传递给子组件，这些信息不会被使用，甚至可以通过多种方式被滥用。

当子组件更改日期对象上的某些内容时，这是一个非常糟糕的想法的一种情况：例如：

render() 
    return (
      <React.Fragment>
        <ChildOne parent=this/>;
        <ChildTwo parent=this/>;
      </React.Fragment>
   )

现在ChildOne 组件可以执行以下操作：

this.props.parent.clickHandler = this.anotherHandler

这将破坏ChildTwo 的功能。