React組件封裝中三大核心屬性詳細(xì)介紹
更新時(shí)間：2022年09月15日 10:14:20 作者：雨橄
這篇文章主要為大家介紹了React組件實(shí)例三大屬性state props refs使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
1、介紹
React組件中默認(rèn)封裝了很多屬性，有的是提供給開(kāi)發(fā)者操作的，其中有三個(gè)屬性非常重要：state、props、refs。
2、state
概念
state是類(lèi)組件的一個(gè)默認(rèn)屬性，用于標(biāo)識(shí)類(lèi)組件的狀態(tài)，負(fù)責(zé)更新UI，讓頁(yè)面動(dòng)態(tài)變化，當(dāng)state變化時(shí)，組件將被重新渲染。
函數(shù)組件沒(méi)有對(duì)象屬性（babel默認(rèn)開(kāi)啟了局部嚴(yán)格模式，函數(shù)內(nèi)部this指向undefined），所以函數(shù)組件沒(méi)有state屬性，因此函數(shù)組件只負(fù)責(zé)展示靜態(tài)頁(yè)面。
state的值是json對(duì)象類(lèi)型，可以維護(hù)多個(gè)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狀態(tài)屬性，值必須為對(duì)象
state = {now: new Date()};
//state對(duì)象里面的任何值變化，render都會(huì)被重新調(diào)用
render(){
console.log(this.count++);
return (
<div>
<h1>當(dāng)前時(shí)間：{this.state.now.toString()}</h1>
<button onClick={this.changeTime}>時(shí)間開(kāi)始動(dòng)起來(lái)</button>
</div>
);
}
changeTime = ()=>{
clearInterval(this.timer);
this.timer = setInterval(()=>{
//注意：狀態(tài)必須通過(guò)setState進(jìn)行更新，否則無(wú)效
this.setState({now: new Date()});
},1000);
}
}
ReactDOM.render(<ClassComponet/>,document.getElementById('container'))
</script>
</body>
</html>3、props
概念
props是組件的一個(gè)默認(rèn)屬性，用于組件外部向組件內(nèi)部傳值，或者組件之間相互進(jìn)行傳值。
每個(gè)組件都有props屬性（原理：函數(shù)組件通過(guò)參數(shù)往內(nèi)部傳值，類(lèi)組件通過(guò)構(gòu)造器往內(nèi)部傳值）。
props屬性值是只讀的，組件自身不能修改props屬性值。
組件的props屬性值可以進(jìn)行類(lèi)型、必要性限制，也可以設(shè)置屬性默認(rèn)值。
props與state區(qū)別
- props是組件對(duì)外的，state是組件對(duì)內(nèi)的。
- 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(){
//解構(gòu)賦值取出props內(nèi)部屬性
const {name,age,gender} = this.props;
return (
<div>
<ul>
<li>姓名：{name}</li>
<li>性別：{age}</li>
<li>年齡：{gender}</li>
</ul>
</div>
);
}
//對(duì)props屬性值進(jìn)行類(lèi)型、必要性的限制(此屬性針對(duì)類(lèi)層面，所以定義為static)
//使用PropTypes需要引入prop-types
static propTypes = {
name:PropTypes.string.isRequired, //限制name必傳，且為字符串
sex:PropTypes.string,//限制sex為字符串
age:PropTypes.number,//限制age為數(shù)值
speak:PropTypes.func,//限制speak為函數(shù)
}
//對(duì)props屬性值設(shè)置默認(rèn)值，當(dāng)外部未傳遞時(shí)就會(huì)采用默認(rèn)值
static defaultProps = {
sex:'男',//sex默認(rèn)值為男
age:100 //age默認(rèn)值為18
}
}
//通過(guò)組件標(biāo)簽屬性向組件對(duì)象內(nèi)部傳遞props屬性值
ReactDOM.render(<Person name="張三" age={18} gender="男"/>,document.getElementById('container'))
//通過(guò)展開(kāi)運(yùn)算向組件對(duì)象內(nèi)部傳遞props屬性值
const person = {'name':'李四','age':20,'gender':'女'};
ReactDOM.render(<Person {...person}/>,document.getElementById('container2'))
</script>
</body>
</html>
4、refs
概念
組件內(nèi)的標(biāo)簽，可以在標(biāo)簽上定義ref屬性，用于標(biāo)識(shí)標(biāo)簽自身，組件內(nèi)便可以通過(guò)ref屬性值獲取到操作頁(yè)面的真實(shí)DOM。
refs種類(lèi)
- 字符串形式的ref
- 回調(diào)函數(shù)形式的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調(diào)用后可以返回一個(gè)容器，該容器僅能存儲(chǔ)一個(gè)被ref所標(biāo)識(shí)的節(jié)點(diǎn)
msg3 = React.createRef()
render(){
return (
<div>
輸入框1：<input ref="msg1" type="text"/> <br/> {/*字符串形式的ref*/}
輸入框2：<input ref={this.setInput2Ref} type="text"/> <br/> {/*回調(diào)函數(shù)形式的ref*/}
輸入框3：<input ref={this.msg3} type="text"/> <br/> {/*React.createRef形式的ref*/}
<button onClick={this.showData1}>點(diǎn)擊彈出輸入框1內(nèi)容</button> <br/>
<button onClick={this.showData2}>點(diǎn)擊彈出輸入框2內(nèi)容</button> <br/>
<button onClick={this.showData3}>點(diǎn)擊彈出輸入框3內(nèi)容</button> <br/>
</div>
);
}
showData1 = ()=>{
alert(this.refs.msg1.value);
}
//傳遞的參數(shù)就是標(biāo)簽位于頁(yè)面的真實(shí)DOM，保存到組件中后續(xù)使用
setInput2Ref = (realDOM)=>{
this.msg2 = realDOM;
}
showData2 = ()=>{
alert(this.msg2.value);
}
showData3 = ()=>{
//React.createRef創(chuàng)建的容器存儲(chǔ)被ref所標(biāo)識(shí)的節(jié)點(diǎn)，需要通過(guò)current屬性獲取
alert(this.msg3.current.value);
}
}
ReactDOM.render(<ClassComponet/>,document.getElementById('container'))
</script>
</body>
</html>5、父子組件
什么是父子組件
當(dāng)組件之間嵌套使用時(shí)，外層組件就被稱(chēng)為父組件，內(nèi)層組件就被稱(chēng)為子組件。
父子組件之間傳值
這里借助state、props兩大組件屬性進(jìn)行父子組件之間傳值。
<!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}/> {/*引入子組件，且通過(guò)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;
//子組件調(diào)用父組件的函數(shù)，通過(guò)參數(shù)將值傳遞給父組件
getSonName(this.name);
}
}
ReactDOM.render(<FatherComponet/>,document.getElementById('container'))
</script>
</body>
</html>到此這篇關(guān)于React組件封裝中三大核心屬性詳細(xì)介紹的文章就介紹到這了,更多相關(guān)React核心屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React forwardRef的使用方法及注意點(diǎn)
React.forwardRef的API中ref必須指向dom元素而不是React組件，通過(guò)一段示例代碼給大家介紹了React forwardRef使用方法及注意點(diǎn)還有一些特殊情況分析，感興趣的朋友跟隨小編一起看看吧2021-06-06
react-redux的connect與React.forwardRef結(jié)合ref失效的解決
這篇文章主要介紹了react-redux的connect與React.forwardRef結(jié)合ref失效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
React如何利用Antd的Form組件實(shí)現(xiàn)表單功能詳解
這篇文章主要給大家介紹了關(guān)于React如何利用Antd的Form組件實(shí)現(xiàn)表單功能的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
圖文示例講解useState與useReducer性能區(qū)別
這篇文章主要為大家介紹了useState與useReducer性能區(qū)別圖文示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
React路由渲染方式與withRouter高階組件及自定義導(dǎo)航組件應(yīng)用詳細(xì)介紹
這篇文章主要介紹了React路由三種渲染方式、withRouter高階組件、自定義導(dǎo)航組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09
React中使用react-player 播放視頻或直播的方法
這篇文章主要介紹了React中使用react-player 播放視頻或直播，本文教大家如何使用react框架及創(chuàng)建實(shí)例的代碼,本文內(nèi)容簡(jiǎn)短給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-01-01
React Native提供自動(dòng)完成的下拉菜單的方法示例
這篇文章主要為大家介紹了React Native提供自動(dòng)完成的下拉菜單的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
react 實(shí)現(xiàn)圖片正在加載中 加載完成 加載失敗三個(gè)階段的原理解析
這篇文章主要介紹了react 實(shí)現(xiàn)圖片正在加載中 加載完成 加載失敗三個(gè)階段的,通過(guò)使用loading的圖片來(lái)占位，具體原理解析及實(shí)現(xiàn)代碼跟隨小編一起通過(guò)本文學(xué)習(xí)吧2021-05-05
Hook是React16.8的新增特性,它可以讓你在不編寫(xiě)class的情況下使用state以及其他的React特性,本文中講解的useState就是React中的其中一個(gè)Hook,這篇文章主要給大家介紹了關(guān)于React中useState理解和使用的相關(guān)資料,需要的朋友可以參考下2024-03-03
本篇文章主要介紹了react-native之ART繪圖方法詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08