state:

state 的主要作用是用于組件保存、控制、修改自己的可變狀態(tài)。state 在組件內(nèi)部初始化，可以被組件自身修改，而外部不能訪問也不能修改。你可以認(rèn)為 state 是一個(gè)局部的、只能被組件自身控制的數(shù)據(jù)源。state 中狀態(tài)可以通過 this.setState 方法進(jìn)行更新，setState 會(huì)導(dǎo)致組件的重新渲染。

props:

props 的主要作用是讓使用該組件的父組件可以傳入?yún)?shù)來配置該組件。它是外部傳進(jìn)來的配置參數(shù)，組件內(nèi)部無法控制也無法修改。除非外部組件主動(dòng)傳入新的 props，否則組件的 props 永遠(yuǎn)保持不變。

區(qū)別：state 是讓組件控制自己的狀態(tài)，props 是讓外部對(duì)組件自己進(jìn)行配置。

正常的組件：

class HelloWorld extends Component {
  constructor() {
    super()
  }

  sayHi () {
    alert('Hello World')
  }

  render () {
    return (
      <div onClick={this.sayHi.bind(this)}>Hello World</div>
    )
  }
}

用函數(shù)式組件的編寫方式就是：

const HelloWorld = (props) => {
  const sayHi = (event) => alert('Hello World')
  return (
    <div onClick={sayHi}>Hello World</div>
  )
}

注：以前一個(gè)組件是通過繼承 Component 來構(gòu)建，一個(gè)子類就是一個(gè)組件。而用函數(shù)式的組件編寫方式是一個(gè)函數(shù)就是一個(gè)組件，你可以和以前一樣通過 <HellWorld /> 使用該組件。不同的是，函數(shù)式組件只能接受 props 而無法像跟類組件一樣可以在 constructor 里面初始化 state。你可以理解函數(shù)式組件就是一種只能接受 props 和提供 render 方法的類組件。