React學(xué)習(xí)筆記

寫在前面

React入門學(xué)習(xí)筆記。

教程可參考：
React 教程 | 菜鳥教程
阮一峰的網(wǎng)絡(luò)日志 > React 入門實例教程

自己用React寫了一個to-do-list的小demo：
react-todolist

歡迎評論指出問題，一起學(xué)習(xí)。

01 React簡介

React 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫。

React主要用于構(gòu)建UI，很多人認為 React 是 MVC 中的 V（視圖）。

React 起源于 Facebook 的內(nèi)部項目，用來架設(shè) Instagram 的網(wǎng)站，并于 2013 年 5 月開源。

React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關(guān)注和使用它。

02 React特點

  1. 聲明式設(shè)計 ?React采用聲明范式，可以輕松描述應(yīng)用。

  2. 高效 ?React通過對DOM的模擬，最大限度地減少與DOM的交互。

  3. 靈活 ?React可以與已知的庫或框架很好地配合。

  4. JSX ? JSX 是 JavaScript 語法的擴展。React 開發(fā)不一定使用 JSX ，但我們建議使用它。

  5. 組件 ? 通過 React 構(gòu)建組件，使得代碼更加容易得到復(fù)用，能夠很好的應(yīng)用在大項目的開發(fā)中。

  6. 單向響應(yīng)的數(shù)據(jù)流 ? React 實現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單。

03 React安裝與使用

實例中我們引入了三個庫： react.min.js 、react-dom.min.js 和 babel.min.js：

  1. react.min.js - React 的核心庫

  2. react-dom.min.js - 提供與 DOM 相關(guān)的功能

  3. babel.min.js - Babel 可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，這樣我們就能在目前不支持 ES6 瀏覽器上執(zhí)行 React 代碼。Babel 內(nèi)嵌了對 JSX 的支持。通過將 Babel 和 babel-sublime 包（package）一同使用可以讓源碼的語法渲染上升到一個全新的水平。

也可以用npm來安裝并創(chuàng)建項目：

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

04 React JSX

簡介

React 使用 JSX 來替代常規(guī)的 JavaScript。

JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。

我們不需要一定使用 JSX，但它有以下優(yōu)點：

  1. JSX 執(zhí)行更快，因為它在編譯為 JavaScript 代碼后進行了優(yōu)化。
  2. 它是類型安全的，在編譯過程中就能發(fā)現(xiàn)錯誤。
  3. 使用 JSX 編寫模板更加簡單快速。

使用JSX

JSX 看起來類似 HTML ，我們可以看下實例:

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

我們可以在以上代碼中嵌套多個 HTML 標簽，需要使用一個 div 元素包裹它，實例中的 p 元素添加了自定義屬性 data-myattribute，添加自定義屬性需要使用 data- 前綴。

JSX可以放在一個獨立文件中，在HTML文件中引入JSX時需要將type="text/babel"。

在JSX中使用javascript表達式

我們可以在 JSX 中使用 JavaScript 表達式。表達式寫在花括號 {} 中。實例如下：

ReactDOM.render(
    <div>
        <h1>{1+1}</h1>
    </div>
    document.getElementById('example')
);

不能使用if語句，可以用三元表達式代替。

React內(nèi)聯(lián)樣式

React推薦使用內(nèi)聯(lián)樣式，使用駝峰寫法，自動補全px。

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鳥教程</h1>,
    document.getElementById('example')
);

其他

標簽內(nèi)部的注釋需要花括號。

允許在模板中插入數(shù)組。

React 的 JSX 使用大、小寫的約定來區(qū)分本地組件的類和 HTML 標簽。

05 React組件

注意，原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭，比如 HelloMessage 不能寫成 helloMessage。除此之外還需要注意組件類只能包含一個頂層標簽，否則也會報錯。

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello World！</h1>;
  }
});
 
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

如果我們需要向組件傳遞參數(shù)，可以使用 this.props 對象。

注意，在添加屬性時， class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。

06 React State

React 把組件看成是一個狀態(tài)機（State Machines）。通過與用戶的交互，實現(xiàn)不同狀態(tài)，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致。

React 里，只需更新組件的 state，然后根據(jù)新的 state 重新渲染用戶界面（不要操作 DOM）。

以下實例中創(chuàng)建了 LikeButton 組件，getInitialState 方法用于定義初始狀態(tài)，也就是一個對象，這個對象可以通過 this.state 屬性讀取。當用戶點擊組件，導(dǎo)致狀態(tài)變化，this.setState 方法就修改狀態(tài)值，每次修改以后，自動調(diào)用 this.render 方法，再次渲染組件。

