前言

這是 React 系列教程的第一篇，我們將用 React 實(shí)現(xiàn) Animate.css 官網(wǎng)的效果。對(duì)于 Animate.css 官網(wǎng)效果是一個(gè)非常簡(jiǎn)單的例子，原代碼使用 jQuery 編寫(xiě)，就是添加類與刪除類的操作。這對(duì)于學(xué)習(xí) React 來(lái)說(shuō)是一個(gè)非常簡(jiǎn)易的例子，但是我并不會(huì)在教程中介紹相關(guān)的前置知識(shí)，比如 JSX、ES6 等，對(duì)于小白來(lái)說(shuō)可能還會(huì)有一些困惑的地方，所以還要了解一下 React 相關(guān)的基礎(chǔ)知識(shí)。雖然 React 有很多值得深究的知識(shí)，但這個(gè)系列教程并不會(huì)涉及高大深的內(nèi)容。

預(yù)告一下，在下一篇教程中，我會(huì)使用 React + Redux，編寫(xiě)一個(gè)元胞自動(dòng)機(jī)蘭頓螞蟻的程序。

效果演示

本教程以實(shí)現(xiàn) Animate.css 官網(wǎng)效果為主，不會(huì)去調(diào)整樣式細(xì)節(jié)，所以視覺(jué)上略顯樸素。以下是最終完成的效果：

See the Pen react-animate-css by Zongbin (@nzbin) on CodePen.

因?yàn)檫@個(gè)案例效果非常簡(jiǎn)單，對(duì)于已經(jīng)熟悉 React 的新手來(lái)說(shuō)，完全可以嘗試自己編寫(xiě)實(shí)現(xiàn)，甚至略過(guò)本篇教程。

開(kāi)始吧

編寫(xiě) HTML 結(jié)構(gòu)

整個(gè)教程采用 ES6 語(yǔ)法編寫(xiě)，無(wú)法直接在瀏覽器預(yù)覽，所以需要使用 Babel 編譯一下，大家可以使用官方的 create-react-app 腳手架搭建開(kāi)發(fā)環(huán)境。但是對(duì)于本教程而言，我推薦大家使用 CodePen 在線平臺(tái)編寫(xiě)，簡(jiǎn)單直接，不需要復(fù)雜的環(huán)境配置。

啰嗦一句，在現(xiàn)代化的前端編程中，所有的頁(yè)面 HTML 元素幾乎都是寫(xiě)在 JS 中，這確實(shí)更有利于 DOM 操作。與傳統(tǒng)前端開(kāi)發(fā)一樣，我們同樣先把 HTML 結(jié)構(gòu)寫(xiě)出來(lái)，先看一看基本的雛形，然后再一點(diǎn)一點(diǎn)把事件添加上去。代碼如下：

class App extends React.Component{
  
  render (){
    return (
      <div>
        <h1>Animate.css</h1>
        <select>
          <optgroup label="Attention Seekers">
            <option value="bounce">bounce</option>
            <option value="flash">flash</option>
            <option value="pulse">pulse</option>
            <option value="rubberBand">rubberBand</option>
            <option value="shake">shake</option>
            <option value="swing">swing</option>
            <option value="tada">tada</option>
            <option value="wobble">wobble</option>
            <option value="jello">jello</option>
          </optgroup>

          // ...省略其它動(dòng)畫(huà)選項(xiàng)

        </select>
        <input type="button" value="Animate it"/>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

對(duì)于熟悉 ES6 語(yǔ)法的朋友，上面的寫(xiě)法不難理解，我們寫(xiě)了一個(gè) React 組件以及一個(gè)渲染輸出語(yǔ)句。

關(guān)于狀態(tài)

React 和 jQuery（傳統(tǒng)前端編程）的最大不同在于 DOM 操作的方式，React 通過(guò)狀態(tài)變化來(lái)更新 DOM，而傳統(tǒng)方式則使用事件更新 DOM。但是 React 的狀態(tài)變化簡(jiǎn)單來(lái)說(shuō)也要依靠事件驅(qū)動(dòng)。所以對(duì)于小白來(lái)說(shuō)不要有太多的思想包袱。上一篇文章《如何在已有的 Web 應(yīng)用中使用 ReactJS》通過(guò)更簡(jiǎn)單的示例介紹了 React 和 jQuery 的不同之處，感興趣的同學(xué)可以詳細(xì)了解一下。按照 React 官方規(guī)范，我們用以下方法添加狀態(tài)：

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      selected:''
    }
  }
}

