React入門教程(一）

時間 2019-12-09

標籤 react 入門教程欄目 React 简体版

原文原文鏈接

作前端的人都知道，目前熱門前端的框架是 VAR => Vue，Anglur，React。
而若是說最熱門的前端框架是誰，毫無懸念是 Reactcss

React 是由 Facebook 主導開發的一個 JavaScript 框架。學習 React 須要你擁有基本 JavaScript 和 HTML 知識html

接下來讓咱們開始學習 React ，首先學習如何使用React輸出一個 Hello React前端

1、Hello React

新建一個 Reactdemo.html ，輸入如下內容react

<!DOCTYPE html>
<html>
    <head>
            <meta charset="UTF-8" />
      <title>Hello React</title>
      <script crossorigin  src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
      <script crossorigin  src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
      <script crossorigin  src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
    </head>
    <body>
      <div id="root"></div>
      <script type="text/babel">
        //咱們的React代碼在這裏
       ReactDOM.render(
         <h1>Hello, React</h1>,
         document.getElementById('root')
       )
      </script>
    </body>
</html>

運行試試看！Hello，React！數組

上面代碼一共用了三個庫：react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關的功能，babel.js 的做用是將 JSX 語法轉爲 JavaScript 語法。前端框架

接下來讓咱們看看代碼，在 ReactDOM.render 函數裏咱們看到的是一個相似與XML/HTML的語法，但實際上他不是HTML，它就是基於 JavaScript，在 React 當中的一種語法擴展的實現。例如上面JSX語法通過轉換後會變成React建立Element的一個方法。babel

ReactDOM.render(
     React.createElement('h1',null,'Hello, React'),
     document.getElementById('root')
    )

而 ReactDOM.render 是 React 的最基本方法，用於將模板轉爲 HTML 語言，並插入指定的 DOM 節點(例子中是id爲root的節點)。框架

2、JSX語法

JSX 的基本語法規則：遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析dom

JSX表達式

把下面的代碼運行試試看！函數

var str = 'cnyballk'
    ReactDOM.render(
      <h1>Hello, {str}</h1>,
      document.getElementById('root')
    )

在{}你可使用任何js表達式，若是str變量是數組，它還會幫你展開，例：

var str = [1,2,3]
    ReactDOM.render(
      <h1>Hello, {str}</h1>,
      document.getElementById('root')
    )

JSX嵌套

在JSX裏的標籤也能夠像 HTML 同樣相互嵌套，須要注意的是，JSX 在嵌套時，最外層有且只能有一個標籤

var str = 'cnyballk'
    ReactDOM.render(
      <h1>Hello, {str}
      <p>我是p元素</p>
      </h1>,
      document.getElementById('root')
    )

若是是這樣就會報錯，因此要注意哦~

var str = 'cnyballk'
    ReactDOM.render(
      <h1>Hello, {str}</h1>
      <p>我是p元素</p>,
      document.getElementById('root')
    )

3、React組件

React 容許將代碼封裝成組件，而後像插入普通 HTML 標籤同樣，在網頁中插入這個組件，React官方對組件的定義是指在UI界面中，能夠被獨立劃分的、可複用的、獨立的模塊。組件從概念上看就像是函數，它能夠接收任意的輸入值（稱之爲「props」），並返回一個須要在頁面上展現的React元素。
新版本的React裏提供了兩種定義組件的方法:
第一種函數定義組件，咱們只須要定義一個接收props傳值：

function Hello(props) {
      return (<h1>Hello, {props.name}</h1>)
    }

第二種是使用ES6的語法，類的概念來定義React組件：

class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

這裏要注意的是組件的首字母必須是大寫，Hello不能寫成hello，不然會報錯。

那麼怎麼使用呢：

ReactDOM.render(
      <div>
        <Hello name="cnyballk1" />
        <Hello name="cnyballk2" />
      </div>,
      document.getElementById('root')
    )

組件內嵌套組件

組件也是能夠嵌套組件的，對於React來講，一個網頁就是由不一樣的組件組合而成，組件互相包含

class Hello extends React.Component{
      render (){
      return <div>
      {
        this.props.children.map(function (child) {
          return <h1>Hello,{child}</h1>;
        })
      }
      </div>
      }
    }
  class Name extends React.Component{
    render(){
      return <span>{this.props.name}</span>
    }
  }
  ReactDOM.render(
    <Hello>
      <Name name="cnyballk1"/>
      <Name name="cnyballk2"/>
    </Hello>,
      document.getElementById('root')
    )

是否是很好奇props是什麼？別急，接下來就爲你講解

4、Props

props其實就是屬性Properties的縮寫。

組件的屬性能夠在組件類的 this.props 對象上獲取，好比 name 屬性就能夠經過 this.props.name 讀取

添加組件屬性，有一個地方須要注意，就是 class 屬性須要寫成 className ，for 屬性須要寫成 htmlFor ，這是由於 class 和 for 是 JavaScript 的保留字。

props是隻讀的

在React中，props都是自上向下傳遞，從父組件傳入子組件。而且props是隻讀的，咱們不能在組件中直接修改props的內容。也便是說組件只能根據傳入的props渲染界面，而不能在其內部對props進行修改。

props類型檢查

組件的屬性能夠接受任意值，字符串、對象、函數等等。可是有時咱們須要一種機制，爲了不錯誤類型的內容傳入，咱們能夠爲props添加類型檢查。

5、State狀態

組件免不了要與用戶互動，而state就比如狀態機，保存着組件的狀態，下面經過一個計數器的例子來講下state的用法以及須要注意的地方：

class Button extends React.Component{
   constructor(props){
     super(props)
     this.state = {
       num:1
     }
     this.handlerClick = this.handlerClick.bind(this)
   }
   handlerClick(){
     this.setState({num:this.state.num+1})
   }
   render (){
     return <button onClick={this.handlerClick}>{this.state.num}</button>
   }
 }
  ReactDOM.render(
        <Button />,
      document.getElementById('root')
    )

在React中咱們經過類定義組件聲明一個有狀態的組件，在構造方法初始化state，以後能夠用過this.state來訪問它，初始化state以後，若是咱們想改變它，是不能夠直接對其賦值的，直接修改state的值沒有任何意義，不會觸發組件的從新渲染。

因此須要this.setState這個方法，在改變state的同時，觸發React內部的一系列函數，最後調用 this.render 方法，再次渲染組件。

6、組件的生命週期

組件有如下生命週期

componentWillMount
組件即將掛載

componentWillReceiveProps
組件即將接收props

shouldComponentUpdate
返回是否須要更新組件的判斷

componentWillUpdate
組件即將更新

componentDidMount
組件已掛載

componentDidUpdate
組件已更新

componentWillUnmount
組件即將卸載

爲了更好的方便理解生命週期，讓咱們來看看是生命週期是如何流轉的：

class Nums extends React.Component {
  constructor(props) {
    super(props)
    console.log(`子組件構造函數觸發`)
  }
 
   componentWillMount() {
      console.log(`組件即將掛載`)
   }
 
   componentDidMount() {
      console.log(`組件已掛載`)
      console.log(`   `)
   }
 
   componentWillReceiveProps(newProps) { 
      console.log(`組件即將接收props`)
   }
   
   componentWillUpdate(nextProps, nextState) {
      console.log(`組件即將更新`)
   }
 
   componentDidUpdate(prevProps, prevState) {
      console.log(`組件更新完畢`)
      console.log(`   `)
   }
 
   componentWillUnmount() {
      console.log(`組件即將卸載`)
   }
   shouldComponentUpdate(newProps, newState) {
      console.log(`返回判斷是否要更新組件true`)
      return true;
   }
   render() {
      console.log(`組件渲染中`)
      return <h1>{ this.props.counter }</h1>
   }
}
 
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0
    }
    console.log(`父組件構造函數觸發`)
    console.log('this.state', this.state.counter)
  }
  
 upCounter() {
    console.log('改變前的counter', this.state.counter)
    this.setState((prevState) =>({
      counter:(function(){
        console.log('改變後的counter', prevState.counter + 1)
        return  prevState.counter + 1
      })()
    }))
  }
  
  render() {
    console.log(`父組件渲染中`)
    console.log('準備傳入的counter', this.state.counter)
    return (
      <div>
        <Nums counter={this.state.counter} />
        <button onClick={() => this.upCounter()}>+1</button>
        <button onClick={() => this.forceUpdate()}> 更新組件</button>
        <button onClick={() => {ReactDOM.unmountComponentAtNode(document.getElementById('root'))}}>
          卸載組件
        </button>
      </div>
    )
  }
}
 
ReactDOM.render(
  <App />,
  document.getElementById('root')
)

打開控制檯，點擊按鈕，即可以看到咱們的生命週期流轉的狀態。

瞭解React組件渲染的流程和原理對咱們更深刻React很是有幫助,若是你須要發起AJAX來獲取數據渲染，能夠放在合適的生命週期裏。