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

main頁(yè)面負(fù)責(zé)ajax請(qǐng)求,拿總數(shù)據(jù),為子組件準(zhǔn)備好所有即插即用數(shù)據(jù)和方法,在使用select標(biāo)簽的時(shí)候,全部傳遞給子

select頁(yè)面,在this.props中負(fù)責(zé)解構(gòu)所有數(shù)據(jù)和方法,直接使用,無(wú)需關(guān)心邏輯實(shí)現(xiàn)

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

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

在js中直接寫(xiě)html語(yǔ)法,也可以使用自定義標(biāo)簽,比如可以寫(xiě)自己組件,App組件可以寫(xiě)成 ,首字母必須大寫(xiě)開(kāi)頭,JSX標(biāo)簽中,大寫(xiě)開(kāi)頭,基本都是組件,小寫(xiě)開(kāi)頭基本是html標(biāo)簽.

render中用JSX語(yǔ)法寫(xiě)html代碼,必須在最外層包括一個(gè)div,不然編譯會(huì)報(bào)錯(cuò),在16版本中,如果使用Fragment來(lái)表示占位符,在html中顯示的時(shí)候,可去掉組件最外層的那個(gè)div,demo如下

  // 你的jsx代碼

使用js表達(dá)式/js變量需要使用{}把表達(dá)式包裹起來(lái),demo如下

// ES6 ``,${}加三目運(yùn)算符可處理復(fù)雜的css名字

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

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

html標(biāo)簽中進(jìn)行事件綁定,事件名稱(chēng)首字母必須大寫(xiě),比如 onChange中C就是大寫(xiě)的

在html樣式中,使用className來(lái)代替class

使用dangerouslySetInnerHTML={{__html: item}},可在提交數(shù)據(jù)的時(shí)候,對(duì)數(shù)據(jù)中html標(biāo)簽進(jìn)行轉(zhuǎn)義處理

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

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

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

1, state中設(shè)置searchTerm變量,用來(lái)填充input中value值
2, 綁定input中onChange事件,獲取event對(duì)象中value值,將該值set到searchTerm變量中

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

this.setState({ 
               foo: bar 
            })

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

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

// bad
// setState是異步,代碼中多個(gè)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: 父->子,所有傳遞過(guò)來(lái)的數(shù)據(jù)都附加在props中,子在props中可以拿到所有父?jìng)鬟f過(guò)來(lái)的數(shù)據(jù)
render: 只要state進(jìn)行set操作,render一定會(huì)執(zhí)行,包括父state進(jìn)行set之后,父和子的render都會(huì)被執(zhí)行

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

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

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

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

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

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

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

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

import React from "react"

/*查詢(xún)表單組件
* Search在使用的時(shí)候,標(biāo)簽中間就是children
* 查詢(xún)  children的值就是查詢(xún)
*/
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"

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

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

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

  /*
  * 獲取時(shí)間軸顯示的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來(lái)獲取 數(shù)據(jù) ["2019-11-11 11:11:11"] 對(duì)應(yīng)的小時(shí)數(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
  }

  /*
  * 獲取當(dāng)前index往前推一個(gè)的所有小時(shí)數(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,查看每個(gè)react組件中state和props的值

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