具體使用場景: 一個頁面右上角掛載一個三級聯(lián)動選項卡(三級數(shù)據(jù)從接口獲取),main作為父組件主頁面,select作為子組件三級選項卡頁面

main頁面負責ajax請求,拿總數(shù)據(jù),為子組件準備好所有即插即用數(shù)據(jù)和方法,在使用select標簽的時候,全部傳遞給子

select頁面,在this.props中負責解構所有數(shù)據(jù)和方法,直接使用,無需關心邏輯實現(xiàn)

main叫邏輯組件(聰明組件), select叫UI組件(笨蛋組件)

render中return中的代碼都是JSX,和html代碼相似.

在js中直接寫html語法,也可以使用自定義標簽,比如可以寫自己組件,App組件可以寫成 ,首字母必須大寫開頭,JSX標簽中,大寫開頭,基本都是組件,小寫開頭基本是html標簽.

render中用JSX語法寫html代碼,必須在最外層包括一個div,不然編譯會報錯,在16版本中,如果使用Fragment來表示占位符,在html中顯示的時候,可去掉組件最外層的那個div,demo如下

  // 你的jsx代碼

使用js表達式/js變量需要使用{}把表達式包裹起來,demo如下

// ES6 ``,${}加三目運算符可處理復雜的css名字

// for循環(huán)遍歷請使用map方法,sortTableRows是state中一個變量
 {sortTableRows && sortTableRows.map(item => (
      

        {item.title}
        {item.author}
        {item.comments}
        {item.points}
        
           onMiss(item.id)}>miss
        
      
))}

html標簽中進行事件綁定,事件名稱首字母必須大寫,比如 onChange中C就是大寫的

在html樣式中,使用className來代替class

使用dangerouslySetInnerHTML={{__html: item}},可在提交數(shù)據(jù)的時候,對數(shù)據(jù)中html標簽進行轉義處理

輸入內(nèi)容 for需要換成htmlfor

jsx合成事件綁定,js高階函數(shù),綁定的是函數(shù),不能讓函數(shù)馬上執(zhí)行
不帶參數(shù)綁定,后面不能加(), 如果加,那函數(shù)會馬上執(zhí)行,而不是事件發(fā)生時候回調(diào)執(zhí)行
帶參數(shù)綁定,需要在一個匿名函數(shù)中寫綁定函數(shù)

// 合成事件綁定,不帶參數(shù)
{item}
// 合成事件綁定,帶參數(shù)
 this.props.delItem(index)}>{item}

1, state中設置searchTerm變量,用來填充input中value值
2, 綁定input中onChange事件,獲取event對象中value值,將該值set到searchTerm變量中

state: 組件自己內(nèi)部維護數(shù)據(jù),每次更新只需要關系需要更改的數(shù)據(jù)
1, set數(shù)據(jù)不依賴之前的數(shù)據(jù),直接調(diào)用setState

this.setState({ 
               foo: bar 
            })

2, set數(shù)據(jù)依賴之前數(shù)據(jù),一定要使用帶參數(shù)調(diào)用setState

this.setState((prevState, props) => (
    // 你的代碼  
))

// bad
// setState是異步,代碼中多個set,有可能fooCount和barCount已經(jīng)被改變
const { fooCount } = this.state
const { barCount } = this.props
this.setState({ count: fooCount + barCount })
// good
this.setState((prevState, props) => (
    count: prevState.fooCount + props.barCount
))

props: 父->子,所有傳遞過來的數(shù)據(jù)都附加在props中,子在props中可以拿到所有父傳遞過來的數(shù)據(jù)
render: 只要state進行set操作,render一定會執(zhí)行,包括父state進行set之后,父和子的render都會被執(zhí)行

子組件是UI組件,接完父組件數(shù)據(jù)直接使用,可直接在子組件props中直接使用父組件ajax請求獲取到的數(shù)據(jù)

子組件需要將父組件ajax數(shù)據(jù)賦值到自己的state中,只能在componentWillReceiveProps生命周期中處理,不能在constructor中處理,原因: 父組件ajax請求最起碼第二次render父組件,而子組件中constructor只會執(zhí)行一次

上述方式處理方式比較麻煩,推薦使用方式3
3, 父組件負責提供數(shù)據(jù)和處理處理的函數(shù),子組件只負責獲取數(shù)據(jù),渲染頁面,子組件事件交互,也是通過props來調(diào)用父組件中的函數(shù)(常用)

以下是使用場景和注意點
組件掛載階段(只會執(zhí)行一次,render除外)
constructor(): 設置state,獲取父組件props,并初始化自己的state,并綁定函數(shù)中this指向
componentWillMount(): 不能獲取頁面dom元素,目前還沒用過
render():渲染頁面,不做運算,到這里為止,所有數(shù)據(jù)都應該是經(jīng)過處理可直接使用的數(shù)據(jù)
componentDidMount(): 可獲取dom元素,ajax請求放這里,調(diào)用setState,設置dom元素監(jiān)聽,繪制canvas
組件更新階段(state或props發(fā)生變化)
componentWillReceiveProps(nextProps): nextProps為更新新屬性,可進行新舊屬性對比,也可以根據(jù)新數(shù)據(jù)來計算和設置自己的state
shouldComponentUpdate(nextProps, nextState): 返回布爾值,可做渲染優(yōu)化,根據(jù)場景決定是否渲染該組件,不要調(diào)用setState
componentDidUpdate(prevProps, prevState): 操作 DOM 或者執(zhí)行更多異步請求的機會
componentWillUnmount: 取消網(wǎng)絡請求,刪除監(jiān)聽,一些收尾工作,不要調(diào)用setState

