- props是组件对外的接口,state是组件随内的接口
- props用于组件间的数据传递,而state用于组件内部的数据传递
state
state是私有的,直接修改不会触发render函数,页面不会渲染
//错误
This.state.isOpen = true
正确的修改方法是使用setState()
onClick={() => {
This.setState({ isOpen: !this.state.isOpen});
}}
构建函数constructor是唯一可以初始化state的地方,一旦离开初始化,setState()是修改state的唯一方法。
注意该方法是异步操作,不要依赖当前的state去计算下个state
Props
本质上,props就是传入函数的参数,是传入组件内部的数据。更准确的说,是从父组件传向子组件的数据。
使用方法示例:
数据以组件属性的形式传递给子组件
<Robot id={r.id} email={r.email} name={r.name} />
子组件:
import React from "react";
import styles from "./robot.module.css"
interface RobotProps {
id: number;
name: string;
email: string;
}
// 定义Robot为函数组件,<RobotProps>泛型类型,可写为{props},propt用来传递数据,此处使用解构赋值直接展开数据{ id, name, email }
const Robot: React.FC<RobotProps> = ({ id, name, email }) => {
return (
<div className={styles.cardContainer}>
<img alt="robot" src={`https://robohash.org/${id}`} />
<h2>{name}</h2>
<p>{email}</p>
</div>
);
};
export default Robot;
所有的Props都是只读的(immutable)
对象一旦创建就不可改变,只能通过销毁、重建来改变数据;通过判断内存地址是否一致,来确认对象是否经过修改。