您现在的位置是：网站首页> 编程资料编程资料

React组件三大属性之state,props,refs_React_

2023-05-24 362人已围观

简介 React组件三大属性之state,props,refs_React_

1.1基本理解和使用

1.1.1 使用React开发者工具调试

React Developer Tools

1.1.2 定义组件的方式

Ⅰ.函数式组件：

执行了ReactDOM.render(…之后发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。

类的基本知识复习移步到vscode

Ⅱ.类式组件：

复杂组件：如果组件是有状态的，那么就是复杂组件。

1.2.4 在类式组件使用state的简写方式

1.2.3 强烈注意

组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined，如何解决？

①强制绑定this：通过函数对象的bind()
②箭头函数 ()=>{}

状态数据，不能直接修改或更新，状态必须通过setState进行修改

1.3 组件实例的三大核心属性之一：props

1.3.1 理解

每个组件对象都会有props(properties 的简写)属性
组件标签的所有属性都保存在props中 1.3.2 案例

需求: 自定义用来显示一个人员信息的组件

姓名必须指定，且为字符串类型
性别为字符串类型，如果性别没有指定，默认为男
年龄为字符串类型，且为数字类型，默认值为18

效果如下:

1.3.3 作用

通过标签属性从组件外向组件内传递变化的数据
注意: 组件内部不要修改props数据，因为props是只读的

1.3.4 在类式组件使用props

先从内部读取某个属性值：

//实例对象身上有个属性props，需要传值进去，那怎么传呢？html标签能写标签属性（key：value），那么组件标签（）也能写属性 // 解构赋值 提前从props身上拿到这三个属性 const { name, age, sex } = this.props

对props中的属性值进行类型限制和必要性限制：

第一种方式（React v15.5 开始已弃用）：

Person.propTypes = { name: React.PropTypes.string.isRequired, age: React.PropTypes.number }

第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）

//给Person加上propTypes属性，react就能帮你限制了 //写在Person类外面 Person.propTypes = { // 具体的propTypes规则，要去PropTypes（React里面内置的一个属性）里面找 name: PropTypes.string.isRequired, //限制name必传，且为字符串 age: PropTypes.number //限制age为数值 }

在类式组件使用props的简写方式

// 用static表示给类自身加上一个propTypes和defaultProps属性，而不是给类的实例对象加属性 // 写在Person类里面 static propTypes = { name: PropTypes.string.isRequired, //限制name必传，且为字符串 sex: PropTypes.string, //限制sex为字符串 age: PropTypes.number, //限制age为数值 } static defaultProps = { sex: '男', //sex默认值为不男不女 age: 18 //age默认值为18 }

扩展属性: 将对象的所有属性通过props传递

// 展开运算符在对对象使用时，应当注意以{}包裹起来  //...展开运算符具体运用看vscode

默认属性值：

Person.defaultProps = { age: 18, //age默认值为18 sex:'男'//sex默认值为男 }

组件类的构造函数：

//开发中很少写构造器，能省则省 // 构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props constructor(props){ // 只要写了构造器，就一定要调用super(),一定要传props super(props) console.log(props)//打印所有属性 }