react中類組件、函數組件、state、單層遍歷、多層遍歷、先遍歷後渲染、if-else、三目運算符

時間 2020-05-23

標籤 react 組件函數 state 單層遍歷多層渲染運算符欄目 React 简体版

原文原文鏈接

一、回顧

module.exports = { entry: {}, output: {}, plugins: [], module: {}, resolve: {}, devServe: {} }javascript

二、react

2.1 複製相關文件

index.html / .babelrc / package.json / webpack.config.jshtml

刪除vue相關文件vue

2.2 建立day02/src,修改webpack的入口文件以及@符號的目錄

entry: { // object 類型寫法 ---- 推薦寫法
  app: './day02/src/index.js' // 會將本項目打包成爲一個js文件  app.js
},
resolve: {
  extensions: ['.js', '.jsx'], // 表明缺省的後綴名，引入時能夠省略的後綴名 --- import axios from './request'; 而不用 import axios from './request.js';
  alias: { // 別名
    '@': path.join(__dirname, './day02', 'src') // src 的別名爲 @
  }
}

三、react組件

js的語法加react的{}java

src/index.js 入口文件react

import React from 'react'; // 必不可少
import ReactDOM from 'react-dom'; // 將組件渲染至DOM節點

import App from './App'; // 導入組件 ---- 後綴名能夠省略，配置過缺省的後綴名

// 將App 組件渲染至真實的DOM節點
// 組件使用就是標籤形式，能夠是雙閉合標籤，也能夠是單閉合標籤
// 組件的首字母必須大寫
// 小寫爲HTML標籤
ReactDOM.render(
  <App />,
  document.getElementById('app')
)

3.1 類組件 ---- es6中的class

import React from 'react'; // 組件必須導入

// 使用es6的class實現react的組件，組件的首字母大寫
// 要實現組件，必須繼承React的Component
// 必須調用super()方法 ---- 類的構造方法中調用 ----- 若是組件中使用this
// 子類必須在constructor方法中調用super方法，不然新建實例時會報錯
// 這是由於子類本身的this對象，必須先經過父類的構造函數完成塑造，獲得與父類一樣的實例屬性和方法，而後再對其進行加工，加上子類本身的實例屬性和方法。若是不調用super方法，子類就得不到this對象。
class Com extends React.Component {
  constructor (props) { // 父類能夠調用的全部的屬性和方法都在props值中
    super(props)
  }

  // render 函數 繼承自父類，是react生命週期的一部分
  // 返回一段HTML代碼，表示當前組件的結構(至關於vue中的template)，HTML代碼通常使用()包裹
  // 返回的HTML結構的代碼的語法 ---- jsx語法 --- javascript xml - 類xml語言
  // 只有一個頂級標籤
  render () {
    return (
      <div>
        hello world
      </div>
    )
  }
}

// 暴露組件
export default Com;

3.2 函數式組件 ---- es6中的箭頭函數

import React from 'react'; // 組件必須導入

// 箭頭函數返回一段HTML代碼
// const Com = () => {
//  業務邏輯  
//   return (
//     <div>
//       hello react函數式組件
//     </div>
//   )
// }

// 箭頭函數的自帶返回值，返回()表示直接返回HTML代碼
const Com = () => (
  <div>
    hello react函數式組件-簡寫
  </div>
)

// 暴露組件
export default Com;

3.3 何時使用類組件，何時使用函數式組件

全部的組件均可以使用類組件，含有狀態（組件初始化數據）的組件必須使用類組件（暫時）webpack

函數式組件又被稱之爲UI組件以及無狀態組件ios

狀態 ----- 初始化數據 ---- 相似vue中的dataes6

4 react的狀態 ---- state

4.1 設定初始化的數據

import React from 'react'; // 組件必須導入

