react入門學習筆記（一）

leon 發布于2019-08-20 18:01 / 1526人閱讀

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

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

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

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

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

二、學習react需要了解的一些概念

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

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

/*
   * 組件定義方法一
   */
  //react元素也可以用來表示組件
  //const element = Hello World
  // ReactDOM.render(
  //   element,
  //   document.getElementById("example")
  // );
  
  /*
   * 組件定義方法二
   */
  //定義組件最簡單的方法就是定義一個javascript函數
  // 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自帶的創建組件的方法
  var Welcome = React.createClass ({
    render:function(){
      return Hello, {this.props.name};
    }
  });
  ReactDOM.render(
    ,
    document.getElementById("example")
  );

下面這張關于JSX對象的對應關系的圖片需要了解一下，有助于理解代碼：

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

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

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

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

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

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

7、react實現一個評論模塊

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

GPU云服務器云服務器學習筆記一 java開發入門筆記學習筆記基礎學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84015.html

React 入門學習筆記整理目錄

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

daryl 2019-04-23 11:57 評論0 收藏0
Flux架構小白入門筆記

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

lily_wang 2019-08-22 10:45 評論0 收藏0
前端相關大雜燴

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

fuyi501 2019-08-22 13:46 評論0 收藏0
AI開發書籍分享

摘要：編程書籍的整理和收集最近一直在學習深度學習和機器學習的東西，發現深入地去學習就需要不斷的去提高自己算法和高數的能力然后也找了很多的書和文章，隨著不斷的學習，也整理了下自己的學習筆記準備分享出來給大家后續的文章和總結會繼續分享，先分享一部分的編程書籍的整理和收集最近一直在學習deep learning深度學習和機器學習的東西，發現深入地去學習就需要不斷的去提高自己算法和高數的能力然后...

huayeluoliuhen 2019-06-26 18:18 評論0 收藏0