添加事件

jQuery 添加事件的方式是獲取引用元素，然后綁定事件，而 React 則是通過(guò) JSX（可以簡(jiǎn)單理解為模板字符串）直接在元素上綁定事件。這種方式和 DOM 0 級(jí)綁定事件的方式類似，但是并不相同。

添加事件之前，我們先看一下需要哪些事件。首先，我們需要給選擇框添加 change 事件，用于在切換動(dòng)畫(huà)時(shí)添加一個(gè)動(dòng)畫(huà)類。另外，當(dāng)動(dòng)畫(huà)結(jié)束時(shí)我們需要把動(dòng)畫(huà)類移除，所以需要綁定一個(gè) animationend 事件。最后，給 Animate it 按鈕添加一個(gè) click 事件，點(diǎn)擊按鈕，重新添加動(dòng)畫(huà)類。

以下是添加事件之后的代碼：

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      selected:''
    }
    this.animationName = 'bounce';
  }
  
  handleChange = (e)=>{
    this.setState({
      selected: e.target.value
    });
    
    this.animationName = e.target.value;
  }
  
  handleAnimationEnd = (e)=>{
    this.setState({
      selected: ''
    });
  }
  
  handleClick = (e)=>{
    this.setState({
      selected: this.animationName
    });
  }
  
  render (){
    return (
      <div>
        <h1 className={`animated ${this.state.selected}`} onAnimationEnd={this.handleAnimationEnd}>Animate.css</h1>
        <select onChange={this.handleChange} >

          // ...省略動(dòng)畫(huà)選項(xiàng)
          
        </select>
        <input type="button" value="Animate it" onClick={this.handleClick}/>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

添加完事件之后，整個(gè)教程基本就結(jié)束了，或許我的代碼并不是最好的。對(duì)于剛開(kāi)始接觸 React 或者 JS 基礎(chǔ)不太扎實(shí)的同學(xué)，需要重點(diǎn)理解一下事件綁定時(shí) this 的指代問(wèn)題，以上代碼使用了箭頭函數(shù)來(lái)解決 this 的指代問(wèn)題，還可以使用 bind 方法。對(duì)于涉及動(dòng)畫(huà)的問(wèn)題，還要了解 animationend 和 transitionend 兩個(gè)事件。

總結(jié)

本教程屬于 React 非常基礎(chǔ)的使用獨(dú)立狀態(tài)的例子，沒(méi)有任何其它復(fù)雜的概念，所以非常適合新手。強(qiáng)調(diào)一點(diǎn)，本人并不精通 React，也是以一個(gè)學(xué)習(xí)者的姿態(tài)寫(xiě)這篇教程。因?yàn)?React 并不是我現(xiàn)在重點(diǎn)研究的技術(shù)，所以現(xiàn)階段不想花過(guò)多的時(shí)間與精力去學(xué)習(xí)，但還是希望這個(gè)簡(jiǎn)易的系列教程可以幫助想要學(xué)習(xí) React 的新人。除了原創(chuàng)教程之外，我在之前也翻譯過(guò)兩篇非常優(yōu)秀的實(shí)戰(zhàn)教程，感興趣的同學(xué)可以翻出來(lái)學(xué)習(xí)一下。

總結(jié)

以上是生活随笔為你收集整理的React 系列教程 1：实现 Animate.css 官网效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。