class Com extends React.Component {
  // 狀態放置的位置在構造方法內
  // 子類本身的this對象，必須先經過父類的構造函數完成塑造，獲得與父類一樣的實例屬性和方法，而後再對其進行加工，加上子類本身的實例屬性和方法
  constructor (props) { // props父類一樣的實例屬性和方法
    super(props);
    this.state = { // react初始化數據 ---- 相似於vue中的data
      msg: 'hello react + state'
    }
  }

  render () {
    return (
      <div>
        { this.state.msg }
      </div>
    )
  }
}
// 暴露組件
export default Com;

4.2 jsx註釋 ---- render -> return ()

return (
  <div>
    {
      // 111 -- 單行註釋
    }
    {
      /*
      222222   --- 多行註釋     
      */
    }
  </div>
)

4.3 數據的遍歷 ---- 邊遍歷邊渲染

js的遍歷，加{}變react的遍歷，遍歷選項返回jsx語法的結構web

單層遍歷

import React, { Component } from 'react'; // 解構賦值

class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      msg: 'hello world',
      list: ['aa', 'bb', 'cc', 'dd'] // ++++++++++++++
    }
  }

  render () {
    return (
      <div>
        { this.state.msg }
        {
          // +++++++++++++++++++++++++++++++++++++++++++++++++
          this.state.list.map((item, index) => {
            return (
              <p key={ index }>
                { item }
              </p>
            )
          })
        }
      </div>
    )
  }
}

export default Com;

多層遍歷 ------ 返回的html代碼必須符合jsx語法

import React, { Component } from 'react'; // 解構賦值

class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      msg: 'hello world',
      // ++++++++++++++++++++++++
      list: [
        {
          brand: 'iphone',
          arr: ['iphone6', 'iphone7', 'iphone8', 'iphonex', 'iphone11']
        },
        {
          brand: 'huawei',
          arr: ['p20', 'p30', 'meta20', 'meta30']
        }
      ]
    }
  }

  render () {
    return (
      <div>
        { this.state.msg }
        {
          // +++++++++++++++++++
          this.state.list.map((item, index) => {
            return (
              <div key={ index }>
                <h1>{ item.brand }</h1>
                {
                  // ***********************
                  item.arr.map((itm, idx) => {
                    return (
                      <p key = { idx }>{ itm }</p>
                    )
                  })
                }
              </div>
            )
          })
        }
      </div>
    )
  }
}

export default Com;

拓展 - 16版本之前

var Com = React.createClass({
  initialState () {
    return {
      msg: ''
    }
  }
  render () {
    return ()
  }
})

4.4 數據的遍歷 ---- 先遍歷後渲染

import React, { Component } from 'react'; // 解構賦值

class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      msg: 'hello world',
      list: ['aa', 'bb', 'cc', 'dd'],
      list1: [<p key="1">aaa</p>, <p key="2">bbb</p>]
    }
  }

  render () {
    // ++++++++++++++++++
    let arr = [];
    this.state.list.map((item, index) => {
      arr.push(
        <p key={ index }> { item } </p>
      )
    })
    // +++++++++++++++++++
    return (
      <div>
        { this.state.msg }
        {
          this.state.list
        }
        { this.state.list1 }
        {
          // ++++++++++++++++++
          arr
        }
      </div>
    )
  }
}

export default Com;

4.5 條件判斷

最普通的條件判斷 ---- 徹底是js的語法

import React, { Component } from 'react'; // 解構賦值

class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      flag: true
    }
  }

  render () {
    if (this.state.flag) {
      return (
        <div>
          若是條件爲真我就顯示
        </div>
      )
    } else {
      return (
        <div>
          若是條件爲假我就顯示
        </div>
      )
    }
  }
}

export default Com;

三目運算符 -----

import React, { Component } from 'react'; // 解構賦值

class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      flag: false
    }
  }

  render () {
    return (
      <div>
        {
          // +++++++++++++++++++++++++++++++++
          this.state.flag ? <p>真</p> : <p>假</p>
        }
      </div>
    )
  }
}

export default Com;