如何防止重新赋值从组件Props解构出的属性？

重新赋值解构出的组件属性属于反模式吗？ #

属于。React组件props遵循单向数据流和不可变性原则，props由父组件传入，子组件仅负责使用而非修改。解构后的变量本质上还是props的引用，重新赋值会破坏数据流向的可追踪性，让代码逻辑变得混乱，其他开发者可能误将其当作组件内部状态，增加维护成本。

如何在编译/代码检查阶段阻止这种操作？ #

TypeScript类型约束方案 #

在解构props时，将变量声明为const，TypeScript会在编译阶段直接禁止重新赋值：

import React from 'react';

interface ComponentProps {
  readonly name: string;
}

const FnComponent = (props: Readonly<ComponentProps>) => {
  const { name } = props;
  // name = '123' // 此处TypeScript会抛出编译错误：无法分配到 "name" ，因为它是常数
  return <div>{name}</div>;
};

如果想简化写法，也可以把解构逻辑移到函数内部用const声明，避免参数变量被意外修改。

ESLint规则约束方案 #

启用ESLint的no-param-reassign规则，该规则会禁止对函数参数（包括解构出的参数变量）进行重新赋值。在ESLint配置文件中添加：

{
  "rules": {
    "no-param-reassign": ["error", { "props": true }]
  }
}

开启后，只要出现修改解构参数的代码，ESLint就会抛出错误提示，在代码提交前拦截这类问题。

内容的提问来源于stack exchange，提问作者Lin Du