函式的方式建立元件與類的方式建立元件的異同

通過函式的方式建立元件:

// 定義顯示時間的元件
function Clock(props){
  // props.time必須手動轉換為字串，否則會被作為物件進行解析,會報錯
  return (
    <div>
      <div>定時重新整理</div>
      <div>{props.time.toLocalTimeString()}</div>
    </div>
  )
}
function tick(){
  const element = <
 
div><Clock time={new Date()}/></div>
  ReactDOM.render(element,document.getElementById('root'));
}
setInterval(tick,1000)

說明:

• 函式名稱首字母必須大寫,為了區分DOM元素
• 通過函式的引數props可以傳遞元件的屬性資訊
• Props資料是隻讀的
• 單向資料流

缺點: 需要外部程式碼,比如: "setInterval(tick,1000)來驅動元件的內部屬性變化

就因為這個缺點才引出了下面通過類的方式建立元件,接下來我們詳細瞭解一下

通過類的方式建立元件:

class Clock extends React.Component {
  constructor(props){
    super(props)// 這一行需要顯示的呼叫父類建構函式
    // state名字是固定的
    this.state = {
      date: new Date(),
      abc: 'nihao'
    }
  }
  render(){
    return (
      <div>
      	<div>{this.state.abc}</div>
        <
 
div>重新整理時間</div>
        <div>{this.state.date.toLocalTimeString()}</div>
      </div>
    )
  }
  componentDidMount() {
    this.tick()
  }
  // 定時更改時間
  tick(){
    setInterval(()=>{
      // 這樣的資料處理方式是不對的，因為狀態資料的修改，必須通過setState方式
      // this.state.date = new Date();
      this.setState({
        date: new Date()
      })
    },1000)
  }
}
const element = <div><Clock/></div>
ReactDOM.render(element,document.getElementById('root'))

說明:

• 函式名稱首字母必須大寫,為了區分DOM元素
• 類的方式與函式方式建立元件的顯著區別: 類可以包含狀態state
• 元件的狀態初始化state必須在建構函式constructor中進行,如果需要修改狀態,必須通過setState進行
• 元件中的資料只有兩種 props和state, 這兩種資料都是從父元件想子元件傳遞,反之不可以(自上而下的單向資料流)
• Props是隻讀的,state既可讀也可以修改

優點: 元件內部可以直接完成狀態資料的修改

總結:

綜上所述,React專案當然要使用類的方式建立元件了