React中关于props的一个问题

Question

关于操作React中的props，为什么会出现下面的两种情况，不知道该如何解释，any help will be great，thank you...

var Demo=React.createClass({
  test1:function(){
    this.props.arr1=2;
    console.log(this.props.arr1);//TypeError: "arr" is read-only
  },
  test2:function(){
    this.props.arr2.push(2);
    console.log(this.props.arr2);//Array [ 1, 2 ]
  },
  getDefaultProps:function(){
    return {arr1:1,arr2:[1]};
  },
  render:function(){
    return (
    <div>
      <div onClick={this.test1}>demo1</div>
      <div onClick={this.test2}>demo2</div>
    </div>
    )
  },
});
 ReactDOM.render(<Demo /> , document.body);

这该如何解释呢？是关于值类型和引用类型的原因么

Answer 1

你可以在test2里面尝试下 this.props.arr2 = [1, 2]就知道是不是值和引用的原因

Answer 2

谁说告诉你只读了。state，props都可以读者