问解构react组件的最好方法是什么？

EN

在生产上没有实际的区别。

不同之处在于，如果使用props对象，则可以对其进行调试。否则，在函数作用域中只能使用非结构化属性。

如果正在使用ES5目标，这不是问题，因为箭头被转换为常规函数，该函数具有可在调试器中检查的arguments对象。

出于维护目的，一致地解析props对象也是有益的。通过这种方式，函数组件可以转换为类组件，反之亦然，而无需更改函数体中的现有行：

const InputGroup = props => {
  const { name, placeholder, value } = props;
  ...
}

和

class InputGroup extends Component {
  render() {
   const { props } = this;
   const { name, placeholder, value } = props;
   ...
  }
}

解构的另一个特点是根本不解构props，因为命名冲突，主要是在属性和状态之间；两者都可以包含同名的实体：

const InputGroup = props => {
  const [state, setState] = useState(...);

  return <p>{state.name || props.name}</p>;
}

在解构过程中重命名它们，或者只允许它们中的一个解构，都会导致代码风格不一致。

他们中没有一个比他们更好。第二种方法不可能在函数组件中实现，因为您不能在其中创建const。当你在react中获得更多的代码编写经验时，第一种方法是很好读的。