Question

我已经看到了两种在React中分解道具的方法。

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

或

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

假设此组件用作

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

这是我的问题：

如果我使用第一种解构方法，是否意味着我将无法接触其他专业人士，在这种情况下，haspets

这两种方式的优点/缺点是什么？

Answer 1

如果您从功能参数中分解道具，那么以后将无法访问任何其他props **，因此您的假设是正确的。至于性能和其他优点/缺点，这些形式几乎相同。我碰巧喜欢这种方式，因为我喜欢文件中尽可能少的其他变量声明。使用需要大量道具的功能可能会很痛苦。

**除非您使用传播运算符并将其存储在单独的变量中。

Answer 2

稍后，您可以通过the arguments object访问对象的其他属性，尽管正如链接上所指出的那样，应该优先使用其余参数。

array_slice

我能想到的差异之一，我想是最重要的，在第二种情况下，当您破坏<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 } }对象时，您正在使用{{ 1}}。

那样，您将无法再在props上更改这些值，而在第一种情况下，您可以轻松地对其进行修改。

反应中破坏道具的不同方式

2 个答案: