React組件封裝中三大核心屬性詳細(xì)介紹
更新時間：2022年09月15日 10:14:20 作者：雨橄
這篇文章主要為大家介紹了React組件實例三大屬性state props refs使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
1、介紹
React組件中默認(rèn)封裝了很多屬性，有的是提供給開發(fā)者操作的，其中有三個屬性非常重要：state、props、refs。
2、state
概念
state是類組件的一個默認(rèn)屬性，用于標(biāo)識類組件的狀態(tài)，負(fù)責(zé)更新UI，讓頁面動態(tài)變化，當(dāng)state變化時，組件將被重新渲染。
函數(shù)組件沒有對象屬性（babel默認(rèn)開啟了局部嚴(yán)格模式，函數(shù)內(nèi)部this指向undefined），所以函數(shù)組件沒有state屬性，因此函數(shù)組件只負(fù)責(zé)展示靜態(tài)頁面。
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狀態(tài)屬性，值必須為對象
state = {now: new Date()};
//state對象里面的任何值變化，render都會被重新調(diào)用
render(){
console.log(this.count++);
return (
<div>
<h1>當(dāng)前時間：{this.state.now.toString()}</h1>
<button onClick={this.changeTime}>時間開始動起來</button>
</div>
);
}
changeTime = ()=>{
clearInterval(this.timer);
this.timer = setInterval(()=>{
//注意：狀態(tài)必須通過setState進行更新，否則無效
this.setState({now: new Date()});
},1000);
}
}
ReactDOM.render(<ClassComponet/>,document.getElementById('container'))
</script>
</body>
</html>3、props
概念
props是組件的一個默認(rèn)屬性，用于組件外部向組件內(nèi)部傳值，或者組件之間相互進行傳值。
每個組件都有props屬性（原理：函數(shù)組件通過參數(shù)往內(nèi)部傳值，類組件通過構(gòu)造器往內(nèi)部傳值）。
props屬性值是只讀的，組件自身不能修改props屬性值。
組件的props屬性值可以進行類型、必要性限制，也可以設(shè)置屬性默認(rèn)值。
props與state區(qū)別
- props是組件對外的，state是組件對內(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>
);
}
//對props屬性值進行類型、必要性的限制(此屬性針對類層面，所以定義為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ù)
}
//對props屬性值設(shè)置默認(rèn)值，當(dāng)外部未傳遞時就會采用默認(rèn)值
static defaultProps = {
sex:'男',//sex默認(rèn)值為男
age:100 //age默認(rèn)值為18
}
}
//通過組件標(biāo)簽屬性向組件對象內(nèi)部傳遞props屬性值
ReactDOM.render(<Person name="張三" age={18} gender="男"/>,document.getElementById('container'))
//通過展開運算向組件對象內(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)識標(biāo)簽自身，組件內(nèi)便可以通過ref屬性值獲取到操作頁面的真實DOM。
refs種類
- 字符串形式的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)用后可以返回一個容器，該容器僅能存儲一個被ref所標(biāo)識的節(jié)點
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}>點擊彈出輸入框1內(nèi)容</button> <br/>
<button onClick={this.showData2}>點擊彈出輸入框2內(nèi)容</button> <br/>
<button onClick={this.showData3}>點擊彈出輸入框3內(nèi)容</button> <br/>
</div>
);
}
showData1 = ()=>{
alert(this.refs.msg1.value);
}
//傳遞的參數(shù)就是標(biāo)簽位于頁面的真實DOM，保存到組件中后續(xù)使用
setInput2Ref = (realDOM)=>{
this.msg2 = realDOM;
}
showData2 = ()=>{
alert(this.msg2.value);
}
showData3 = ()=>{
//React.createRef創(chuàng)建的容器存儲被ref所標(biāo)識的節(jié)點，需要通過current屬性獲取
alert(this.msg3.current.value);
}
}
ReactDOM.render(<ClassComponet/>,document.getElementById('container'))
</script>
</body>
</html>5、父子組件
什么是父子組件
當(dāng)組件之間嵌套使用時，外層組件就被稱為父組件，內(nèi)層組件就被稱為子組件。
父子組件之間傳值
這里借助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;
//子組件調(diào)用父組件的函數(shù)，通過參數(shù)將值傳遞給父組件
getSonName(this.name);
}
}
ReactDOM.render(<FatherComponet/>,document.getElementById('container'))
</script>
</body>
</html>到此這篇關(guān)于React組件封裝中三大核心屬性詳細(xì)介紹的文章就介紹到這了,更多相關(guān)React核心屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Fiber可以理解為一個執(zhí)行單元，每次執(zhí)行完一個執(zhí)行單元，React Fiber就會檢查還剩多少時間，如果沒有時間則將控制權(quán)讓出去，然后由瀏覽器執(zhí)行渲染操作，這篇文章主要介紹了React Fiber架構(gòu)原理剖析,需要的朋友可以參考下2022-11-11
React實現(xiàn)類似淘寶tab居中切換效果的示例代碼
這篇文章主要介紹了React實現(xiàn)類似淘寶tab居中切換效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過濾器
這篇文章主要介紹了如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過濾器,在vue及react中經(jīng)常會遇到，今天通過實例代碼給大家講解，需要的朋友可以參考下2018-11-11
react+ts實現(xiàn)簡單jira項目的最佳實踐記錄
這篇文章主要介紹了react+ts實現(xiàn)簡單jira項目，本文通過圖文實例相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-07-07
解決antd的Table組件使用rowSelection屬性實現(xiàn)多選時遇到的bug
這篇文章主要介紹了解決antd的Table組件使用rowSelection屬性實現(xiàn)多選時遇到的bug問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了react hooks實現(xiàn)原理,文中給大家介紹了useState dispatch 函數(shù)如何與其使用的 Function Component 進行綁定，節(jié)后實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
本文給大家分享React鼠標(biāo)多選功能，通過導(dǎo)入組件直接包裹已經(jīng)設(shè)計好的列表即可，操作簡單方便,對React鼠標(biāo)多選相關(guān)知識感興趣的朋友一起看看吧2021-05-05
這篇文章主要介紹了如何基于react實現(xiàn)下拉刷新效果,在下拉的時候會進入loading狀態(tài),文中有詳細(xì)的代碼示例供大家參考,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-03-03
antd?是基于?Ant?Design?設(shè)計體系的?React?UI?組件庫，主要用于研發(fā)企業(yè)級中后臺產(chǎn)品，這篇文章主要介紹了React中使用antd組件,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了React?hooks?useState異步問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08