React组件封装中三大核心属性详细介绍
目录
- 1、介绍
- 2、state
- 概念
- 演示
- 3、props
- 概念
- props与state区别
- 4、refs
- 概念
- refs种类
- 5、父子组件
- 什么是父子组件
- 父子组件之间传值
1、介绍
React组件中默认封装了很多属性，有的是提供给开发者操作的，其中有三个属性非常重要：state、props、refs。
2、state
概念
state是类组件的一个默认属性，用于标识类组件的状态，负责更新UI，让页面动态变化，当state变化时，组件将被重新渲染。
函数组件没有对象属性（babel默认开启了局部严格模式，函数内部this指向undefined），所以函数组件没有state属性，因此函数组件只负责展示静态页面。
state的值是json对象类型，可以维护多个key-value的组合。
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>state属性</title>
</head>
<body>
<div id="container"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script type="text/babel" >
class ClassComponet extends React.Component{
count = 0;
//初始化state状态属性，值必须为对象
state = {now: new Date()};
//state对象里面的任何值变化，render都会被重新调用
render(){
console.log(this.count++);
return (
<div>
<h1>当前时间：{this.state.now.toString()}</h1>
<button onClick={this.changeTime}>时间开始动起来</button>
</div>
);
}
changeTime = ()=>{
clearInterval(this.timer);
this.timer = setInterval(()=>{
//注意：状态必须通过setState进行更新，否则无效
this.setState({now: new Date()});
},1000);
}
}
ReactDOM.render(<ClassComponet/>,document.getElementById('container'))
</script>
</body>
</html>
3、props
概念
props是组件的一个默认属性，用于组件外部向组件内部传值，或者组件之间相互进行传值。
每个组件都有props属性（原理：函数组件通过参数往内部传值，类组件通过构造器往内部传值）。
props属性值是只读的，组件自身不能修改props属性值。
组件的props属性值可以进行类型、必要性限制，也可以设置属性默认值。
props与state区别
- props是组件对外的，state是组件对内的。
- state属性值是可变的，props属性值是只读的。
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props属性</title>
</head>
<body>
<div id="container"></div>
<div id="container2"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<!-- 使用PropTypes需要引入prop-types -->
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
<script type="text/babel" >
class Person extends React.Component{
render(){
//解构赋值取出props内部属性
const {name,age,gender} = this.props;
return (
<div>
<ul>
<li>姓名：{name}</li>
<li>性别：{age}</li>
<li>年龄：{gender}</li>
</ul>
</div>
);
}
//对props属性值进行类型、必要性的限制(此属性针对类层面，所以定义为static)
//使用PropTypes需要引入prop-types
static propTypes = {
name:PropTypes.string.isRequired, //限制name必传，且为字符串
sex:PropTypes.string,//限制sex为字符串
age:PropTypes.number,//限制age为数值
speak:PropTypes.func,//限制speak为函数
}
//对props属性值设置默认值，当外部未传递时就会采用默认值
static defaultProps = {
sex:'男',//sex默认值为男
age:100 //age默认值为18
}
}
//通过组件标签属性向组件对象内部传递props属性值
ReactDOM.render(<Person name="张三" age={18} gender="男"/>,document.getElementById('container'))
//通过展开运算向组件对象内部传递props属性值
const person = {'name':'李四','age':20,'gender':'女'};
ReactDOM.render(<Person {...person}/>,document.getElementById('container2'))
</script>
</body>
</html>
4、refs
概念
组件内的标签，可以在标签上定义ref属性，用于标识标签自身，组件内便可以通过ref属性值获取到操作页面的真实DOM。
refs种类
- 字符串形式的ref
- 回调函数形式的ref
- React.createRef形式的ref
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>refs属性</title>
</head>
<body>
<div id="container"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script type="text/babel" >
class ClassComponet extends React.Component{
//React.createRef调用后可以返回一个容器，该容器仅能存储一个被ref所标识的节点
msg3 = React.createRef()
render(){
return (
<div>
输入框1：<input ref="msg1" type="text"/> <br/> {/*字符串形式的ref*/}
输入框2：<input ref={this.setInput2Ref} type="text"/> <br/> {/*回调函数形式的ref*/}
输入框3：<input ref={this.msg3} type="text"/> <br/> {/*React.createRef形式的ref*/}
<button onClick={this.showData1}>点击弹出输入框1内容</button> <br/>
<button onClick={this.showData2}>点击弹出输入框2内容</button> <br/>
<button onClick={this.showData3}>点击弹出输入框3内容</button> <br/>
</div>
);
}
showData1 = ()=>{
alert(this.refs.msg1.value);
}
//传递的参数就是标签位于页面的真实DOM，保存到组件中后续使用
setInput2Ref = (realDOM)=>{
this.msg2 = realDOM;
}
showData2 = ()=>{
alert(this.msg2.value);
}
showData3 = ()=>{
//React.createRef创建的容器存储被ref所标识的节点，需要通过current属性获取
alert(this.msg3.current.value);
}
}
ReactDOM.render(<ClassComponet/>,document.getElementById('container'))
</script>
</body>
</html>
5、父子组件
什么是父子组件
当组件之间嵌套使用时，外层组件就被称为父组件，内层组件就被称为子组件。
父子组件之间传值
这里借助state、props两大组件属性进行父子组件之间传值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子组件间传值</title>
</head>
<body>
<div id="container"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script type="text/babel" >
//父组件
class FatherComponet extends React.Component{
name = "小头爸爸";
state = {sonName:""}
getSonName = (sonName)=>{
this.setState({sonName})
return sonName;
}
render(){
return (
<div>
<h2>我是父组件：{this.name}，我的儿子是：{this.state.sonName}</h2>
<SonComponet name={this.name} getSonName={this.getSonName}/> {/*引入子组件，且通过props属性给子组件传值*/}
</div>
);
}
}
//子组件
class SonComponet extends React.Component{
name = "大头儿子";
render(){
const {name:fatherName} = this.props;
return (
<div>
<h3>我是子组件：{this.name}，我爸爸是：{fatherName}</h3>
<button onClick={this.myNameSendFather}>子组件传值给父组件</button>
</div>
);
}
myNameSendFather = ()=>{
const {getSonName} = this.props;
//子组件调用父组件的函数，通过参数将值传递给父组件
getSonName(this.name);
}
}
ReactDOM.render(<FatherComponet/>,document.getElementById('container'))
</script>
</body>
</html>
到此这篇关于React组件封装中三大核心属性详细介绍的文章就介绍到这了,更多相关React核心属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
React组件三大属性之state,props,refs
目录 1.1基本理解和使用 1.1.1 使用React开发者工具调试 1.1.2 定义组件的方式 1.1.3 注意 1.1.4 渲染类组件标签的基本流程 1.2 组件实例的三大核心属性之一:state 1.2.1 理解 1.2.2 案例 1.2.3 在类式组件使用state 1.2.4 在类式组件使用state的简写方式 1.2.3 强烈注意 1.3 组件实例的三大核心属性之一:props 1.3.1 理解 1.3.3 作用 1.3.4 在类式组件使用props 1.3.5 在函数式组件使用pr
-
React组件实例三大属性state props refs使用详解
目录 一. State 1.概念 2.State的简单用法 3. JS绑定事件 4.react 绑定事件 5.react this指向问题 6.修改state值 7.代码简写 二.props 1.概念 2.传参的基础方法.运算符传参 三.refs 定义 字符串形式的ref.回调函数下ref.createRef 创建ref容器 一. State 1.概念 概念:state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合),组件被称为状态机,通过更新组件的state来更新对应的
-
React styled-components设置组件属性的方法
问题 最近在试着用react做一个音乐播放器,在这之前其实并不了解styled-components,但由于使用css in js并且想实现hover效果,百度各种解决方案后发现了styled-components这个好东西,如果你看到了这篇博客,就证明你应该了解或者熟练运用styled-components了. 回到项目开发中,一个音乐播放器应该由多个组件组成,其中有一个list组件用于展示歌曲列表,就像这样 鹅...好像暴露了我的喜好... 每一列就是一个div(当然ul也是可以的),为了方
-
React组件封装中三大核心属性详细介绍
目录 1.介绍 2.state 概念 演示 3.props 概念 props与state区别 4.refs 概念 refs种类 5.父子组件 什么是父子组件 父子组件之间传值 1.介绍 React组件中默认封装了很多属性,有的是提供给开发者操作的,其中有三个属性非常重要:state.props.refs. 2.state 概念 state是类组件的一个默认属性,用于标识类组件的状态,负责更新UI,让页面动态变化,当state变化时,组件将被重新渲染. 函数组件没有对象属性(babel默认开启了局
-
深入理解React 三大核心属性
目录 1.State属性 2.Props 属性 3.Refs 属性 (1)字符串形式 (2)函数回调形式 (3)createRef创建ref容器 1.State 属性 React 把组件看成是一个状态机(State Machines).通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致. React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM). import React from 'react '; import Reac
-
C++ 封装 DLL 供 C# 调用详细介绍
目录 1.VLC代码封装 1.1 QT(C++)工程 1.2static 声明 m_instance 优化效率 1.3封装 DLL 1.4应用程序的导出函数 1.5 vlc 简单封装的具体实现 2.C# 调用 2.1C# 回调函数声明与定义 2.2C# 导出普通函数调用 1.VLC代码封装 1.1 QT(C++)工程 首先需要配置可使用 VLC 正常播放的 QT(C++)工程,获取VLC每一帧并渲染到Qwidget Libvlcapi public static class LIBVLCAPI
-
canvas 画布在主流浏览器中的尺寸限制详细介绍
canvas 画布在主流浏览器中的尺寸限制详细介绍 通过测试发现,canvas在不同浏览器下面有不同的最大尺寸限制. 大家都知道,canvas有自身的width,height属性来控制尺寸,用css的width,height,控制显示的大小.可以理解为canvas就是一个img,属性的width,height就是这个img的原图像素大小.但在各浏览器下,设置canvas尺寸时发现有最大尺寸限制.测试一下与大家分享. 测试代码 <!DOCTYPE html> <html> <h
-
PHP中error_reporting函数用法详细介绍
PHP中error_reporting函数用法详细介绍 PHP中对错误的处理会用到error_reporting函数,看到最多的是error_reporting(E_ALL ^ E_NOTICE),这个是什么意思呢?下面我们具体分析error_reporting函数. 定义用法 error_reporting() 设置 PHP 的报错级别并返回当前级别. 语法 error_reporting(report_level) 如果参数 report_level 未指定,当前报错级别将被返回.下面几项是
-
Android 自定义View时使用TypedArray配置样式属性详细介绍
Android 自定义View时使用TypedArray配置样式属性详细介绍 在自定义view时为了提高复用性和扩展性,可以为自定义的view添加样式属性的配置,比如自定义图片资源.文字大小.控件属性等,就这需要用到TypedArray类,下面以一个自定义的可点击扩展和收缩的TextView为例记录下这个类的简单使用. 先上效果图: 点击以后为 再贴代码: 1.自定义view类: /** * @title ExpandTextView * @description 可扩展TextView,可以
-
Maven中pom.xml配置文件详细介绍
setting.xml主要用于配置maven的运行环境等一系列通用的属性,是全局级别的配置文件:而pom.xml主要描述了项目的maven坐标,依赖关系,开发者需要遵循的规则,缺陷管理系统,组织和licenses,以及其他所有的项目相关因素,是项目级别的配置文件. 基础配置 一个典型的pom.xml文件配置如下: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org
-
Android中View绘制流程详细介绍
创建Window Window即窗口,这个概念在AndroidFramework中的实现为android.view.Window这个抽象类,这个抽象类是对Android系统中的窗口的抽象.在介绍这个类之前,我们先来看看究竟什么是窗口呢? 实际上,窗口是一个宏观的思想,它是屏幕上用于绘制各种UI元素及响应用户输入事件的一个矩形区域.通常具备以下两个特点: 独立绘制,不与其它界面相互影响: 不会触发其它界面的输入事件: 在Android系统中,窗口是独占一个Surface实例的显示区域,每个窗口的S
-
vue中mint-ui环境搭建详细介绍
vue中mint-ui环境搭建详细介绍 首先需要如下配置node (最好用淘宝源) $ npm install -g cnpm --registry=https://registry.npm.taobao.org 以及git 从官方github拉下来mint-ui git clone https://github.com/ElemeFE/mint-ui.git 进入mint-ui npm run dev 全程大概5-10分钟,出现 Build completed in 34.926s Chil
-
Android自定义控件属性详细介绍
Android自定义控件属性详细介绍 1. reference:参考某一资源ID. (1)属性定义: <declare-styleable name = "名称"> <attr name = "background" format = "reference" /> </declare-styleable> (2)属性使用: <ImageView android:layout_width = "