state和props

  • 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)
对象一旦创建就不可改变,只能通过销毁、重建来改变数据;通过判断内存地址是否一致,来确认对象是否经过修改。

上一篇:Ubuntu18.04 exfat


下一篇:JDBC查询优化,统计条数