組件的渲染過程

調(diào)取組件的時(shí)候，babel解析，傳遞給createElement的第一個(gè)參數(shù)type不再是字符串標(biāo)簽名，而是函數(shù)或者類，生成的對(duì)象中，type也是一個(gè)函數(shù)，當(dāng)render渲染的時(shí)候會(huì)根據(jù)type的類型不同而做不同的事情（如果是字符串就創(chuàng)建元素，如果是函數(shù)，就會(huì)把函數(shù)執(zhí)行，把返回的jsx對(duì)象創(chuàng)建成為新的元素進(jìn)行渲染），函數(shù)執(zhí)行的時(shí)候會(huì)把解析出來的對(duì)象中的props作為屬性傳遞給組件

函數(shù)式創(chuàng)建組件

1. 函數(shù)返回一個(gè)jsx
2. props儲(chǔ)存的值是一個(gè)對(duì)象，包含了調(diào)用組件時(shí)候傳遞的屬性值（不傳是一個(gè)空對(duì)象）

ReactDOM.render(<div>
  <ComponentA props1={12} className="class1">
    <span>lalla</span>
  </ComponentA >
</div>,root)

function ComponentA(props){
  let {props1,className,children}=props
  return <div className={className}>
  <span>{props1}<span>
  <p>{props2}<p>
  {children}//就是<span>lalla</span>
</div>
}

只能通過操作組件的DOM修改組件，使用ref屬性獲取元素
沒有自己的狀態(tài)state

類式創(chuàng)建組件

基于繼承component類來創(chuàng)建組件

class  ComponentB extends React.Component{
  constructor(props){
    super(props)
    //super必須寫 否則報(bào)錯(cuò)，相當(dāng)于React.Component.call(this),就是call繼承，繼承父級(jí)私有屬性
    //在繼承私有的時(shí)候，把傳遞的屬性掛載到了子類的實(shí)例上，在constructor中就可以使用this.props了
     /** 
     *{
      *  this.props//屬性集合
      *  this.refs//refs集合
      *  this.context//上下文
     * }
      */
    this.state={//相當(dāng)于vue組件中的data
      name:123
    }
  }
  render(){
    return <div>{this.state.name}{this.props.aa}</div>
  }
}

區(qū)別

• 函數(shù)創(chuàng)建式：
  1. 操作簡單
  2. 能實(shí)現(xiàn)的功能簡單，只能簡單的調(diào)取和返回jsx
  3. 沒有state狀態(tài)
• 類創(chuàng)建式
  1. 操作復(fù)雜，實(shí)現(xiàn)復(fù)雜的業(yè)務(wù)邏輯
  2. 能夠使用聲明周期函數(shù)
  3. 函數(shù)式可以理解為靜態(tài)組件（很難修改的），類的方式可以基于組件內(nèi)部的狀態(tài)來動(dòng)態(tài)渲染組件的內(nèi)容