衆所周知,前端三大框架Angular、React、Vue,因此爲了跟上時代的步伐,最近開始着手學習React,這時候就發現個大問題,框架一直在更新,提倡的編寫語法也在更新,網上有許多教程都是一兩年前的了,所以,我決定直接從官方英文文檔入手學習,學習的框架版本爲最新的ReactV15.5.0,現將學習筆記整理以下,以供你們參考,本篇文章主要是react一些基礎語法的講解與總結,如需深刻了解,可查閱官方文檔,也敬請期待後續文章。html
什麼是組件?答曰:功能獨立,封裝良好的代碼塊。前端頁面一直提倡組件化,由於組件化能夠實現高重用,大大提高了咱們的開發效率,也讓咱們的頁面結構變得更加清晰。因此React提倡將頁面解構成組件樹,以組件爲最小單元構造頁面。前端
衆所周知,JS的DOM操做,是影響網頁性能的重要因素之一,所以React提出了虛擬DOM的概念,組件並非真實的 DOM 節點,而是存在於內存之中的一種數據結構,叫作虛擬 DOM (virtual DOM)。只有當它插入文檔之後,纔會變成真實的 DOM 。根據 React 的設計,全部的 DOM 變更,都先在虛擬 DOM 上發生,而後再將實際發生變更的部分,反映在真實 DOM上,這種算法叫作 DOM diff ,它能夠極大提升網頁的性能表現。react
你須要React、React-DOM、babel。
React-DOM的做用就是將咱們本地的虛擬DOM插入文檔,使其變成真實的DOM。
咱們在編寫虛擬DOM時,可使用JSX語法,它將JS和XML語法結合在一塊兒,以下git
const user = { firstName: 'Harper', lastName: 'Perez' }; //你能夠將你的JS表達式放入{}中,以下 const element = ( <h1> Hello, {formatName(user)}! </h1> );
同時React提倡使用ES6語法,因此咱們須要使用babel編譯個人JSX和ES6語法github
你們若是懶得搭建環境,能夠在這裏練習。web
官方提供兩種方法:
1)以JS函數方法,這種方法適用於比較簡單的組件,好比根據輸入返回模板後,無state的變化算法
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
2)以 ES6 class 的方式瀏覽器
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
注意:組件名建議都以大寫字母開頭,以和HTML標籤區分babel
上面構建出來的都是虛擬DOM,要使其在頁面顯示,還須要將其插入真實DOM,這時就須要,也是必需要如下這步數據結構
ReactDOM.render( <Welcome name="嶸麼麼"/>, document.getElementById('root') );
ReactDOM.render()接受兩個參數,第一個是要渲染的組件,第二個使所插入的地方
學習完上面方法,你就能夠構建一個靜態的組件了,可是,這時候就有個問題,咱們組件間須要通訊,咱們頁面須要交互,那怎麼實現呢?不急,咱們接下來一一講解
1)props
組件的屬性值都保存在props這個對象上,這是個可讀對象,咱們能夠給組件定義自定義屬性,調用組件時設置的屬性值,在組件內部能夠經過this.props.yourprop拿到,例子以下
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } ReactDOM.render( <Welcome name="嶸麼麼"/>, document.getElementById('root') ); //這裏的引號包含的嶸麼麼也能夠是變量,這時候就不能用引號包含了,須要用{}包含
2)state
state是組件的私有變量,只有組件本身能夠訪問,state的關鍵做用是:React只有當state改變時會從新渲染組件,所以,咱們能夠把組件當作個狀態機,當state改變時,咱們的視圖也會改變。state的初始化,須要在constructor構造函數裏完成。
class Welcome extends React.Component { constructor(props){ super(props); this.state={ key:value } } //注意,若是用到構造函數,那麼應如此書寫constructor(props){super(props);你的代碼} //props和super(props);是必須的,你的代碼應該放在super()以後 render() { return <h1>Hello, {this.props.name}</h1>; } }
修改state時,則須要經過
this.setState({ key:newValue }); //setState會將傳入的對象與原始state合併,而非覆蓋
這裏對state和props只講解了基礎使用,二者的詳細區別與實例,可查看個人另一篇文章《React的組件間通訊》
事件是頁面交互的基礎,React組件中,事件監聽程序名採用駝峯法命名,以下:
class Welcome extends React.Component { constructor(props){ super(props); this.state={ name:"嶸麼麼的我的博客" } this.handleClick=this.handleClick.bind(this); } handleClick(){ const name=this.state.name; alert(name+"歡迎您!"); } render() { return <div onClick={this.handleClick}>點我</div>; } } ReactDOM.render( <Welcome />, document.getElementById('root') );
上面的表達式this.handleClick=this.handleClick.bind(this);是必須的,由於handleClick()函數;裏用用到this指針,因此咱們必須綁定this指針,若是你以爲很麻煩,官方還提供了其餘兩種方法
//方法一 handleClick=>{ alert(this.state.name+"歡迎您!"); } //方法二 render() { return <div onClick={(e)=>this.handleClick(e)}>點我</div>; }
上面兩種方法都用到了箭頭函數,由於箭頭函數內部沒有定義本身的this,因此當在箭頭函數內部引用this時,this會綁定爲父級的this,而且不能被改變。
阻止事件冒泡
react裏的ev是封裝過的ev對象,並非原裝的,因此有些原裝的方法不行,好比事件冒泡,須要經過ev.nativeEvent.stopImmediatePropagation()實現,分析以下:
1)React爲了提升效率,把事件都委託給了document,因此 e.stopPropagation() 並不是是不能阻止冒泡,而是等他阻止冒泡的時侯,事件已經傳遞給document了,沒東西可阻止了。
2)e.stopPropagation()不行,瀏覽器支持一個好東西,e.stopImmediatePropagation() 他不光阻止冒泡,還能阻止在當前事件觸發元素上,觸發其它事件。這樣即便你都綁定到document上也阻止不了我了吧。
3)這樣作還不行,React對原生事件封裝,提供了不少好東西,但也省略了某些特性。e.stopImmediatePropagation() 就是被省略的部分,然而,他給了開口:e.nativeEvent ,從原生的事件對象裏找到stopImmediatePropagation(),完活。
下節將講述React的組件生命週期、表單、AJAX等
更多前端技術文章,歡迎前往個人我的技術博客:嶸麼麼的我的博客