1. 程式人生 > >阮一峰react入門筆記

阮一峰react入門筆記

1、造樹。type=text/babel逗號分離 


2、jsx語法(遇到HTML標籤(以< 開頭),就用HTML規則解析;遇到程式碼塊(以{ 開頭),就用JavaScript規則解析)。

函式引數之間的空格,結尾不加分號,數組裡可放html

      

    

3、元件。元件類的第一個字母必須大寫,否則會報錯,比如HelloMessage不能寫成helloMessage。另外,元件類只能包含一個頂層標籤,否則也會報錯。

4、屬性。Proper(屬性)從父元件傳入的資料會做為子元件的 屬性(property  ,這些屬性(properties可以通過 this.props 

訪問到。

Tip1class 屬性需要寫成className for 屬性需要寫成htmlFor 其他正常

Tip2,例外 this.props.children 屬性。它表示元件的所有子節點更多


Tip3元件類的PropTypes屬性,用來驗證元件例項的屬性是否符合要求更多



Tip4設定元件屬性的預設值。


5、DOM節點


注:必須獲取真實的 DOM節點,虛擬DOM是拿不到使用者輸入的。為了做到這一點,文字輸入框必須有一個 ref 屬性,然後this.refs.[refName] 就會返回這個真實的DOM節點。

  需要注意的是,由於 this.refs.[refName] 

屬性獲取的是真實DOM,所以必須等到虛擬DOM插入文件以後,才能使用這個屬性,否則會報錯。上面程式碼中,通過為元件指定 Click 事件的回撥函式,確保了只有等到真實DOM發生 Click 事件之後,才會讀取 this.refs.[refName] 屬性更多事件

6、This.statethis.props 表示那些一旦定義,就不再改變的特性, 而this.state 是會隨著使用者互動而產生變化的特性。


使用者在表單填入的內容,屬於使用者跟元件的互動,如input元素、textarea 元素、select元素、radio元素(詳情


7、元件生命週期(更多)。will 函式在進入狀態之前呼叫,did 函式在進入狀態之後呼叫,三種狀態共計五種處理函式。

React元件樣式是一個物件,所以第一重大括號表示這是JavaScript語法,第二重大括號表示樣式物件




8、ajax


一個Promise物件可以理解為一次將要執行的操作,使用了Promise物件之後可以用一種鏈式呼叫的方式來組織程式碼,讓程式碼更加直觀。

Promise 物件有三種狀態:
1.Fulfilled 可以理解為成功的狀態
2.Rejected 可以理解為失敗的狀態
3.Pending 既不是 Fulfilld 也不是 Rejected 的狀態,可以理解為 Promise 物件例項建立時候的初始狀態。

then方法就是根據 Promise 物件的狀態來確定執行的操作,then方法負責新增針對已完成拒絕狀態下的處理函式

養成了一個個人習慣就是在then方法內部永遠顯式的呼叫return或者throw catch

.catch(function(error){
               console.log(error);
            });

連結本地json


json格式

{

"xx":"xx",

"xx":[{

   "xxx":"xxxx",

   "xxx":"xxxx"

}]

}


相關推薦

react入門筆記

1、造樹。type=text/babel,逗號分離  2、jsx語法(遇到HTML標籤(以< 開頭),就用HTML規則解析;遇到程式碼塊(以{ 開頭),就用JavaScript規則解析)。 函式引數之間的空格,結尾不加分號,數組裡可放html;         

ES6程式設計風格---學習ES6入門 筆記

1. let取代var   優先使用const 2. 靜態字串使用單引號或反引號。動態字串使用反引號。 3.使用陣列成員對變數賦值時,優先使用解構賦值   const arr=[1,2,3,4]   const [first,second]=arr; 函式的引數如果是物件的成員,優先使用解構賦值 functi

老師的《ECMAScript 6 入門》讀書筆記()

前言 前段時間整理了ES5的讀書筆記:《你可能遺漏的JS知識點(一)》、《你可能遺漏的JS知識點(二)》,現在輪到ES6了,總共分為四篇,以便於知識點的梳理和檢視,本篇內容包括: 一、let和const 二、解構賦值 三、字串擴充套件 四、數值擴充套件 五、正則擴充套件 六、Sy

ES6學習筆記)(整理大神入門

一、ES6宣告變數的六種方法 ES5 只有兩種宣告變數的方法:var命令和function命令。ES6除了新增let和const命令,另外兩種宣告變數的方法:import命令和class命令。所以,E

分享一個徹底凍結對象的函數——來自老師的《ECMAScript 6 入門

分享 入門 pre 函數 凍結 徹底 nbsp 枚舉 clas var constantize = (obj) => { Object.freeze(obj); Object.keys(obj).forEach( (key, i) => {

react入門筆記react工程的創立)

1.建立一個普通的h5介面,然後像引入jquery一樣去引用react相關的js檔案 2. 需要引入browser的js包,這個包的作用是將jsx的語法轉為js,關於jsx後面的博文再詳細說明,但是我們在react的開發中使用的都不是js語法而是jsx,所以需要這個包來解析jsx

webpack學習筆記-demo1(參照的demo)

https://github.com/ruanyf/webpack-demos  程式碼原地址 How to use 1, nstall Webpack and webpack-dev-server globally. $ npm i

網際網路協議入門(二) 作者:

上一篇文章分析了網際網路的總體構思,從下至上,每一層協議的設計思想。這是從設計者的 角度但問題,今天我想切換到使用者的角度,看看使用者時如何從上至下,與這些協議互動的。 (接上文) 一個小結 先對前面的內容,做一個小結。 我們已經知道,網路通訊就是交

《es6標準入門

2 let和const命令    2.1 let命令        2.1.1 基本用法        2.1.2 不存在變數提升        2.1.3 暫時性死區        2.1.4 不允許重複宣告    2.2 塊級作用域        2.2.1 為什麼需要塊

ES6筆記上(深入淺出ES6—

線上轉換 Babel 提供一個REPL線上編譯器,可以線上將 ES6 程式碼轉為 ES5 程式碼。轉換後的程式碼,可以直接作為 ES5 程式碼插入網頁執行。 let和const命令 let和var的區別 var a = []; for (

【轉自老師】React Router中IndexRoute元件的用法

IndexRoute 元件 下面的例子,你會不會覺得有一點問題? <Router> <Route path="/" component={App}> <Route path="accounts" component={Accou

TCP/IP協議入門)--

http://www.ruanyifeng.com/blog/2012/05/internet_protocol_suite_part_i.html 我們每天使用網際網路,你是否想過,它是如何實現的? 全世界幾十億臺電腦,連線在一起,兩兩通訊。上海的某一塊網絡卡送出訊號,洛杉磯的另一塊網絡卡

js -- ES6()-- 簡介(根據ES6標準入門整理)

目前正在學習ES6,根據阮一峰的ES6入門2,學到哪更新到哪裡,都是基本的知識,複雜的目前還不會,涉及的程式碼都是親自執行過的,若發現錯誤請指正。 ES6 提供了許多新特性,但是並不是所有的瀏

React 技術棧系列教程

上週中秋節,我待在家裡,寫完了 Redux 教程。 至此,《React 技術棧系列教程》算是比較完整了。 ES6 語法:教程 Babel:教程 React:教程,示例庫 Webpack:教程 React 專案腳手架:程式碼庫 Flex 佈局:教程,示例 CSS Modules:教程,示例庫 Re

轉:Flex 布局教程:實例篇

side web figure title borde 無法 ref .com 1.2 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介紹了Flex布局的語法,今天介紹常見布局的Flex寫法。 你會看到,不管是什麽布局,Flex往往都可以幾行命令搞定。 我只列

from

nbsp 網站 design continued 誕生記 dev pri val detail JavaScript面向對象編程(一):封裝   原文鏈接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_java

人生真相-

蜘蛛 這一 它的 瞧瞧 帶來 block 事務 所有 作品 巴爾紮克《高老頭》第三章中,伏脫冷開導拉斯蒂涅的那段話,也許是巴爾紮克所有作品中,甚至是所有文學作品中,最精彩的段落之一。 拉斯蒂涅是一個外省青年,滿懷理想來到巴黎。久經世故的伏脫冷,教導他認清自己的處境。

學歷-

數學 重要 自己的 培養 課程 不能 div 過大 作用 臺灣的Mr.6在Blog上討論,學歷是否重要? 他說: 學歷不可謂不重要,但是它在人生不同的時段就有不同的意義。學歷可以讓你輕松入社會、輕松搶得比別人優幾千倍的好位置,但以“一生只要大成功一次

Flex布局(引用大神)

title set -c itl asset 遊戲 www 一個 sset Flex 布局教程:語法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 布局教程:實例篇 http://www.rua

Flex 布局教程:語法篇 作者:

num 完全 tutorials eight 項目 default size webkit http 網頁布局(layout)是 CSS 的一個重點應用。 布局的傳統解決方案,基於盒狀模型,依賴 display 屬性 + position屬性 + float屬性。它對於那