React中如何动态解构大型props对象？

首先明确：没法直接通过let {}动态声明props里的所有键作为变量。ES6的对象解构语法是静态的，必须显式写出要提取的属性名，没办法自动遍历对象的所有键来生成对应的变量——这是语法层面的限制，没有直接的语法支持。

给你几个可行的替代思路：

• 直接使用props.xxx：虽然多敲几个字符，但胜在清晰、无副作用，也是最推荐的做法。毕竟如果props里有大量属性，全解构出来反而会让作用域里充满变量，可读性差，还容易和其他变量冲突。
• 只解构常用属性，剩余的用...rest：把高频使用的几个属性解构出来，剩下的打包到一个rest对象里，比如：

  let { firstname, lastname, age, ...restProps } = props;
  // 常用的直接用firstname，不常用的用restProps.website这种
  

• 不推荐的with语句：虽然with(props)能让你直接用firstname代替props.firstname，但这个语法在严格模式下被禁用，而且会导致代码可读性极差，还容易引发变量名冲突的问题，几乎所有规范都不建议使用。
• 手动挂载到作用域（不推荐）：比如在非严格模式下，可以把props的属性挂载到this上（如果是在普通函数里），或者用window（全局环境，但更不推荐），但这样会污染作用域，风险很高：

  // 非严格模式下的普通函数内
  Object.keys(props).forEach(key => {
    this[key] = props[key];
  });
  // 之后可以用this.firstname，但严格模式下this是undefined，会报错
  

总的来说，最稳妥且符合规范的做法还是直接使用props.xxx，或者选择性解构常用属性，不要追求一次性把所有属性都变成变量——反而会增加代码维护的难度。

内容的提问来源于stack exchange，提问作者illia chill