zoukankan      html  css  js  c++  java
  • What do these three dots in React do?

    What do these three dots in React do?

    回答1

    That's property spread notation. It was added in ES2018 (spread for arrays/iterables was earlier, ES2015), but it's been supported in React projects for a long time via transpilation (as "JSX spread attributes" even though you could do it elsewhere, too, not just attributes).

    {...this.props} spreads out the "own" enumerable properties in props as discrete properties on the Modal element you're creating. For instance, if this.props contained a: 1 and b: 2, then

    <Modal {...this.props} title='Modal heading' animation={false}>
    

    would be the same as

    <Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
    

    But it's dynamic, so whatever "own" properties are in props are included.

    Since children is an "own" property in props, spread will include it. So if the component where this appears had child elements, they'll be passed on to Modal. Putting child elements between the opening tag and closing tags is just syntactic sugar — the good kind — for putting a children property in the opening tag. Example:

    Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object — which comes up a lot when you're updating state, since you can't modify state directly:

    this.setState(prevState => {
        return {foo: {...prevState.foo, a: "updated"}};
    });
    

    That replaces this.state.foo with a new object with all the same properties as foo except the a property, which becomes "updated":

    const obj = {
      foo: {
        a: 1,
        b: 2,
        c: 3
      }
    };
    console.log("original", obj.foo);
    // Creates a NEW object and assigns it to `obj.foo`
    obj.foo = {...obj.foo, a: "updated"};
    console.log("updated", obj.foo);
    .as-console-wrapper {
      max-height: 100% !important;
    }

    回答2

    375
     

    As you know ... are called Spread Attributes which the name represents it allows an expression to be expanded.

    var parts = ['two', 'three'];
    var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]
    

    And in this case(I'm gonna simplify it).

    //just assume we have an object like this:
    var person= {
        name: 'Alex',
        age: 35 
    }
    

    This:

    <Modal {...person} title='Modal heading' animation={false} />
    

    is equal to

    <Modal name={person.name} age={person.age} title='Modal heading' animation={false} />
    

    So in short, it's a neat short-cut, we can say.

    回答3

    The three dots represent the Spread Operator in ES6. It allows us to do quite a few things in Javascript:

    1. Concatenate arrays

      var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
      var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
      var games = [...shooterGames, ...racingGames];
      
      console.log(games)  // ['Call of Duty', 'Far Cry', 'Resident Evil',  'Need For Speed', 'Gran Turismo', 'Burnout']
      
    2. Destructuring an array

        var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
        var [first, ...remaining] = shooterGames;
        console.log(first); //Call of Duty
        console.log(remaining); //['Far Cry', 'Resident Evil']
      
    3. Combining two objects

      var myCrush = {
        firstname: 'Selena',
        middlename: 'Marie'
      };
      
      var lastname = 'my last name';
      
      var myWife = {
        ...myCrush,
        lastname
      }
      
      console.log(myWife); // {firstname: 'Selena',
                           //   middlename: 'Marie',
                           //   lastname: 'my last name'}
      

    There's another use for the three dots which is known as Rest Parameters and it makes it possible to take all of the arguments to a function in as one array.

    1. Function arguments as array

       function fun1(...params) { 
      
       }  
      
  • 相关阅读:
    04. SpringCloud实战项目-安装Docker
    03. SpringCloud实战项目-配置虚拟机网络
    02. SpringCloud实战项目-快速搭建Linux环境-运维必备
    01. SpringCloud实战项目-五分钟搞懂分布式基础概念
    docker安装redis
    docker 安装mysql
    安装docker
    配置虚拟机网络
    Vagrant快速搭建Ubuntu虚拟机环境
    5分钟搞懂分布式基础概念
  • 原文地址:https://www.cnblogs.com/chucklu/p/14177976.html
Copyright © 2011-2022 走看看