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