React中父组件传递props与context注入属性同名时优先级如何？

这个场景下的属性优先级没有React框架层面的强制规定，完全由withContext高阶组件的内部实现逻辑决定，行业内存在通用约定，具体规则如下：

核心逻辑 #

高阶组件本质是接收组件为参数、返回新组件的函数，属性合并的规则遵循JavaScript对象展开的基础逻辑：后展开的对象同名属性会覆盖先展开的对象属性。

最常见的实现：父传props优先级更高 #

绝大多数开源生态中的高阶组件（包括Redux早期的connect、React Router的withRouter等主流实现）都会遵循「用户主动传递的属性优先级高于高阶组件自动注入的属性」的约定，实现方式如下：

// 常规withContext高阶组件实现
import { useContext } from 'react';
import SomeContext from './some-context';

function withContext(Component) {
  return function WrappedComponent(props) {
    // 从Context中取出待注入的属性
    const injectedProps = useContext(SomeContext);
    // 注入属性在前，父组件传递的props在后展开
    return <Component {...injectedProps} {...props} />
  }
}

该实现下，你示例中父组件传递的content="some content"会覆盖withContext注入的同名content属性，最终Child组件拿到的content是父组件传递的值。

特殊实现：高阶组件注入属性优先级更高 #

如果高阶组件的实现把注入属性放在父传props之后展开，注入的属性就会覆盖父传的同名属性：

// 非常规的withContext实现
function withContext(Component) {
  return function WrappedComponent(props) {
    const injectedProps = useContext(SomeContext);
    // 注入属性在后，会覆盖父传的同名属性
    return <Component {...props} {...injectedProps} />
  }
}

该实现下，最终Child组件拿到的content是withContext从Context中注入的值。

排查建议 #

如果要确定你项目中具体的属性优先级，直接查看withContext的内部实现代码即可100%确认结果。

内容的提问来源于stack exchange，提问作者Aarni Joensuu