React中的State与Props
2024-08-21 08:13:59
一、State
1、什么是 state
一个组件的显示形态可以由数据状态和外部参数决定，其中，数据状态为 state，外部参数为 props
2、state 的使用
组件初始化时，通过 this.state 给组件设置一个初始的 state，在第一次 render 时就会用这个数据渲染组件
class ItemList extends React.Component {
constructor() {
super();
this.state = {
data: '123'
};
}
render() {
return ({
this.state.data
})
}
}
3、setState 修改数据
state 可以通过 this.setState() 来修改数据，() 中接收一个对象或函数，只需要传入要更新的部分即可
注意：调用 this.setState 方法时，React 会重新调用 render 方法
class ItemList extends React.Component {
constructor() {
super();
this.state = {
name: 'hainiudd',
age: 21,
}
}
componentDidMount() {
this.setState({
age: 22
})
}
}
setState 是异步的，如果接收第二个参数，其内容会在第一个参数调用完成后被调用
4、总结
State 用于组件保存、控制以及修改自己的状态，只能在 constructor 中初始化，是组件的私有属性，不可通过外部访问和修改，通过组件内部的 this.setState 修改时会导致组件重新渲染
二、Props
1、什么是 props
props 可以理解为从外部传入组件内部的数据
2、props 的使用
父组件通过自定义属性进行传值，这里以传 lastName 的值为例：
Parent.js
class Parent extends React.Component {
render() {
return (
<div>
<Child lastName='Liu' />
</div>
)
}
}
子组件通过 this.props 获取，这里接收父组件传过来 lastName 的值
Child.js
class Child extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
return (
<div>
<h1>My lastname is {this.props.lastName}</h1>
</div>
)
}
}
渲染父组件：
ReactDOM.render(
<div><Parent /></div>,
document.getElementById('root')
);
运行结果：
3、props 的只读性
组件无论是使用函数声明还是 class 声明，都不能改变自身的 props，只有通过父组件重新渲染才可以把新的 props 传入组件中
4、总结
Props 是一个从外部传入组件的参数，用于父组件向子组件传递数据，具有可读性
三、State 与 Props 的区别
1、State 是组件自身的数据，可以改变
2、Props 是外部传入的数据，不可改变
最新文章
- 自动布局报错（两条连线冲突）：Unable to simultaneously satisfy constraints
- Vue.js之v-for
- .使用 HTML+CSS 实现如图布局，border-widht 5px，一个格子大小是 50*50，hover时候边框变为红色（兼容IE6+，考虑语义化的结构）
- Learning Puppet — Variables, Conditionals, and Facts
- Spark源码分析环境搭建
- 使用MSBUILD 构建时出错 error MSB3086: Task could not find "sgen.exe" using the SdkToolsPath的解决方法
- [转] shell字符串操作方法，以及实例
- JavaScript高级程序设计（第三版）学习笔记13、14章
- 【Python】代码行数统计
- xcodebuild导出ipa方法
- B. Fixed Points
- jquery live hover事件的替代写法
- aix下java程序运行问题
- cloud-init 工作原理 - 每天5分钟玩转 OpenStack（171）
- java 8 总结 之lambda
- 深入理解java虚拟机_第三章（上）----->垃圾收集器与内存分配策略
- JavaWeb核心技术学习 - 1.从JDBC说起
- java工具类(三)之生成若干位随机数
- Contest Setting 2018 ICPC Pacific Northwest Regional Contest dp
- Testing Round #12 A,B,C 讨论，贪心，树状数组优化dp