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={'yangbuyiya'}/> </div> ) } } export default App;
- state 是可读可写的，如果直接修改是不会触发页面的更新的
btnClick() { this.state.age = 666; console.log(this.state.age); }
- 如果想触发页面的更新得要通过 setState 进行设置
btnClick() { this.setState({ age: 666 }); }
官方文档：
- https://zh-hans.reactjs.org/docs/components-and-props.html
- https://zh-hans.reactjs.org/docs/state-and-lifecycle.html
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
