javascript - 解构内部 react 组件的最佳方法？

Question

我见过有人在 React 的功能组件中使用这样的解构。

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

与其这样做，我更喜欢的方式是，

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

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

Answer 1

生产上没有实际差异。

不同的是，如果使用了props对象，是可以调试的。否则只有解构的 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 因为命名冲突，主要是在 props 和 state 之间；两者都可以包含同名实体:

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

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

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