亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

react入門學(xué)習(xí)筆記（一）

leon / 1586人閱讀

摘要：選擇的主要原因大概是因?yàn)樵摽蚣艹霈F(xiàn)較早，感覺上會(huì)相對(duì)成熟，日后學(xué)習(xí)中遇到問題想要查找答案相對(duì)簡(jiǎn)單一些，對(duì)，就是這么簡(jiǎn)單。多說無益，接下來開始的學(xué)習(xí)，我按照我學(xué)習(xí)中帶著的問題來一一解答，完成我的入門筆記。主要是針對(duì)前端的組件化開發(fā)。

這兩天得空，特意來折騰了以下時(shí)下火熱的前端框架react，至于為什么選react,作為一個(gè)初學(xué)者react和vue在技術(shù)上的優(yōu)劣我無權(quán)評(píng)論，也就不妄加評(píng)論了。選擇react的主要原因大概是因?yàn)樵摽蚣艹霈F(xiàn)較早，感覺上會(huì)相對(duì)成熟，日后學(xué)習(xí)中遇到問題想要查找答案相對(duì)簡(jiǎn)單一些，對(duì)，就是這么簡(jiǎn)單。

在官網(wǎng)文檔做了簡(jiǎn)單了解之后我，我想作為初學(xué)者首先還是從react基本知識(shí)了解，當(dāng)然其中涉及到JSX語法和ES6的相關(guān)知識(shí)，這些我沒有太深入了解，畢竟還是要跟著學(xué)習(xí)react的主線來走的，跟著官方給的例子，大致了解用法就行，這個(gè)不難實(shí)現(xiàn)。至于網(wǎng)上說的react全家桶之類的，作為初學(xué)者，我暫時(shí)也是沒去理會(huì)的。多說無益，接下來開始react的學(xué)習(xí)，我按照我學(xué)習(xí)中帶著的問題來一一解答，完成我的入門筆記。

一、react在實(shí)際開發(fā)中能給我們帶來什么樣的便捷

學(xué)一個(gè)新的庫或者新的框架，我總是先聯(lián)合實(shí)際，明白了我將要學(xué)習(xí)的東西能給我?guī)硎裁矗也拍苡心康牡厝W(xué)習(xí)。不知道大家是否也是一樣。react主要是針對(duì)前端UI的組件化開發(fā)。就是前端的一個(gè)頁面包括Header,Content,footer,等等元素都可以是react里面的一個(gè)組件，可以多次重復(fù)使用。如果大家做過頁面開發(fā)就知道，固然有bootstrap這樣的布局神器，為我們搭建網(wǎng)頁節(jié)省了不少時(shí)間，但是想要做到一個(gè)組件的多次重復(fù)使用依然是很難的。所以react正是來解決這個(gè)問題的，至于如何解決相信往下看了實(shí)際的例子就能明白了。

二、學(xué)習(xí)react需要了解的一些概念

1、react的安裝
本人最忌麻煩，所以沒有從react官網(wǎng)下載文件，直接用的網(wǎng)上的資源，一心一意寫dome，本文的例子引用下面三個(gè)文件就可以了：

2、react中的最小單元組件的概念、創(chuàng)建方式
組件是react中用于呈現(xiàn)到頁面的元素，組件可大可小，下面是我所知道的四種創(chuàng)建方法：

/*
   * 組件定義方法一
   */
  //react元素也可以用來表示組件
  //const element = 
Hello World

  // ReactDOM.render(
  //   element,
  //   document.getElementById("example")
  // );
  
  /*
   * 組件定義方法二
   */
  //定義組件最簡(jiǎn)單的方法就是定義一個(gè)javascript函數(shù)
  // function Welcome(props){
  //   return 
Hello {props.name}
;
  // }
  // const element = 
  // ReactDOM.render(
  //   element,
  //   document.getElementById("example")
  // );
  
  /*
   * 方法三
   */
  //ES6類來定義一個(gè)組件
  // class Welcome extends React.Component {
  //   render() {
  //     return 
Hello, {this.props.name}
;
  //   }
  // }
  // ReactDOM.render(
  //   ,
  //   document.getElementById("example")
  // );

  /*
   * 方法四
   */
  //react自帶的創(chuàng)建組件的方法
  var Welcome = React.createClass ({
    render:function(){
      return 
Hello, {this.props.name}
;
    }
  });
  ReactDOM.render(
    ,
    document.getElementById("example")
  );

下面這張關(guān)于JSX對(duì)象的對(duì)應(yīng)關(guān)系的圖片需要了解一下，有助于理解代碼：

