react中props与state的区别理解

我当初最开始学习react的时候，一直搞不明白props和state的区别。我看别人的todo代码的时候，我一直以为props和state它们是同一种生物，他们有着相同的功能，但是他们却以不同的形式出现。

我也询问了前辈，前辈告诉我一个只可读，一个可读可写。

当然，我一头雾水。

但是还好，经过我多次深入的研究，我终于理解了props和state的区别了。

---

props

function Hello(props){
    return <div>hello world  +  {props.name}</div>
}

React.render(
    <Hello name="zhangshan"/>,
    document.getElementById('app')
)

<Hello name="zhangshan"/>,是什么意思？

为什么我们在方法里面获取的数据是{props.name}里面获取到我们传递的name的？

其实就是我们把参数name="zhangshan" 放在了props里，props这个东西不需要我们定义，这个是react里面就存在的一个东西，专门用来存放我们的要传递的参数的。

但是在我们的function Hello(props){里面，必须显式地传入我们的props。

那如果要传递很多参数呢？

function Hello(props){
    return <div>hello world  +  {props.name} + {props.id}</div>
}

React.render(
    <Hello name="zhangshan" id={12}/>,
    document.getElementById('app')
)

相当于，我们把name和id都放入了props里面。props里面到底能够容纳多少的参数，目前我们不考虑。

但是我们发现id={12}，这个参数的样式跟到我们的name="zhangshan"不一样，为什么呢？

id我们需要传入的是一个数字，所以我们不能用分号，如果我们用分号的话id=“12”，那么12就是一个字符串了。

最后还有一个很重要的点：props是只读的

什么是只读呢？

意思是任何修改props里面参数的操作，都是错误的！例如下面：

function Hello(props){
    props.name="lisi"
    return <div>hello world  +  {props.name} + {props.id}</div>
}

（题外话：这里我们用到的是function方式创建的Hello组件，下面我们要有class类的方式来创建我们的Hello组件）

---

this.props

好奇怪，怎么又有了this.props？

class Hello extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return <div>hello world + {this.props.name} + {this.props.age}</div>
    }
}

this.props和props其实是一样性质的，他们只是在不同的地方有着不同的用法。

在class类创建的组件里面。如果我们要传递参数，那么我们就必须使用this.props这种写法，

并且，我们还必须在constructor以及super里面显式地传递入我们的props。

---

state

首先state是私有的数据对象，只会存在class类创建的组件里面

class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: '这是 Hello2 组件的私有msg数据',
    }
  }
   render() {
    return 
      <h5>{this.state.msg}</h5>
   }
}

同理，如果我们要用state的话，也是通过this.state来调用state里面的数据。

但是与props不一样的是，state是可读可写的。