React 批量传递props

承接上文

    <script type="text/babel">
      class Person extends React.Component {
        render() {
          console.log("this", this);
          const { name, sex, age } = this.props;
          return (
            <ul>
              <li>姓名：{name}</li>
              <li>性别：{sex}</li>
              <li>年龄：{age}</li>
            </ul>
          );
        }
      }
      ReactDOM.render(
        <Person name="tom" sex="女" age="18" />,document.getElementById("test")
      );
    </script>

这里传递的值比较少，当需要传递十几个值时，或是真实项目开发中，值由后端返回时，就不好使用多组key,value实现
我们可以用扩展运算符来实现。

    <script type="text/babel">
      class Person extends React.Component {
        render() {
          console.log("this", this);
          const { name, sex, age } = this.props;
          return (
            <ul>
              <li>姓名：{name}</li>
              <li>性别：{sex}</li>
              <li>年龄：{age}</li>
            </ul>
          );
        }
      }
      const p = {name:'tom',sex:'女',age:'18'}
      ReactDOM.render(
        <Person {...p} />,document.getElementById("test")
      );
    </script>

不过使用时需要注意一下，扩展运算符并不能直接展开对象

构造字面量对象时使用展开语法

回过头我们发现，在react中<Person {…p} />,document.getElementById(“test”)，这样子写是没有问题的，但是不能理解成复制了一个对象p（如下图所示）

在react中…p外层的{}代表的意思是，要在里面写js表达式，而在上图中定义的…c外层{},是提前定义好的语法结构，所以这两个花括号不是同一个意思（可以理解react中的p外层{}是当做分隔符使用），我们写的还是…p。这里就回到了上述问题，p是一个对象，展开运算符不能直接展开对象，为什么能够实现展开？是因为babel+react中可以这样允许这样实现。
但不能这样写

    <script type="text/babel">
      class Person extends React.Component {
        render() {
          console.log("this", this);
          const { name, sex, age } = this.props;
          return (
            <ul>
              <li>姓名：{name}</li>
              <li>性别：{sex}</li>
              <li>年龄：{age}</li>
            </ul>
          );
        }
      }
      const p = { name: "tom", sex: "女", age: "18" };
      console.log("p", ...p);
      ReactDOM.render(<Person {...p} />, document.getElementById("test"));
    </script>

在react中{…p}仅仅限于HTML标签属性中使用。
题外话，如何复制对象的时候，修改属性