React组件封装中三大核心属性详细介绍_React_

1、介绍

React组件中默认封装了很多属性，有的是提供给开发者操作的，其中有三个属性非常重要：state、props、refs。

2、state

概念

state是类组件的一个默认属性，用于标识类组件的状态，负责更新UI，让页面动态变化，当state变化时，组件将被重新渲染。

函数组件没有对象属性（babel默认开启了局部严格模式，函数内部this指向undefined），所以函数组件没有state属性，因此函数组件只负责展示静态页面。

state的值是json对象类型，可以维护多个key-value的组合。

演示

3、props

概念

props是组件的一个默认属性，用于组件外部向组件内部传值，或者组件之间相互进行传值。

每个组件都有props属性（原理：函数组件通过参数往内部传值，类组件通过构造器往内部传值）。

props属性值是只读的，组件自身不能修改props属性值。

组件的props属性值可以进行类型、必要性限制，也可以设置属性默认值。

props与state区别

• props是组件对外的，state是组件对内的。
• state属性值是可变的，props属性值是只读的。

演示

4、refs

概念

组件内的标签，可以在标签上定义ref属性，用于标识标签自身，组件内便可以通过ref属性值获取到操作页面的真实DOM。

refs种类

• 字符串形式的ref
• 回调函数形式的ref
• React.createRef形式的ref

演示

5、父子组件

什么是父子组件

当组件之间嵌套使用时，外层组件就被称为父组件，内层组件就被称为子组件。

父子组件之间传值

这里借助state、props两大组件属性进行父子组件之间传值。

到此这篇关于React组件封装中三大核心属性详细介绍的文章就介绍到这了,更多相关React核心属性内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！