var LikeButton = React.createClass({
    getInitialState: function() {
      return {liked: false};
    },
    handleClick: function(event) {
      this.setState({liked: !this.state.liked});
    },
    render: function() {
      var text = this.state.liked ? '喜歡' : '不喜歡';
      return (
        <p onClick={this.handleClick}>
          你<b>{text}</b>我。點我切換狀態(tài)。
        </p>
      );
    }
});

ReactDOM.render(
    <LikeButton />,
    document.getElementById('example')
);

07 React Props

state 和 props 主要的區(qū)別在于 props 是不可變的，而 state 可以根據(jù)與用戶交互來改變。這就是為什么有些容器組件需要定義 state 來更新和修改數(shù)據(jù)。 而子組件只能通過 props 來傳遞數(shù)據(jù)。

可以通過 getDefaultProps() 方法為 props 設(shè)置默認值。

Props 驗證使用 propTypes，它可以保證我們的應(yīng)用組件被正確使用，React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數(shù)據(jù)是否有效。當向 props 傳入無效數(shù)據(jù)時，JavaScript 控制臺會拋出警告。

08 React組件API

  • 設(shè)置狀態(tài)：setState
  • 替換狀態(tài)：replaceState
  • 設(shè)置屬性：setProps
  • 替換屬性：replaceProps
  • 強制更新：forceUpdate
  • 獲取DOM節(jié)點：findDOMNode
  • 判斷組件掛載狀態(tài)：isMounted

replaceState()方法與setState()類似，但是方法只會保留nextState中狀態(tài)，原state不在nextState中的狀態(tài)都會被刪除。

props相當于組件的數(shù)據(jù)流，它總是會從父組件向下傳遞至所有的子組件中。當和一個外部的JavaScript應(yīng)用集成時，我們可能會需要向組件傳遞數(shù)據(jù)或通知React.render()組件需要重新渲染，可以使用setProps()。

replaceProps()方法與setProps類似，但它會刪除原有。

forceUpdate()方法適用于this.props和this.state之外的組件重繪（如：修改了this.state后），通過該方法通知React需要調(diào)用render()，一般來說，應(yīng)該盡量避免使用forceUpdate()，而僅從this.props和this.state中讀取狀態(tài)并由React觸發(fā)render()調(diào)用。

isMounted()方法用于判斷組件是否已掛載到DOM中?？梢允褂迷摲椒ūＷC了setState()和forceUpdate()在異步場景下的調(diào)用不會出錯。

09 React 組件生命周期

組件的生命周期可分成三個狀態(tài)：

  • Mounting：已插入真實 DOM
  • Updating：正在被重新渲染
  • Unmounting：已移出真實 DOM

生命周期的方法有：

  • componentWillMount 在渲染前調(diào)用，在客戶端也在服務(wù)端。
  • componentDidMount 在第一次渲染后調(diào)用，只在客戶端。
  • componentWillReceiveProps 在組件接收到一個新的prop時被調(diào)用。
  • shouldComponentUpdate 在組件接收到新的props或者state時被調(diào)用。在初始化時或者使用forceUpdate時不被調(diào)用。
  • componentWillUpdate 在組件接收到新的props或者state但還沒有render時被調(diào)用。
  • componentDidUpdate 在組件完成更新后立即調(diào)用。
  • componentWillUnmount 在組件從 DOM 中移除的時候立刻被調(diào)用。
 componentDidMount: function () {}；

10 AJAX

React 組件的數(shù)據(jù)可以通過 componentDidMount 方法中的 Ajax 來獲取，當從服務(wù)端獲取數(shù)據(jù)庫可以將數(shù)據(jù)存儲在 state 中，再用 this.setState 方法重新渲染 UI。

11 表單與事件

當你需要從父組件中更新子組件的 state 時，你需要在父組件通過創(chuàng)建事件句柄 (handleChange) ，并作為 prop (updateStateProp) 傳遞到你的子組件上。

當你需要從子組件中更新父組件的 state 時，你需要在父組件通過創(chuàng)建事件句柄 (handleChange) ，并作為 prop (updateStateProp) 傳遞到你的子組件上。

12 React Refs

React 支持一種非常特殊的屬性 Ref ，你可以用來綁定到 render() 輸出的任何組件上。

這個特殊的屬性允許你引用 render() 返回的相應(yīng)的支撐實例（ backing instance ）。這樣就可以確保在任何時間總是拿到正確的實例。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容