state和props

2022-02-21 15:36:09 阅读：147 来源： 互联网

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

标签：name,Robot,state,props,组件,email
来源： https://www.cnblogs.com/gracexin/p/15919082.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

state和props