一看就會(huì)的React入門(mén)

這篇具有很好參考價(jià)值的文章主要介紹了一看就會(huì)的React入門(mén)。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

簡(jiǎn)介

入門(mén)案例

直接創(chuàng)建

?函數(shù)式創(chuàng)建

類(lèi)實(shí)例創(chuàng)建?

?組件實(shí)例三大核心屬性

state

代碼演示?

props

refs

簡(jiǎn)介

1). Facebook開(kāi)源的一個(gè)js庫(kù)
2). 一個(gè)用來(lái)動(dòng)態(tài)構(gòu)建用戶(hù)界面的js庫(kù)
3). React的特點(diǎn)
?? ?Declarative(聲明式編碼)
?? ?Component-Based(組件化編碼)
?? ?Learn Once, Write Anywhere(支持客戶(hù)端與服務(wù)器渲染)
?? ?高效
?? ?單向數(shù)據(jù)流
4). React高效的原因
?? ?虛擬(virtual)DOM, 不總是直接操作DOM(批量更新, 減少更新的次數(shù))?
?? ?高效的DOM Diff算法, 最小化頁(yè)面重繪(減小頁(yè)面更新的區(qū)域)

入門(mén)案例

直接創(chuàng)建

首選引入舊版所需js文件

一看就會(huì)的React入門(mén)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 引入react核心庫(kù) -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx轉(zhuǎn)為js -->
<script src="../js/babel.min.js"></script>

<body>
    <div id="test">

    </div>

</body>
<!-- 這里一定要指明是babel類(lèi)型 -->
<script type="text/babel">

    /**
     * jsx語(yǔ)法:
     *    1 定義虛擬dom時(shí) 不要加引號(hào) 
     *    2 標(biāo)簽中混入js表達(dá)式時(shí)要用{}
     *    3 樣式的類(lèi)名不要用class 要用className
     *    4 內(nèi)聯(lián)樣式 要用style={{key:name}}形式寫(xiě)
     *    5 只有一個(gè)根標(biāo)簽
     *    6 標(biāo)簽必須閉合
     *    7 標(biāo)簽首字母
     *      (1) 若小寫(xiě)字母開(kāi)頭 則將該標(biāo)簽轉(zhuǎn)為html同名元素 若html中無(wú)該標(biāo)簽
     *          對(duì)應(yīng)的同名元素 則報(bào)錯(cuò)
     *      (2) 若大寫(xiě)字母開(kāi)頭 react就去渲染對(duì)應(yīng)的組件 若組件沒(méi)有定義 則報(bào)錯(cuò)
     * 
     * 
    */   

    const data = ['Vue','React','Angular']
    //創(chuàng)建虛擬dom
    const vdom = (
      <div>
            <h1 >hello react</h1>
            <ul>{
                data.map((item,index)=>{
                    return <li key={index}>{item}</li>
                })   
            }
                 
            </ul>    
        </div>
    )
    //渲染 虛擬 dom到頁(yè)面
    ReactDOM.render(vdom,document.getElementById('test')) 



</script>

</html>

</html>

所需js文件點(diǎn)擊鏈接下載?

點(diǎn)擊下載 react資料

提取碼：cowf

打開(kāi)瀏覽器測(cè)試:

一看就會(huì)的React入門(mén)

?函數(shù)式創(chuàng)建

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 引入react核心庫(kù) -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx轉(zhuǎn)為js -->
<script src="../js/babel.min.js"></script>

<body>
    <div id="test">

    </div>

</body>
<!-- 這里一定要指明是babel類(lèi)型 -->
<script type="text/babel">
    //函數(shù)式創(chuàng)建虛擬dom
    function MyCompent(){
        return <h1> 這是一個(gè)函數(shù)組件化Dom</h1>
    }
    //渲染 組件到頁(yè)面
    ReactDOM.render(<MyCompent/>,document.getElementById('test')) 
   /*
    執(zhí)行流程
      1 react解析組件標(biāo)簽 找到了MyCompemt組件
      2 發(fā)現(xiàn)組件是使用函數(shù)定義的 隨后調(diào)用該函數(shù) 將返回的虛擬dom轉(zhuǎn)為真實(shí)dom 隨后呈現(xiàn)在頁(yè)面中 
   */


</script>

</html>

一看就會(huì)的React入門(mén)

類(lèi)實(shí)例創(chuàng)建?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 引入react核心庫(kù) -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx轉(zhuǎn)為js -->
<script src="../js/babel.min.js"></script>

<body>
    <div id="test">

    </div>

</body>
<!-- 這里一定要指明是babel類(lèi)型 -->
<script type="text/babel">
    //類(lèi)式創(chuàng)建虛擬dom
    class MyCompent extends React.Component{
        render(){
            console.log(this)
            return <h1> 這是一個(gè)類(lèi)定義的組件(適用于復(fù)雜組件的定義)</h1>
        }
       
    }
    //渲染 組件到頁(yè)面
    ReactDOM.render(<MyCompent/>,document.getElementById('test')) 
   /*
    執(zhí)行流程
      1 react解析組件標(biāo)簽 找到了MyCompemt組件
      2 發(fā)現(xiàn)組件是使用類(lèi)定義的  隨后new出該類(lèi)的實(shí)例 并通過(guò)該實(shí)例調(diào)用到原型上的render方法
      3 將render返回的虛擬dom轉(zhuǎn)化為真實(shí)dom 隨后呈現(xiàn)在頁(yè)面中
   */


</script>

</html>

一看就會(huì)的React入門(mén)

?組件實(shí)例三大核心屬性

state

?(1) state是組件對(duì)象最重要的屬性值是對(duì)象類(lèi)型(可以包含多個(gè) key:value的組合)

?(2) 組件也被稱(chēng)為"狀態(tài)機(jī)" 通過(guò)更新組件的state來(lái)更新對(duì)應(yīng)的頁(yè)面顯示(重新渲染組件)

? 嚴(yán)格注意

? (1) 組件中render方法中的this為組件實(shí)例對(duì)象

? (2) 組件自定義的方法中 this指向?yàn)閡ndefined 解決辦法:

? ? ? ? 強(qiáng)制綁定this :通過(guò)函數(shù)對(duì)象的bind()

? ? ? ? 箭頭函數(shù) ()=>{}

? (3) 狀態(tài)數(shù)據(jù) 不能直接修改或更新要使用 setState({key:value})來(lái)進(jìn)行修改

代碼演示?

完整類(lèi)版本(只做演示學(xué)習(xí)用)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 引入react核心庫(kù) -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx轉(zhuǎn)為js -->
<script src="../js/babel.min.js"></script>

<body>
    <div id="test">

    </div>

</body>
<!-- 這里一定要指明是babel類(lèi)型 -->
<script type="text/babel">
    //類(lèi)式創(chuàng)建虛擬dom
    class MyCompent extends React.Component{
        //構(gòu)造器只調(diào)用1次
        constructor(props){
               super(props)
               this.state = {sunny:true}
               //解決changeWeather中this的指向問(wèn)題
               this.changeWeather = this.changeWeather.bind(this)
        }
        //render調(diào)用 n+1次  1是初始化就調(diào)用了一次  n是狀態(tài)更新的次數(shù)
        render(){
            //打印實(shí)例對(duì)象
            console.log('打印實(shí)例對(duì)象');
            console.log(this)
            return <h1 onClick={this.changeWeather}>今天是{this.state.sunny ? '晴天':'陰天'}</h1>
        }
        //點(diǎn)擊幾次調(diào)用幾次
        changeWeather(){
            //這里的changeWeather放在哪里? MyComponet原型對(duì)象上 供實(shí)例來(lái)使用
            //由于 changeWeather是作為 onClick的回調(diào) 所以不是通過(guò)實(shí)例調(diào)用的 是直接調(diào)用
            //類(lèi)中的方法默認(rèn)開(kāi)啟的了局部的嚴(yán)格模式 所以changeWeather中的this為undefined
            //注意 : 狀態(tài)必須通過(guò)setState 來(lái)進(jìn)行更新
            this.setState({sunny:!this.state.sunny})
        }
       
    }
    //渲染 組件到頁(yè)面
    ReactDOM.render(<MyCompent/>,document.getElementById('test')) 


</script>

</html>

一看就會(huì)的React入門(mén)

?當(dāng)我們點(diǎn)擊頁(yè)面中的文字時(shí),更改當(dāng)前實(shí)例的state屬性為false,則文字變?yōu)殛幪?/p>

一看就會(huì)的React入門(mén)

? 一看就會(huì)的React入門(mén)

代碼簡(jiǎn)化版本(開(kāi)發(fā)主要用版本)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 引入react核心庫(kù) -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx轉(zhuǎn)為js -->
<script src="../js/babel.min.js"></script>

<body>
    <div id="test">

    </div>

</body>
<!-- 這里一定要指明是babel類(lèi)型 -->
<script type="text/babel">
    //類(lèi)式創(chuàng)建虛擬dom
    class MyCompent extends React.Component{
        state = {sunny:true}
        //render調(diào)用 n+1次  1是初始化就調(diào)用了一次  n是狀態(tài)更新的次數(shù)
        render(){
            console.log(this)
            return <h1 onClick={this.changeWeather}>今天是{this.state.sunny ? '晴天':'陰天'}</h1>
        }
        //自定義方法  要用復(fù)制語(yǔ)句的形式+箭頭函數(shù)
        changeWeather = ()=>{
            this.setState({sunny:!this.state.sunny})
        }
       
    }
    //渲染 組件到頁(yè)面
    ReactDOM.render(<MyCompent/>,document.getElementById('test')) 


</script>

</html>

?效果和完整類(lèi)版本一致

props

每個(gè)組件對(duì)象都會(huì)有props(properties簡(jiǎn)寫(xiě)) 屬性

組件標(biāo)簽的所有屬性都保存在props中

通過(guò)標(biāo)簽屬性從組件外向組件內(nèi)傳遞變化的數(shù)據(jù)

注意: 組件內(nèi)部不可修改props數(shù)據(jù)

再引入一個(gè)js文件

一看就會(huì)的React入門(mén)

?類(lèi)組件式props

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 引入react核心庫(kù) -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx轉(zhuǎn)為js -->
<script src="../js/babel.min.js"></script>
<!-- 引入 prop-types 用于對(duì)標(biāo)簽屬性進(jìn)行類(lèi)型 必要性限制 -->
<script src="../js/prop-types.js"></script>

<body>
    <div id="test"></div>
    <div id="test2"></div>
    <div id="test3"></div>
    

</body>
<!-- 這里一定要指明是babel類(lèi)型 -->
<script type="text/babel">
    // //類(lèi)式創(chuàng)建虛擬dom
    class UltMan extends React.Component{
        //對(duì)標(biāo)簽屬性進(jìn)行類(lèi)型 必要性的限制
        static propTypes = {
            name:PropTypes.string.isRequired,//限制name必傳 類(lèi)型為字符串
            sex:PropTypes.string,//設(shè)置性別為字符串
            age:PropTypes.number,//設(shè)置age為數(shù)字
            speak:PropTypes.func,//限制speak為函數(shù)
        }
        //設(shè)置標(biāo)簽屬性默認(rèn)值
        static defaultProps = {
            sex:'人妖',//sex默認(rèn)值為人妖
            age:0
        }

        render(){
            const {name,age,sex} = this.props;
            console.log(this)
            return (
                <ul>
                    <li>名字:{name}</li>
                    <li>性別:{sex}</li>
                    <li>年齡:{age+1}</li>
                </ul>
            )
        }
       
    }
    //渲染 組件到頁(yè)面
    ReactDOM.render(<UltMan name='迪迦' sex='男' age={23}/>,document.getElementById('test')) 
    ReactDOM.render(<UltMan name='戴拿' />,document.getElementById('test2')) 
    const {name,sex,age} = {name:'蓋亞',sex:'男', age:21}
    ReactDOM.render(<UltMan name={name} sex={sex} age={age} speak={fangfa}/>,document.getElementById('test3')) 
    function fangfa(){}
