二、React初體驗之React組件建立

來源:互聯網
上載者:User

標籤:

(中間因為應付各種考試,處理其他事情,隔了好時間沒更新,現在終於有時間了,續上!)

本文為React初始體驗,因此先不考慮檔案如何組織,盡量以最簡單的方式讓大家瞭解React其中的原理。

在建立組件(component)之前,大家首先需要瞭解一些基礎知識。有ES6、JSX文法等基礎知識的同學請跳過下面一段。

ES6是JavaScript的最新標準,裡面新增了許多文法方式,甚至出現了“類”的繼承方式,我個人暫且把他們理解為新增了許多“文法糖”,這些“文法糖”可能帶給老手的是方便,而對於我們這些菜鳥來說就是一種理解負擔,但必須要看,因為這就是趨勢。JSX文法,大家就姑且認為是一種能將js和html寫在一起處理的文法。以上內容不展開講,有時間會專門開一篇文章,不知道的童鞋可以先自行百度一下。

下面是今天的正題:Action……

React的原理其實非常簡單,請看:

一句話說上面的關係:動作會影響狀態資料的變化,狀態資料的變化造成組件變化,組件變了有可能會造成新的動作產生,從而再影響狀態資料變化……

組件(component):給大家舉個“栗子”,相信大家都刷微博吧,微博中的每一條資訊都相當於有一個小面板來展示資訊,這個小面板裡面有發該條微博人的頭像,微博內容,插圖,以及“轉寄”、“評論”、“點贊”, 這個小面板我們就可以理解成是一個總組件,面板中的每個部分又可以認為是小工具,小工具組成了最終的大組件。因為每條微博的組成內容類別似,所以我們只需要建立這樣一個面板組件,重複使用。組件中都有個props屬性,這個屬性中存放組件的初始狀態的量,通過this.props.<變數名>來調用,通過getDefaultProps()來設定預設初始的prop屬性值,通過propTypes來設定props的類型、是否必須有等。

動作(action):這個應該都熟悉,像什麼onClick,onChange,onBlur等,這兒有React支援的所有事件,這些動作需要執行的內容如何定義後面會講到。

狀態資料(state):這是React的核心部分,組件的變化就是因為state的變化引起的。state與props類似,區別是props一旦設定一般不去改變它,但是動作(action)的變化會引起狀態資料(state)的隨時變化,從而重新渲染組件(component)引起變化。通過getInitialState()來設定預設的狀態,通過this.setState()來改變狀態值。

說了這麼多,開始實戰吧!!!

1、建立一個檔案夾,用於存放這個樣本的所有檔案,我將他命名為“ReactApp”,然後cd到這個檔案夾下npm安裝上一篇文章中提到的所有組件。

2、建立名為App.jsx 的檔案,這就是我們提到的用於建立組件的地方。下面的大致結構是:一個總的組件MyComponent包含兩個子組件Component1和Component2,且name屬性由總組件通過props屬性由上向下傳遞到各個子組件。

 1 import React from ‘react‘;//引入react模組,用來建立組件 2  3 var MyComponent= React.createClass({//建立總組件,記得組件名一定要大寫哦!不然會報錯!!! 4   render: function() { 5     return ( 6       <div> 7         <Component1 name={this.props.name}/>//通過props傳遞name屬性 8         <Component2 name={this.props.name}/> 9       </div>10     );11   }12 });13 14 var Component1 = React.createClass({//建立子組件Component115     getDefaultProps:function () { //設定初始Props16       return {17         inputValue:‘隨便寫些啥‘,18       };19     },20     getInitialState:function () { //設定初始State21       return {22         content:"Hello World",23       };24     },25     handleClick:function () { //使用者自己定義的動作函數26       this.setState({content:"就是"+this.refs.myTextInput.value+"!!!"});//用於修改state27     },28     handleChange:function () {  //使用者自己定義的動作函數29       this.setState({content:this.refs.myTextInput.value});30     },31     render:function () {  //組件渲染函數,最外層只能有一個標籤!!!!!32       return (33         <div>34           <h1>{this.props.name}:Component1</h1>35           <input type="text" ref="myTextInput" placeholder={this.props.inputValue} onChange={this.handleChange} />36           <input type="button" value="點擊" onClick={this.handleClick} />37           <h3>{this.state.content}</h3>38         </div>39       );40     },41 });42 43 var Component2 = React.createClass({//建立子組件Component244 45   getInitialState:function(){//設定state的預設初始值46     return{47       counter:0,48     };49   },50   handleAdd:function () {//action函數,state加一51     this.state.counter+=1;52     this.setState({counter:this.state.counter});//設定當前的state值53   },54   handleMinus:function () {//action函數,state減一55     this.state.counter-=1;56     this.setState({counter:this.state.counter});57   },  58   handleBack:function () {//action函數,state歸零59     this.state.counter=0;60     this.setState({counter:this.state.counter});61   },62   render:function(){//組件渲染63     return(64       <div>65         <h1>{this.props.name}:Component2</h1>66         <input type="button" value="Add 1" onClick={this.handleAdd} />67         <input type="button" value="Minus 1" onClick={this.handleMinus} />68         <input type="button" value="Back 0" onClick={this.handleBack} />69         <h2>{this.state.counter}</h2>70       </div>71     );72   },73 });74 export {MyComponent} ;//組件輸出,(這兒插一句題外話,export是ES6制定的模組載入方式,與import配合使用,而exports是CommonJS的標準,與require等配合使用,他們的區別有機會另開文章將)

 3、組件雖然建好了,但是瀏覽器不會認識這種形式的組件,這時候就需要用到react提供的另一個庫“react-dom”,它的作用是將組件渲染到真正的dom樹上,很簡單建立檔案名稱為main.js的檔案。

1 import React from ‘react‘;//引入“react”組件2 import ReactDOM from ‘react-dom‘;//引入“react-dom”組件3 import {MyComponent} from ‘./App.jsx‘;//引入我們剛才寫好的MyComponent組件4 ReactDOM.render(<MyComponent  name="chen" />,document.getElementById(‘app‘));

 

 卡!到此為止,組件的建立的流程基本說完了,下一篇文章主要會講如何將這個組件在NodeJS下利用Webpack打包並以熱載入模式,讓他真正跑起來,最後一片文章更完後我會將整個例子放在github上,有興趣的同學可以去看看,試試。

 寫在最後的n段話:

1、React的優勢在於它首先會建立一個虛擬dom,就像我們上面寫的組件,如果組件中的資料有更新,它不會直接去操作瀏覽器中的真實dom,而是先在自己建立的虛擬組件中利用diff演算法,找出不同的地方修改,然後將其渲染到瀏覽器上。沒有對真實dom大量的操作也就意味著瀏覽器端渲染速度加快,這基本就是React的核心所在。

2、在建立組件(Component)的時候,我們只用到了其中的一少部分函數或者屬性,還有沒有用到的如:

  ①propTypes,它是一個Json對象,用於設定組件中props屬性的類型,如number,string等,保證屬性的安全性;

  ②組件在渲染的時候會有幾個狀態,react官方把它叫做Lifecycle Methods,其實就是設定在組件渲染到瀏覽器前要做什麼,渲染後做什麼,對應的API如下:

    componentWillMount();//組件渲染前

    componentDidMount();//組件渲染完成後

    componentWillUpdate();//由於Action驅動,組件在更新前

    componentDidUpdate();//組件在更新完成後

    componentWillReceiveProps();//組件在接受到props之前

    。。。還有好多關於組件變化狀態的函數,可以點這兒查詢。

    

 

二、React初體驗之React組件建立

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.