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

leon 發(fā)布于2019-08-20 18:01 / 1545人閱讀

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

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

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

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

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

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

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

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

/*
   * 組件定義方法一
   */
  //react元素也可以用來表示組件
  //const element = Hello World
  // ReactDOM.render(
  //   element,
  //   document.getElementById("example")
  // );
  
  /*
   * 組件定義方法二
   */
  //定義組件最簡單的方法就是定義一個javascript函數(shù)
  // function Welcome(props){
  //   return Hello {props.name};
  // }
  // const element = 
  // ReactDOM.render(
  //   element,
  //   document.getElementById("example")
  // );
  
  /*
   * 方法三
   */
  //ES6類來定義一個組件
  // 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對象的對應(yīng)關(guān)系的圖片需要了解一下，有助于理解代碼：

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

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

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

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

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

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

7、react實現(xiàn)一個評論模塊

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

云服務(wù)器 GPU云服務(wù)器學(xué)習(xí)筆記一 java開發(fā)入門筆記學(xué)習(xí)筆記基礎(chǔ)學(xué)習(xí)筆記

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84015.html

發(fā)表評論

登陸后可評論

0條評論

leon

男|高級講師

我要關(guān)注我要私信

TA的文章

?自組織映射（SOM）神經(jīng)網(wǎng)絡(luò)?Python實現(xiàn)

閱讀 1998·2021-09-07 09:59
【css】布局

閱讀 2547·2019-08-29 16:33
自己制作微信小程序使用base64字體圖標(biāo)

閱讀 3732·2019-08-29 16:18
CSS基礎(chǔ)構(gòu)架及標(biāo)準(zhǔn)

閱讀 2886·2019-08-29 15:30
CSS3 background-clip屬性

閱讀 1712·2019-08-29 13:52
JavaScript設(shè)計模式（八）：組合模式

閱讀 2079·2019-08-26 18:36
Vue基于vuex、axios攔截器實現(xiàn)loading效果及axios的安裝配置

閱讀 570·2019-08-26 12:19
關(guān)于Vuex的action傳入多個參數(shù)的問題

閱讀 733·2019-08-23 15:23

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

Hello World

Hello {props.name}

Hello, {this.props.name}

Hello, {this.props.name}

Hello, world

相關(guān)文章

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

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

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

AI開發(fā)書籍分享

發(fā)表評論

0條評論

leon

男|高級講師

TA的文章

?自組織映射（SOM）神經(jīng)網(wǎng)絡(luò)?Python實現(xiàn)

【css】布局

自己制作微信小程序使用base64字體圖標(biāo)

CSS基礎(chǔ)構(gòu)架及標(biāo)準(zhǔn)

CSS3 background-clip屬性

JavaScript設(shè)計模式（八）：組合模式

Vue基于vuex、axios攔截器實現(xiàn)loading效果及axios的安裝配置

關(guān)于Vuex的action傳入多個參數(shù)的問題

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

Hello World

Hello {props.name}

Hello, {this.props.name}

Hello, {this.props.name}

Hello, world

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！