原創教程之——reactjs 組件入門教程
在學習react之前,希望你有以下準備:
react的安裝
ECMAScript 6基礎
本文不講解react的安裝步驟,若需了解請移步官方網站(https://reactjs.org/),那裏講解非常清楚,也很簡單。
至於ECMAScript 6,大家可以去阮一峰老師的官網(http://www.ruanyifeng.com)學習。
這篇文章主要解決一下幾個要點, 這幾個要點也可能是大家在學習react時非常迷惑的地方。
要點一:
什麽是組件?
要點二:
如何編寫組件?
要點三:
組件之間如何組合使用?
在弄清這些要點之前,我們先來看,react安裝後的目錄是怎樣的,應該在哪個目錄下進行開發。
看截圖:
可以說這個就是react的標準目錄結構,打開src目錄:
看截圖:
這個目錄下就是你將要開發組件的地方。
弄清了react的目錄結構,我們正式來講解要點。
什麽是組件?
請記住:文件即組件。
比如在src目錄下的App.js,這個App.js就是組件。你也可以自己建立一個組件,如Nav.js等等。
這個就是react的核心思想。一個網站的構成可以看成是很多組件的集合。
比如一個網站的首頁分為頭部,主內容區域,底部。那麽這三個大區域就可以當作組件。然後每個區域裏的內容塊又可以當作組件,以此類推,可以劃分成更小的組件。我們可以來看一張圖:
說形象點組件就像定義的很多功能函數,通過配置參數,組合調用這些函數,最後就可以實現一個完整的網站。
組件如此的美好,那該怎麽來編寫呢?
第二個問題,如何編寫組件。
在編寫組件之前,我自己通常把組件分成兩種,非UI組件和UI組件。
看例子:
//App.js import React, { Component } from ‘react‘; import ‘./App.css‘; class App extends Component { render() { return ( <div className="App"> <header className="App-header"> <h1 className="App-title">Welcome to React</h1> </header> </div> ); } } exportdefault App;
這是一個UI組件。是一個非常簡單的組件。即便不了解es6的同學,也能秒懂。
由此,我們可以把UI的組件書寫結構標準化,如下:
//MyApp.js import React, { Component } from ‘react‘; class MyApp extends Component { //其它的功能代碼 render() { return ( //UI代碼 ); } } export default MyApp;
依次類推,我們也可以把非UI的組件書寫結構標準化,如下:
//Myfn.js let Myfn = { http(params){ //代碼 } showMessage(msg){ //代碼 } ... //其它代碼 } export default Myfn;
對比一下,發現兩者有以下不同:
UI組件需要class語句
UI組件需要render函數
反之則不需要。
相同點:
react規定,組件名(也就是文件名)首字母必須大寫。
為了便於代碼管理和閱讀,最好讓組件名和組件內部導出的綁定名字統一。以Myfn.js為例,Myfn.js的文件名和其導出的Myfn對象名是一致的。大家一定要養成這樣的書寫習慣。
組件寫法我們會了,那如何讓組件組合使用呢?
以上面的例子說明,如果我想在MyApp.js裏使用Myfn,可以這樣使用:
//MyApp.js import React, { Component } from ‘react‘; import Myfn from ‘./Myfn‘; //註意這句,此處的Myfn.js的擴展名可以省去 class MyApp extends Component { //其它的功能代碼 showMsg(msg){ Myfn.showMessage(msg); //註意這句 } render() { //this.showMsg(‘hello world!‘)或 //Myfn.showMessage(‘hello world!‘) return ( //UI代碼 ); } } export default MyApp;
是不是很簡單?
記住一句話:非UI組件通常是導入到UI組件裏使用的,非UI組件通常為UI組件渲染時提供邏輯處理。
原創教程之——reactjs 組件入門教程