Question

我最近编码反应，使用this.props似乎过于冗长，所以我搜索了一些文章并想出了如何做到这一点并试着编写它。

class MyComponent extends Component {
    // the usual way
    render() {
        return <div>{this.props.value}, {this.props.value2}</div>
    }
}


class MyComponent extends Component {
    // the way of avoding this.props
    render({value, value2}){
        return <div>{value}, {value2}</div>;
    }
}

class ParentComponent extends Component {
    render(){
        return <myComponent value={1} value2={2} />
    }
}

我不知道这是如何在内部处理的，所以我试图在https://babeljs.io/repl进行转换，但仍然很难理解这些语法有哪些优点和缺点。

以下是问题摘要：

使用解构来减少代码是个好主意吗？
如果没有，我想知道为什么使用它不好。

Answer 1

除了使对所述变量的引用更短之外没有其他好处。换句话说，减少打字和更好的可读性。

有关详细信息，请查看this page on MDN：

解构赋值语法是一个JavaScript表达式，可以将数组中的值或对象的属性解包为不同的变量。

以下是一些其他例子，我发现这些例子更常见：

无状态功能组件中的解构：

const MyComponent = ({value, value2}) => (
  <div>{value}, {value2}</div>
);

ReactComponent类中的解构：

class myComponent extends Component {
  render(){
    let {value, value2} = this.props;
    return <div>{value}, {value2}</div>;
  }
}

对于有状态组件，您可以对状态变量执行相同的操作。

具有破坏语法的渲染函数和普通的空参数有什么区别？

1 个答案: