国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React.js 小書 Lesson21 - ref 和 React.js 中的 DOM 操作

Gemini / 1367人閱讀

摘要：多余的操作其實(shí)是代碼里面的噪音，不利于我們理解和維護(hù)。下一節(jié)中我們將介紹小書和容器類組件。

React.js 小書 Lesson21 - ref 和 React.js 中的 DOM 操作 
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson21

轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息

在線閱讀：http://huziketang.com/books/react

在 React.js 當(dāng)中你基本不需要和 DOM 直接打交道。React.js 提供了一些列的 on* 方法幫助我們進(jìn)行事件監(jiān)聽，所以 React.js 當(dāng)中不需要直接調(diào)用 addEventListener 的 DOM API；以前我們通過手動(dòng) DOM 操作進(jìn)行頁(yè)面更新（例如借助 jQuery），而在 React.js 當(dāng)中可以直接通過 setState 的方式重新渲染組件，渲染的時(shí)候可以把新的 props 傳遞給子組件，從而達(dá)到頁(yè)面更新的效果。

React.js 這種重新渲染的機(jī)制幫助我們免除了絕大部分的 DOM 更新操作，也讓類似于 jQuery 這種以封裝 DOM 操作為主的第三方的庫(kù)從我們的開發(fā)工具鏈中刪除。

但是 React.js 并不能完全滿足所有 DOM 操作需求，有些時(shí)候我們還是需要和 DOM 打交道。比如說你想進(jìn)入頁(yè)面以后自動(dòng) focus 到某個(gè)輸入框，你需要調(diào)用 input.focus() 的 DOM API，比如說你想動(dòng)態(tài)獲取某個(gè) DOM 元素的尺寸來(lái)做后續(xù)的動(dòng)畫，等等。

React.js 當(dāng)中提供了 ref 屬性來(lái)幫助我們獲取已經(jīng)掛載的元素的 DOM 節(jié)點(diǎn)，你可以給某個(gè) JSX 元素加上 ref屬性：

class AutoFocusInput extends Component {
  componentDidMount () {
    this.input.focus()
  }

  render () {
    return (
       this.input = input} />
    )
  }
}

ReactDOM.render(
  ,
  document.getElementById("root")
)

可以看到我們給 input 元素加了一個(gè) ref 屬性，這個(gè)屬性值是一個(gè)函數(shù)。當(dāng) input 元素在頁(yè)面上掛載完成以后，React.js 就會(huì)調(diào)用這個(gè)函數(shù)，并且把這個(gè)掛載以后的 DOM 節(jié)點(diǎn)傳給這個(gè)函數(shù)。在函數(shù)中我們把這個(gè) DOM 元素設(shè)置為組件實(shí)例的一個(gè)屬性，這樣以后我們就可以通過 this.input 獲取到這個(gè) DOM 元素。

然后我們就可以在 componentDidMount 中使用這個(gè) DOM 元素，并且調(diào)用 this.input.focus() 的 DOM API。整體就達(dá)到了頁(yè)面加載完成就自動(dòng) focus 到輸入框的功能（大家可以注意到我們用上了 componentDidMount 這個(gè)組件生命周期）。

我們可以給任意代表 HTML 元素標(biāo)簽加上 ref 從而獲取到它 DOM 元素然后調(diào)用 DOM API。但是記住一個(gè)原則：能不用 ref 就不用。特別是要避免用 ref 來(lái)做 React.js 本來(lái)就可以幫助你做到的頁(yè)面自動(dòng)更新的操作和事件監(jiān)聽。多余的 DOM 操作其實(shí)是代碼里面的“噪音”，不利于我們理解和維護(hù)。

順帶一提的是，其實(shí)可以給組件標(biāo)簽也加上 ref ，例如：

 this.clock = clock} />

這樣你獲取到的是這個(gè) Clock 組件在 React.js 內(nèi)部初始化的實(shí)例。但這并不是什么常用的做法，而且也并不建議這么做，所以這里就簡(jiǎn)單提及，有興趣的朋友可以自己學(xué)習(xí)探索。

