Props和State都是控制页面变化的数据
区别:
Props是组件对外的接口,而State是组件对内的接口
Props用于组件间数据传递,而State用于组件内部的数据传递
1.State
State是私有的,可以认为state是组件的"私有属性",
1.1.初始化state
构建函数constructor是唯一可以初始化state的地方
// 初始化组件 state
constructor(props: Props) {
super(props);
this.state = {
isOpen: false,
count: 0,
}
}
1.2.修改State:
一旦离开了constructor,只能用setState() 函数来修改State:
错误:直接修改state,组件不会触发render函数,页面不会渲染
正确:使用setState()函数修改state
注意:state的更新是异步的
调用setState后,state不会立刻改变,是异步操作,所以不要依赖当前的state,计算下个state。
2.Props
Props是Properties的缩写,组件属性的意思
理解为:从组件外部传入组件内部的数据,因为react数据是单向流动的,所以准确地说,Props是从父组件向子组件传递的数据。
2.1.props是只读属性,Immutable
对象一旦创建就不可改变,只能通过销毁、重建来改变数据
通过判断内存地址的是否一致,来确认对象是否有经过修改
2.2.用法
父组件:
<div className={styles.robotList}>
{robots.map((r, index) => (
<Robot key={index} id={r.id} name={r.name} email={r.email} />
))}
</div>
子组件:
// 创建函数式组件
const Robot: React.FC<RobotProps> = ({id, name, email}) => {
return (
<div className= {styles.cardContainer}>
<img src={`https://robohash.org/${id}`} alt="robot"/>
<h2>{name}</h2>
<p>{email}</p>
</div>
)
}