3、組件怎么顯示到頁面上去
組件要顯示到頁面上去就要提及react中最重要的方法ReactDOM.render()方法了，通過該方法將react元素渲染到頁面中指定的DOM節(jié)點(diǎn)中去：

const element = 
Hello, world
;
ReactDOM.render(
  element,
  //此處只能用原生方法獲取DOM節(jié)點(diǎn)，不可用jq方法
  document.getElementById("root")
);

4、組件更新
組件也可以更新，下面例子是一個(gè)實(shí)時(shí)更新顯示當(dāng)前時(shí)間的組件

5、組件可以包含子組件，從而構(gòu)建一個(gè)大的組件
組件可大可小，一個(gè)大的組件可以拆分成很多小的組件，一個(gè)個(gè)小的組件可以通過層層包含構(gòu)成一個(gè)大的組件甚至應(yīng)用，并且各個(gè)小組件都是相互獨(dú)立的，可多次復(fù)用，這也是react的重要思想之一吧！

6、react事件處理
首先需要了解以下js的bind的用法和箭頭函數(shù)。

其次還需要了解ES6的相關(guān)語法，由于我自身也還在學(xué)習(xí)，所以不敢深入講解，主要講講reac事件處理中主要可以設(shè)置組件的初始狀態(tài)，以及一些點(diǎn)擊事件什么的設(shè)定。具體例子可以看官網(wǎng)文檔，我自知對(duì)這章理解不深。所以ES6的知識(shí)提前掌握還是比較好的。

7、react實(shí)現(xiàn)一個(gè)評(píng)論模塊

寫文章不易，主要是作為自己學(xué)習(xí)的筆記，又恐有遺漏不對(duì)的地方誤導(dǎo)了像我一樣的初學(xué)者。內(nèi)心惶恐啊，所以如有不對(duì)的地方還望大家指正，我必然及時(shí)更正。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/84015.html

相關(guān)文章

  • React 入門學(xué)習(xí)筆記整理目錄

    摘要：入門學(xué)習(xí)筆記整理一搭建環(huán)境入門學(xué)習(xí)筆記整理二簡(jiǎn)介與語法入門學(xué)習(xí)筆記整理三組件入門學(xué)習(xí)筆記整理四事件入門學(xué)習(xí)筆記整理五入門學(xué)習(xí)筆記整理六組件通信入門學(xué)習(xí)筆記整理七生命周期入門學(xué)習(xí)筆記整理八入門學(xué)習(xí)筆記整理九路由React 入門學(xué)習(xí)筆記整理（一）——搭建環(huán)境 React 入門學(xué)習(xí)筆記整理（二）—— JSX簡(jiǎn)介與語法 React 入門學(xué)習(xí)筆記整理（三）—— 組件 React 入門學(xué)習(xí)筆記整理（...

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

  • Flux架構(gòu)小白入門筆記

    摘要：架構(gòu)小白入門筆記是提出的一種處理前端數(shù)據(jù)的架構(gòu)，學(xué)習(xí)就是學(xué)習(xí)它的思想。這個(gè)筆記是我在學(xué)習(xí)了阮一峰老師的架構(gòu)入門教程之后得出，里面的例子和部分原文來自于其不同在于我用將其改寫了，并加入了注釋。 Flux架構(gòu)小白入門筆記 Flux是facebook提出的一種處理前端數(shù)據(jù)的架構(gòu)，學(xué)習(xí)Flux就是學(xué)習(xí)它的思想。 這個(gè)筆記是我在學(xué)習(xí)了阮一峰老師的Flux 架構(gòu)入門教程之后得出，里面的例子和部分原...

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

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

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

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

  • AI開發(fā)書籍分享

    摘要：編程書籍的整理和收集最近一直在學(xué)習(xí)深度學(xué)習(xí)和機(jī)器學(xué)習(xí)的東西，發(fā)現(xiàn)深入地去學(xué)習(xí)就需要不斷的去提高自己算法和高數(shù)的能力然后也找了很多的書和文章，隨著不斷的學(xué)習(xí)，也整理了下自己的學(xué)習(xí)筆記準(zhǔn)備分享出來給大家后續(xù)的文章和總結(jié)會(huì)繼續(xù)分享，先分享一部分的 編程書籍的整理和收集 最近一直在學(xué)習(xí)deep learning深度學(xué)習(xí)和機(jī)器學(xué)習(xí)的東西，發(fā)現(xiàn)深入地去學(xué)習(xí)就需要不斷的去提高自己算法和高數(shù)的能力然后...

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

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

0條評(píng)論

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