react 基礎知識介紹
另外，本教程的**將全部使用 es6 語法，教程中我會介紹一些用到的 es6 語法，但是不會從頭講解了，推薦閱讀es6入門
hello world
以下是乙個最簡單的demo，將乙個最簡單的元件渲染到頁面上。
import react from 『react』
import from 『react-dom』
// 定義元件
class hello extends react.component
} // 渲染元件到頁面
render(
,document.getelementbyid(『root』)
)深入一下，這裡import react from 'react』引用的是什麼？
這裡的』react』對應的就是./package.json檔案中dependencies中的』react』，即在該目錄下用npm install安裝的 react 。npm 安裝的 react 的物理檔案是存放在 ./node_modules/react中的，因此引用的東西肯定就在這個資料夾裡面。
開啟./node_modules/react/package.json找到"main": 「react.js」,，這裡的main即指定了入口檔案，即./node_modules/react/react.js這個檔案。那麼，問題的答案自然就出來了。
jsx 語法
react 裡面寫模板要使用 jsx 語法，它其實和 html 很相似但是又有那麼幾點不一樣。下面簡單介紹一下 jsx 語法的一些特點：
使用乙個父節點包裹
jsx 中不能一次性返回零散的多個節點，如果有多個請包涵在乙個節點中。例如，
// 三個
外面必須再包裹一層
return (
段落1段落2
段落3 ) 再例如：
// 中返回的兩個
也要用 包裹
return (
段落1
) #### 注釋 jsx 中用的注釋形式
return (
// jsx 外面的注釋
hello world
)
對應 html 的兩種形式，jsx 的樣式可以這樣寫：
css樣式：
hello world
，注意這裡是classname，而 html 中是class
內聯樣式：hello world，注意這裡的}，還有fontsize的駝峰式寫法
事件拿 click 事件為例，要在標籤上繫結 click 事件，可以這樣寫
class hello extends react.component
clickhandler(e)注意，onclick是駝峰式寫法，以及.bind(this)的作用
迴圈在 jsx 中使用迴圈，一般會用到array.prototype.map（來自es5標準）
class hello extends react.component
})} )}
}注意，arr.map是包裹在{}中的，key=有助於react的渲染優化，jsx中的{}可放乙個可執行的 js 程式或者變數
判斷jsx中使用判斷一般會用到三元表示式（表示式也是放在{}中的），例如：
return (
段落1 ) 也可以這樣使用：
**分離
之前的demo**都是在乙個檔案中，實際開發中不可能是這樣子的，因此這裡就先把元件的**給拆分開。我們將使用 es6 的模組管理規範。
page 層
import react from 『react』
class hello extends react.component
} import hello from 『./containers/hello』;
render(
,document.getelementbyid(『root』)
)注意，**import hello from 『./containers/hello』;這裡可以寫成./containers/hello/index.jsx也可以寫成./containers/hello/index
subpage 層
如果hello元件再稍微複雜一點，那麼把**都放一塊也會變得複雜，接下來我們再拆分。
import carousel from 『./subpage/carousel』
import recommend from 『./subpage/recommend』
import list from 『./subpage/list』
class hello extends react.component
}注意，這裡import時.jsx字尾省略了。
component 層
以上介紹的是頁面和複雜頁面的拆分，但那都是頁面層級的，即page層。這裡複雜頁面拆分為subpage其實沒啥特別的，就是把複雜頁面的**拆分一下，會更加符合開放封閉原則。而且，只有複雜頁面才有必要去拆分，簡單頁面根本沒必要拆分。因此，無論是page還是subpage它都是頁面級別的。
import header from 『…/…/components/header』
class hello extends react.component )
}}資料傳遞 & 資料變化
props
接著剛才 header 的話題往下說，每個頁面都會使用 header ，但是 header 上顯示的標題每個頁面肯定是不一樣的。我們需要這樣解決：頁面中引用header時，這樣寫
，即給 header 元件設定乙個 title 屬性。而在 header 元件中可以這樣取到
render()
)}
props && state
上面提到了 props 不能被自身修改，如果元件內部自身的屬性發生變化，該怎麼辦？—— react 為我們提供給了 state，先看乙個demo：
class hello extends react.component
}render() )
} }
還有一點非常重要，react 會實時監聽每個元件的 props 和 state 的值，一旦有變化，會立刻更新元件，將結果重新渲染到頁面上，下面demo演示了state的變化，props也是一樣的
class hello extends react.component
}render() )
} clickhandler() ) }
}智慧型元件 & 木偶元件
智慧型元件 在日常開發中，我們也簡稱「頁面」。為何說它「智慧型」，因為它只會做一些很聰明的事兒，髒活累活都不幹。它只對資料負責，只需要獲取了資料、定義好資料操作的相關函式，然後將這些資料、函式直接傳遞給具體實現的元件即可。
木偶元件 這裡「木偶」一詞用的特別形象，它總是被人拿線牽著。它從智慧型元件（或頁面）那裡接受到資料、函式，然後就開始做一些展示工作，它的工作就是把拿到的資料展示給使用者，函式操作開放給使用者。至於資料內容是什麼，函式操作是什麼，它不關心。
以上兩個如果不是理解的很深刻，待把課程學完再回頭看一下這兩句話，相信會理解的。
生命週期
以下宣告週期，也沒必要每個都寫demo來解釋，先簡單了解一下，後面會根據實際的例子來解釋，這樣會更加易懂。
getinitialstate
初始化元件 state 資料，但是在 es6 的語法中，我們可以使用以下書寫方式代替
class hello extends react.component }}
render
最常用的hook，返回元件要渲染的模板。
comopentdidmount
元件第一次載入時渲染完成的事件，一般在此獲取網路資料。實際開始專案開發時，會經常用到。
shouldcomponentupdate
主要用於效能優化，react 的效能優化也是乙個很重要的話題，後面一併講解。
componentdidupdate
元件更新了之後觸發的事件，一般用於清空並更新資料。實際開始專案開發時，會經常用到。
componentwillunmount
元件在銷毀之前觸發的事件，一般使用者儲存一些特殊資訊，以及清理settimeout事件等。
react基礎知識2
在react的事件處理程式中，內部的this是指向undefined 解決方案1 通過this.clickfn.bind this 解決方案2 屬性初始化器語法,提供了乙個箭頭函式 解決方案3 在函式外麵包一層箭頭函式 onclick onclick class event extends reac...
react 學習基礎知識
三種改變this指向的方法 1.在呼叫的時候使用bind方法 onclick 2.在constructor裡面改變this指向 this.getdata this.getdata.bind this 3.在方法上使用箭頭函式 getdata 兩種雙向繫結的方法 1.根據當前的元素自身的value值 ...
Android SQLite基礎知識介紹
乙個應用可以有乙個或多個資料庫，乙個資料庫可以有一張或多張表。資料庫可以在任何時候建立，資料庫中的表可以在任何時候建立。sqlite資料庫是關係模型資料庫。關係模型資料庫使用自己的一套術語，其基本術語有屬性 元組 關係 關係模型。它的 基本資料結構成為關係。乙個資料庫又若干個關係組成 乙個關係的數學...