成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

react.js入門篇

harryhappy / 955人閱讀

摘要：搭建項(xiàng)目，引入既然學(xué)習(xí)，那就從開始。項(xiàng)目工程目錄如下編寫在我理解看來，項(xiàng)目文件入口即是文件，那么從中編寫。官方文檔所述圖片注文章末尾段組件生命周期引入自

Hello Word 1.搭建項(xiàng)目，引入react

既然學(xué)習(xí)react，那就從hello word開始。當(dāng)然必不可少的需要引入react，這里我使用的是官網(wǎng)的 Creating a New Application 方式，通過以下命令行操作即可在項(xiàng)目中使用react了，當(dāng)然官網(wǎng)還提供了其他引入方式。

npm install -g create-react-app
create-react-app test-react

cd test-react
npm start

項(xiàng)目工程目錄如下：

2.編寫Hello Word

在我理解看來，react項(xiàng)目文件入口即是index.js文件，那么從index.js中編寫Hello Word。

輸出結(jié)果：

lifecycle

從下面的代碼中，去弄弄清楚react的組件生命周期。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      

        
Hello, world!

        
It is {this.state.date.toLocaleTimeString()}.

      

    );
  }
}

ReactDOM.render(
  ,
  document.getElementById("root")
);
官網(wǎng)的解釋：

1) When is passed to ReactDOM.render(), React calls the constructor of the Clock component. Since Clock needs to display the current time, it initializes this.state with an object including the current time. We will later update this state.

2) React then calls the Clock component"s render() method. This is how React learns what should be displayed on the screen. React then updates the DOM to match the Clock"s render output.

3) When the Clock output is inserted in the DOM, React calls the componentDidMount() lifecycle hook. Inside it, the Clock component asks the browser to set up a timer to call tick() once a second.

4) Every second the browser calls the tick() method. Inside it, the Clock component schedules a UI update by calling setState() with an object containing the current time. Thanks to the setState() call, React knows the state has changed, and calls render() method again to learn what should be on the screen. This time, this.state.date in the render() method will be different, and so the render output will include the updated time. React updates the DOM accordingly.

5) If the Clock component is ever removed from the DOM, React calls the componentWillUnmount() lifecycle hook so the timer is stopped.

個(gè)人理解：

react組件生命周期大致有下面幾個(gè)狀態(tài)：

Mounting：已插入真實(shí) DOM
Updating：正在被重新渲染
Unmounting：已移出真實(shí) DOM

React 為每個(gè)狀態(tài)都提供了兩種處理函數(shù)，will 函數(shù)在進(jìn)入狀態(tài)之前調(diào)用，did 函數(shù)在進(jìn)入狀態(tài)之后調(diào)用，三種狀態(tài)共計(jì)五種處理函數(shù)。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object nextProps, object nextState)
componentWillUnmount()

官方文檔所述圖片：

注：文章末尾段react組件生命周期引入自https://segmentfault.com/a/11...

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/83951.html

相關(guān)文章

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會不定期更...

    princekin 評論0 收藏0

  • 不得不聊聊的react--入門篇

    摘要：一誕生的性能瓶頸，主要有以下原因。注意組件類的第一個(gè)字母必須大寫，否則會報(bào)錯(cuò)。組件并不是真實(shí)的節(jié)點(diǎn)，而是存在于內(nèi)存之中的一種數(shù)據(jù)結(jié)構(gòu)，叫做虛擬。此外，還提供兩種特殊狀態(tài)的處理函數(shù)。不會隨著時(shí)間改變可能不是。 本文為學(xué)習(xí)筆記，適合入門的童鞋，如有錯(cuò)誤，請多多指教。 一、react誕生 Web app的性能瓶頸，主要有以下原因。 （1）Web基于DOM，而DOM很慢。瀏覽器打開網(wǎng)頁時(shí)，需要...

    lidashuang 評論0 收藏0

  • 前端相關(guān)大雜燴

    摘要：希望幫助更多的前端愛好者學(xué)習(xí)。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開發(fā)工程師當(dāng)你問起有關(guān)與時(shí)，老司機(jī)們首先就會告訴你其實(shí)是個(gè)沒有網(wǎng)絡(luò)請求功能的庫。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡單 原文地址：Learning React.js is easier than you think 原文作...

    fuyi501 評論0 收藏0

  • 前端資源分享-只為更好前端

    摘要：一團(tuán)隊(duì)組織網(wǎng)站說明騰訊團(tuán)隊(duì)騰訊前端團(tuán)隊(duì)，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計(jì)，簡稱，騰訊設(shè)計(jì)團(tuán)隊(duì)網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計(jì)部百度前端研發(fā)部出品淘寶前端團(tuán)隊(duì)用技術(shù)為體驗(yàn)提供無限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計(jì)部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊(duì)組織 網(wǎng)站 說明 騰訊 AlloyTeam 團(tuán)隊(duì) 騰訊Web前端團(tuán)隊(duì)，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

    zxhaaa 評論0 收藏0

  • 前端資源分享-只為更好前端

    摘要：一團(tuán)隊(duì)組織網(wǎng)站說明騰訊團(tuán)隊(duì)騰訊前端團(tuán)隊(duì)，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計(jì)，簡稱，騰訊設(shè)計(jì)團(tuán)隊(duì)網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計(jì)部百度前端研發(fā)部出品淘寶前端團(tuán)隊(duì)用技術(shù)為體驗(yàn)提供無限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計(jì)部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊(duì)組織 網(wǎng)站 說明 騰訊 AlloyTeam 團(tuán)隊(duì) 騰訊Web前端團(tuán)隊(duì)，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

    JouyPub 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<