組件：接收任意入?yún)⑶葑鳎⒎祷?React 元素缨该。

1. 函數(shù)組件

函數(shù)組件：接收唯一帶有數(shù)據(jù)的 props 對(duì)象勤晚，并返回 React 元素似嗤。

function FunctionComponent(props) {
    return <div>{ props.message }</div>
}

2. class 組件

import React, { Component } from 'react'

class App extends Component {
    render() {
        return (
            <div></div>
        )
    }
}

3. 組件組合

通過組合實(shí)現(xiàn)組件間代碼重用

import React, { Component } from 'react'

class Test extends Component {
  render() {
    return (
        <div>{ this.props.children }</div>
    )
  }
}

class App extends Component {
  render() {
    return (
        <Test>
        <h1>標(biāo)題</h1>
        <p>段落</p>
      </Test>
    )
  }
}

4. props

JSX 將自定義組件接收的屬性轉(zhuǎn)換為單個(gè)對(duì)象傳遞給組件啸臀，此對(duì)象就是 props 對(duì)象。

import React, { Component } from 'react'

class Test extends Component {
  constructor(props) {
    super(props)
    
    // 構(gòu)造函數(shù)中使用 props：this.props.data
    
  }
  render() {
    
    // render 方法中使用：this.props.data
    
    return (
        <div>{ this.props.data }</div>
    )
  }
}

5. state

import React, { Component } from 'react'

class Test extends Component {
  
  constructor() {
    super()
    
    this.handleClick = this.handleClick.bind(this)
    
    // 給 class 組件添加局部狀態(tài)
    this.state = {
      title: '標(biāo)題'
    }
  }
  
  render() {
    return (
        <div>
        <h1>{ this.state.title }</h1>
        <button onClick={ this.handleClick }>點(diǎn)擊更改標(biāo)題</button>
      </div>
    )
  }
  
  handleClick() {
    // 此處用來修改 state
    
    // 這種方式更改不會(huì)生效
    this.state.title = '新標(biāo)題'  
    
    // 用來實(shí)時(shí)更改狀態(tài)烁落，但不是同步更改乘粒，此后不能保證獲取到更新后的狀態(tài)
    this.setState({  // 參數(shù)對(duì)象會(huì)被淺合并到 state 中
      title: '新標(biāo)題'
    })
    
    // 在最新狀態(tài)后再次更新狀態(tài)。state：目前最新狀態(tài)伤塌；props：目前最新 props 對(duì)象
    this.setState((state, props) => {
      return { title: '新標(biāo)題' }  // 返回值對(duì)象會(huì)和 state 進(jìn)行淺合并
    })
    
    // 在更改狀態(tài)之后灯萍，進(jìn)行一系列操作
    this.setState(() => {}, () => {
      // 此回調(diào)函數(shù)會(huì)在 state 完成合并后調(diào)用
      // 建議使用 componentDidUpdate 生命周期函數(shù)替代
    })
  }
}

6. 生命周期函數(shù)

React 組件生命周期.png

import React, { Component } from 'react'

class Test extends Component {
  
  // 用來初始化 state 和對(duì)方法進(jìn)行 this 綁定。不要調(diào)用 this.setState 方法
  constructor() {
    super()
  }
  
  // class 組件中必須有 render 方法每聪，此方法也是一個(gè)生命周期方法
  // 此方法被調(diào)用時(shí)會(huì)檢查 state 和 props 的變化
  // 此方法應(yīng)該為純函數(shù)
  render() {
    return (
        <div></div>
    )
  }
  
  // 此方法會(huì)在組件掛載后立即調(diào)用旦棉，可以進(jìn)行 Ajax 請(qǐng)求
  // 適合添加訂閱，需要在 componentWillUnmount 函數(shù)中取消訂閱
  componentDidMount() {
    
  }
  
  // 在渲染之前調(diào)用药薯。nextProps：新的 props 對(duì)象他爸；nextState：新的 state 狀態(tài)
  // 返回值為 false 會(huì)阻止重新渲染
  // 可以使用 React.PureComponent 替代 React.Component 來實(shí)現(xiàn)此方法
  shouldComponentUpdate(nextProps, nextState) {
    
  }
  
  // 組件更新后調(diào)用此方法，初次渲染不會(huì)調(diào)用
  // 可以接收渲染前的 props 作為參數(shù)
  // 可以通過比較現(xiàn)有 props 和新 props 對(duì)象決定是否進(jìn)行一些操作
  componentDidUpdate(prevProps) {
    
  }
  
  // 當(dāng)組件從 DOM 中移除時(shí)調(diào)用
  componentWillUnmount() {
    
  }
}

7. 組件 API 和實(shí)例屬性

8. 組件規(guī)則

1. class 組件規(guī)則

• 組件名稱必須采用大駝峰命名方式果善。
• React 組件必須保護(hù) props 對(duì)象不被更改诊笤。
• class 組件必須繼承 React.Component。
• class 組件中必須定義 render 函數(shù)巾陕。
• 建議將 React 組件拆分為更小的組件讨跟。

2. 函數(shù)組件規(guī)則

• 無狀態(tài)纪他，沒有局部 state。
• 無生命周期函數(shù)晾匠。
• 沒有 this 和 ref茶袒。