</script>

</html>

一看就會(huì)的React入門(mén)

?函數(shù)組件式引用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 引入react核心庫(kù) -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx轉(zhuǎn)為js -->
<script src="../js/babel.min.js"></script>
<!-- 引入 prop-types 用于對(duì)標(biāo)簽屬性進(jìn)行類(lèi)型 必要性限制 -->
<script src="../js/prop-types.js"></script>

<body>
    <div id="test"></div>
    <div id="test2"></div>
    <div id="test3"></div>
    

</body>
<!-- 這里一定要指明是babel類(lèi)型 -->
<script type="text/babel">
    //函數(shù)式
    function UltMan(props){
        const {name,age,sex} = {...props}
        return (
            <div>
                <h1>函數(shù)式組件使用props</h1>
                <ul>
                    <li>名字:{name}</li>
                    <li>性別:{sex}</li>
                    <li>年齡:{age+1}</li>
                </ul>
            </div>
              
            )
    }
    UltMan.propTypes = {
            name:PropTypes.string.isRequired,//限制name必傳 類(lèi)型為字符串
            sex:PropTypes.string,//設(shè)置性別為字符串
            age:PropTypes.number,//設(shè)置age為數(shù)字
            speak:PropTypes.func,//限制speak為函數(shù)
        }
    //設(shè)置標(biāo)簽屬性默認(rèn)值
    UltMan.defaultProps = {
        sex:'人妖',//sex默認(rèn)值為人妖
        age:0
    }
    //渲染 組件到頁(yè)面
    ReactDOM.render(<UltMan sex='男' age={23}/>,document.getElementById('test')) 
    ReactDOM.render(<UltMan name='夢(mèng)比優(yōu)斯' />,document.getElementById('test2')) 
    const {name,sex,age} = {name:'麥克斯',sex:'男', age:21}
    ReactDOM.render(<UltMan name={name} sex={sex} age={age} speak={fangfa}/>,document.getElementById('test3')) 
    function fangfa(){}
</script>

</html>

一看就會(huì)的React入門(mén)

refs

介紹

?組件內(nèi)的標(biāo)簽可以自定義ref屬性來(lái)標(biāo)識(shí)自己通俗地講就是拿取dom節(jié)點(diǎn)用的

演示

字符串refs

一看就會(huì)的React入門(mén)

在標(biāo)簽上添加ref屬性,然后打印當(dāng)前this查看

一看就會(huì)的React入門(mén)

可以看到可以通過(guò)refs屬性拿取到dom節(jié)點(diǎn)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 引入react核心庫(kù) -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx轉(zhuǎn)為js -->
<script src="../js/babel.min.js"></script>

<body>
    <div id="test">

    </div>

</body>
<!-- 這里一定要指明是babel類(lèi)型 -->
<script type="text/babel">
    //類(lèi)式創(chuàng)建虛擬dom
    class MyCompent extends React.Component{
        //展示上邊輸入框數(shù)據(jù)
        showData = ()=>{
            console.log(this)
            const input1 = this.refs.input1
            console.log(input1.value)
        }
        //展示下邊輸入框數(shù)據(jù)
        showData2 =()=>{
            //解構(gòu)賦值寫(xiě)法
            const {input2} = this.refs
            alert(input2.value)
        }
        
        render(){
            return (
                <div>
                   <input ref='input1' placeholder='點(diǎn)擊按鈕彈出數(shù)據(jù)'/><br/>
                   <button onClick={this.showData}>點(diǎn)擊提示上邊的數(shù)據(jù)</button><br/>
                   <input onBlur={this.showData2} ref='input2' placeholder='失去焦點(diǎn)彈出數(shù)據(jù)'/>   
                </div>
            )
       
    }
}
    //渲染 組件到頁(yè)面
    ReactDOM.render(<MyCompent/>,document.getElementById('test')) 

