Question

我已经看到人们在反应中的功能组件中使用了这种破坏。

const InputGroup = ({
  name,
  placeholder,
  value
}) => (

而不是这样做，我的首选方式是

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

哪个更好？我觉得第二种方法更具可读性，但第一种方法更简洁。

Answer 1

生产上没有实际差异。

区别在于，如果使用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>;
}

在解构过程中重命名它们或仅允许其中之一被解构会导致代码风格不一致。

Answer 2

没有人比这更好。第二种方法无法在功能组件中实现，因为您无法在它们中创建const。当您将获得更多在React中编写代码的经验时，第一种方法很不错。