日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React組件封裝中三大核心屬性詳細介紹_React

作者：雨橄 ? 更新時間： 2022-11-07 編程語言

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>

原文鏈接：https://blog.csdn.net/xiao_yu_gan/article/details/126824734

欄目分類
最近更新