</script>

</html>

? 一看就會(huì)的React入門(mén)

這是舊版的string寫(xiě)法官網(wǎng)已經(jīng)不建議使用這種寫(xiě)法

?回調(diào)refs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 引入react核心庫(kù) -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx轉(zhuǎn)為js -->
<script src="../js/babel.min.js"></script>

<body>
    <div id="test">

    </div>

</body>
<!-- 這里一定要指明是babel類(lèi)型 -->
<script type="text/babel">
    //類(lèi)式創(chuàng)建虛擬dom
    class MyCompent extends React.Component{
        //展示上邊輸入框數(shù)據(jù)
        showData = ()=>{
            console.log(this)
            const input1 = this.input1
            console.log(input1.value)
        }
        //展示下邊輸入框數(shù)據(jù)
        showData2 =()=>{
            //解構(gòu)賦值寫(xiě)法
            const {input2} = this
            alert(input2.value)
        }
        
        render(){
            return (
                <div>
                   <input ref={(currentNode)=>{this.input1 = currentNode}} placeholder='點(diǎn)擊按鈕彈出數(shù)據(jù)'/><br/>
                   <button onClick={this.showData}>點(diǎn)擊提示上邊的數(shù)據(jù)</button><br/>
                   <input onBlur={this.showData2} ref={c=>this.input2 = c} placeholder='失去焦點(diǎn)彈出數(shù)據(jù)'/>   
                </div>
            )
       
    }
}
    //渲染 組件到頁(yè)面
    ReactDOM.render(<MyCompent/>,document.getElementById('test')) 

</script>

</html>

測(cè)試觀察

一看就會(huì)的React入門(mén)

注意此時(shí)的input節(jié)點(diǎn)并沒(méi)有被refs所包裹,而是直接綁定在了reat實(shí)例對(duì)象上

測(cè)試效果和字符串refs都一致

關(guān)于回調(diào)refs的說(shuō)明
如果ref回調(diào)函數(shù)是以?xún)?nèi)聯(lián)函數(shù)的方式定義的，在更新過(guò)程中它會(huì)被執(zhí)行兩次，第一次傳入?yún)?shù)null，然后第二次會(huì)傳入?yún)?shù)DOM元素。這是因?yàn)樵诿看武秩緯r(shí)會(huì)創(chuàng)建一個(gè)新的函數(shù)實(shí)例，所以React清空舊的ref并且設(shè)置新的。通過(guò)將ref的回調(diào)函數(shù)定義成class的綁定函數(shù)的方式可以避免上述問(wèn)題，但是大多數(shù)情況下它是無(wú)關(guān)緊要的。

問(wèn)題演示:

添加之前切換天氣的標(biāo)簽

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 引入react核心庫(kù) -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx轉(zhuǎn)為js -->
<script src="../js/babel.min.js"></script>

<body>
    <div id="test">

    </div>

