在 React 中解构 props 的不同方式

Question

I have seen two ways to destructure props in React.

    function MyComponent({name,age,height}){
            // do stuff here
    }

or

    function MyComponent(props){
            const {name,age,height} = props
            // do stuff here
    }

Suppose this component is used as

<MyComponent name="bob" age={25} height = {175} haspets={false}/>

Here is my questions:

If I used the first way of destructuring, does it mean that I will have no access to other pros, in this case haspets

What are some pros/cons of these two ways?

Answer 1

You can have access on the other properties of your object later, throught the arguments object , though as also pointed out on the link the rest parameters should be prefered.

<MyComponent name="bob" age={25} height = {175} surname="test" haspets={false} />

function MyComponent({ name, age, height, ...rest }){
      // rest will be an object like { surname: 'test', haspets: false }
}

One of the differences I can think of, and I suppose the most important , is that on the second case, while you are destructing your props object, you are using const on declaration.

In that way, you can no longer change these values on your MyComponent , while on your first case you could easily modify them.

Answer 2

If you destructure your props from the function parameters, you won't be able to access any other props later on**, so your assumption is correct. As far as performance and other pros/cons though, these forms are pretty much identical. I happen to like this way, because I like as few additional variable declarations in my files as possible. It can, be a pain with functions that require lots of props.

**Unless you use the spread operator and store them in a separate variable.