下一節(jié)中我們將介紹《React.js 小書 Lesson22 - props.children 和容器類組件》。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/89682.html

相關(guān)文章

  • React.js 小書 Lesson20 - 更新階段的組件生命周期

    摘要：所以對(duì)于組件更新階段的組件生命周期，我們簡(jiǎn)單提及并且提供一些資料給大家。這里為了知識(shí)的完整，補(bǔ)充關(guān)于更新階段的組件生命周期你可以通過這個(gè)方法控制組件是否重新渲染。大家對(duì)這更新階段的生命周期比較感興趣的話可以查看官網(wǎng)文檔。 React.js 小書 Lesson20 - 更新階段的組件生命周期 本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

    Yumenokanata 評(píng)論0 收藏0

  • 寫一本關(guān)于 React.js 的小書

    摘要：因?yàn)楣ぷ髦幸恢痹谑褂茫惨恢币詠?lái)想總結(jié)一下自己關(guān)于的一些知識(shí)經(jīng)驗(yàn)。于是把一些想法慢慢整理書寫下來(lái)，做成一本開源免費(fèi)專業(yè)簡(jiǎn)單的入門級(jí)別的小書，提供給社區(qū)。本書的后續(xù)可能會(huì)做成視頻版本，敬請(qǐng)期待。本作品采用署名禁止演繹國(guó)際許可協(xié)議進(jìn)行許可 React.js 小書 本文作者：胡子大哈本文原文：React.js 小書 轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息 在線閱讀：http://huzi...

    Scorpion 評(píng)論0 收藏0

  • React.js 小書 Lesson13 - 渲染列表數(shù)據(jù)

    摘要：一般來(lái)說，的值可以直接后臺(tái)數(shù)據(jù)返回的，因?yàn)楹笈_(tái)的都是唯一的。下一節(jié)中我們將介紹小書實(shí)戰(zhàn)分析評(píng)論功能一。 React.js 小書 Lesson13 - 渲染列表數(shù)據(jù) 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson13 轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息 在線閱讀：http://huziketang.com/books/...

    Alan 評(píng)論0 收藏0

  • React.js 小書 Lesson25 - 實(shí)戰(zhàn)分析：評(píng)論功能（四）

    摘要：接下來(lái)是實(shí)戰(zhàn)環(huán)節(jié)，我們會(huì)繼續(xù)上一階段的例子，把評(píng)論功能做得更加復(fù)雜一點(diǎn)。把已經(jīng)發(fā)布的評(píng)論持久化，存放到瀏覽器的中。評(píng)論顯示發(fā)布日期，如秒前，分鐘前，并且會(huì)每隔秒更新發(fā)布日期。事件監(jiān)聽方法，。下一節(jié)中我們將介紹小書實(shí)戰(zhàn)分析評(píng)論功能五。 React.js 小書 Lesson25 - 實(shí)戰(zhàn)分析：評(píng)論功能（四） 本文作者：胡子大哈本文原文：http://huziketang.com/book...

    mozillazg 評(píng)論0 收藏0

  • React.js 小書 Lesson6 - 使用 JSX 描述 UI 信息

    摘要：上面的代碼小書經(jīng)過編譯以后會(huì)變成小書會(huì)構(gòu)建一個(gè)對(duì)象里描述你結(jié)構(gòu)的信息，包括標(biāo)簽名屬性還有子元素等。第二個(gè)原因是，有了這樣一個(gè)對(duì)象。負(fù)責(zé)把這個(gè)用來(lái)描述信息的對(duì)象變成元素，并且渲染到面上。下一節(jié)中我們將介紹小書組件的方法。 React.js 小書 Lesson6 - 使用 JSX 描述 UI 信息 本文作者：胡子大哈本文原文：http://huziketang.com/books/rea...

    ChanceWong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<