</body>
<!-- 這里一定要指明是babel類(lèi)型 -->
<script type="text/babel">
    //類(lèi)式創(chuàng)建虛擬dom
    class MyCompent extends React.Component{
        //設(shè)置state屬性
        state = {sunny:true}
        //展示上邊輸入框數(shù)據(jù)
        showData = ()=>{
            console.log(this)
            const input1 = this.input1
            console.log(input1.value)
        }
        //展示下邊輸入框數(shù)據(jù)
        showData2 =()=>{
            //解構(gòu)賦值寫(xiě)法
            const {input2} = this
            alert(input2.value)
        }
        changeWeather=()=>{
            //更新?tīng)顟B(tài)
            this.setState({sunny:!this.state.sunny})
        }
        
        render(){
            const isSunny = this.state.sunny;
            return (
                <div>
                   <h1>今天是{isSunny? '晴天':'陰天'}</h1>
                   <input ref={(currentNode)=>{this.input1 = currentNode;console.log('@',currentNode)}} placeholder='點(diǎn)擊按鈕彈出數(shù)據(jù)'/><br/>
                   <button onClick={this.showData}>點(diǎn)擊提示上邊的數(shù)據(jù)</button><br/>
                   <input onBlur={this.showData2} ref={c=>this.input2 = c} placeholder='失去焦點(diǎn)彈出數(shù)據(jù)'/>   
                   <button onClick={this.changeWeather}>點(diǎn)擊切換天氣</button><br/>
                </div>
            )
       
    }
}
    //渲染 組件到頁(yè)面
    ReactDOM.render(<MyCompent/>,document.getElementById('test')) 

</script>

</html>

?啟動(dòng)測(cè)試:

一看就會(huì)的React入門(mén)

可以看到剛啟動(dòng)時(shí)會(huì)執(zhí)行一次input的內(nèi)聯(lián)回調(diào)函數(shù)

此時(shí),我們?cè)冱c(diǎn)擊切換天氣按鈕

一看就會(huì)的React入門(mén)

可以看到,回調(diào)函數(shù)被執(zhí)行了兩次,且第一次執(zhí)行為null?

這是因?yàn)樵诿看武秩緯r(shí)會(huì)創(chuàng)建一個(gè)新的函數(shù)實(shí)例，所以React清空舊的ref并且設(shè)置新的。(官網(wǎng)原話)

此時(shí)可以通過(guò)外聯(lián)函數(shù)解決這個(gè)問(wèn)題

一看就會(huì)的React入門(mén)

再次測(cè)試

? 一看就會(huì)的React入門(mén)

此時(shí)再點(diǎn)擊切換天氣就沒(méi)有之前的問(wèn)題了?

一看就會(huì)的React入門(mén)

?但是大多數(shù)情況下它是無(wú)關(guān)緊要的。所以我們還是可以直接用內(nèi)聯(lián)函數(shù)的形式直接開(kāi)發(fā)即可

最新方式 createRef()

一看就會(huì)的React入門(mén)

?可以看到直接打印出了input的節(jié)點(diǎn)

一看就會(huì)的React入門(mén) 文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-448077.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 引入react核心庫(kù) -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx轉(zhuǎn)為js -->
<script src="../js/babel.min.js"></script>

<body>
    <div id="test">

    </div>

</body>
<!-- 這里一定要指明是babel類(lèi)型 -->
<script type="text/babel">
    //類(lèi)式創(chuàng)建虛擬dom
    class MyCompent extends React.Component{

        //Reat.createRef 調(diào)用后可以返回一個(gè)容器 該容器可以存儲(chǔ)被ref所標(biāo)識(shí)的節(jié)點(diǎn)
        myRef = React.createRef();
        myRef2 = React.createRef();
        //展示上邊輸入框數(shù)據(jù)
        showData = ()=>{
            console.log(this.myRef)
            console.log(this.myRef.current.value)
        }
        //展示下邊輸入框數(shù)據(jù)
        showData2 =()=>{
            alert(this.myRef2.current.value)
        }
        render(){
            return (
                <div>
                <input ref={this.myRef} placeholder='點(diǎn)擊按鈕彈出數(shù)據(jù)'/>
                   <button onClick={this.showData}>點(diǎn)擊提示上邊的數(shù)據(jù)</button><br/>
                   <input onBlur={this.showData2} ref={this.myRef2} placeholder='失去焦點(diǎn)彈出數(shù)據(jù)'/>   
                 
                </div>
            )
       
    }
}
    //渲染 組件到頁(yè)面
    ReactDOM.render(<MyCompent/>,document.getElementById('test')) 

</script>

</html>

到了這里，關(guān)于一看就會(huì)的React入門(mén)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！