自定義函數(shù)的時候,寫自定義函數(shù),需要在constructor中進行函數(shù)this指向的綁定

在constructor中進行this指向綁定,然后寫正常函數(shù)

// 方式1
  getTodoItem = () => {
    // 你的邏輯
  }
// 方式2
 constructor(props) {
    super(props)
    this.inputOnChange = this.inputOnChange.bind(this)
  }
 inputOnChange() {
    // 你的邏輯
  }

ES6類組件: 有this,props,有state,有生命周期,根據(jù)設計圖,一般當作父組件使用,從接口拿數(shù)據(jù),計算成品數(shù)據(jù),編寫事件函數(shù)來處理數(shù)據(jù)
無狀態(tài)組件(純函數(shù)): 接收輸入(props),輸出jsx組件實例,沒有this,沒有生命周期,沒有state,可根據(jù)props中的數(shù)據(jù)來計算符合自己要求的數(shù)據(jù)(組件中直接調(diào)用方法),
props中可以傳遞數(shù)據(jù),也可以傳遞函數(shù),一般當做子組件使用,demo如下

import React from "react"

/*查詢表單組件
* Search在使用的時候,標簽中間就是children
* 查詢  children的值就是查詢
*/
const Search = ({value, onChange, onSubmit, children}) => {
  return (
    

      

        
        {children}
      
    
  )
}

export default Search

import React from "react"
import {Slider} from "antd"
import moment from "moment"
import "./style.less"

/*
* 時間軸無狀態(tài)組件
* timeData: 時間數(shù)組列表
* timeChange: 時間軸change事件的回調(diào)
* worktime: 當前選中時間
* */
const TimeSlider = ({timeData, timeChange, worktime}) => {

  /*
  * 獲取時間軸當前選中值
  * */
  const getDefaultValue = () => {
    const { id } = times.find(item => {
      return item.dateTime === worktime
    })
    return id
  }

  /*
  * 獲取時間軸的總長度
  * */
  const getMax = () => {
    return timeData.length
  }

  /*
  * 獲取時間軸顯示的time數(shù)據(jù)
  * 格式:
  * {
  *  0: "2019-11-11"
  *  24: "2019-11-12"
  *  23: "2019-11-13"
  * }
  * */
  let times = []
  const getMarks = () => {
    let dates = []
    console.log("timeData len", timeData.length)
    timeData.map((item, index) => {
      const time = {id: index, dateTime: item}
      times.push(time)
      dates.push(moment(item).format("YYYY-MM-DD"))
    })
    const newDates = [...new Set(dates)]

    console.log("newDates", newDates)
    let marks = {}
    let datesAmount = []
    newDates.map(item => {
      const amount = getDateAmount(item, timeData)
      const temp = {date: item, amount: amount}
      datesAmount.push(temp)
    })

    for (let i = 0,length = datesAmount.length; i < length; i++) {
      const date =  {
        style: {
          color: "#fff",
          marginLeft: 0
        },
        label: moment(datesAmount[i].date).format("MM/DD"),
      }
      if (i === 0) {
        //const mark =  JSON.parse(`{"0":"${date}"}`)
        const mark = {0: date}
        Object.assign(marks, mark)
      } else {
        const index = i - 1
        const lastAmount = getLastDateAmount(index, datesAmount)
       // const mark =  JSON.parse(`{"${lastAmount}":"${date}"}`)
        const mark =  { [lastAmount]: date }
        Object.assign(marks, mark)
      }
    }
    return marks
  }

  /*
  * 根據(jù) 2019-11-11來獲取 數(shù)據(jù) ["2019-11-11 11:11:11"] 對應的小時數(shù)量
  * */
  const getDateAmount = (date, timeData) => {
    let amount = 0
    for (let i = 0,length = timeData.length; i < length; i++ ) {
      const item = timeData[i]
      if (item.includes(date)) {
        amount = amount + 1
      }
    }
    return amount
  }

  /*
  * 獲取當前index往前推一個的所有小時數(shù)量
  * */
  const getLastDateAmount = (index, datesAmount) => {
    let sum = 0
    for (let i = 0; i <= index; i++) {
      sum = sum + datesAmount[i].amount
    }
    return sum
  }


  const formatter = (value) => {
    const time = times.find(item => {
      return item.id === value
    })
    return moment(time.dateTime).format("HH:mm")
  }

  const onTimeChange = (value) => {
    const time = times.find(item => {
      return item.id === value
    })
    timeChange(time.dateTime)
  }

  return (
    

      
    
  )
}

export default TimeSlider

React Developer Tools // F12,查看每個react組件中state和props的值

Redux DevTools // F12,查看redux中store的值