React-组件Props和State的区别
props 和 state 的区别
props 和 state 都是用来存储数据的
- props 存储的是父组件传递归来的数据
- state 存储的是自己的数据
- props 是只读的, 也就是说只可以进行使用，不可以进行修改
import React from 'react';
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
age: 18
}
}
render() {
return (
<div>
<p>{this.props.name}</p>
<p>{this.state.age}</p>
<button onClick={() => {
this.btnClick();
}}>Home按钮
</button>
</div>
)
}
btnClick() {
this.props.name = '小灰灰';
}
}
class App extends React.Component {
render() {
return (
<div>
<Home name={'BNTang'}/>
</div>
)
}
}
export default App;
- state 是可读可写的，如果直接修改是不会触发页面的更新的
btnClick() {
this.state.age = 666;
console.log(this.state.age);
}
- 如果想触发页面的更新得要通过 setState 进行设置
btnClick() {
this.setState({
age: 666
});
}
官方文档：
