react學習6-React 元件接收資料props和類元件狀态state

元件接收資料props

• 必須繼承React.Component才可以成為一個類元件
• render方法的作用：産生元件的模闆，屬于react的核心api，名稱固定
• 必須通過this.props擷取父元件傳遞資料，是隻讀的，不可以修改。

class Nihao extends React.Component {
    render () {
        console.log(this.props)
        let uname = this.props.uname
        return (
            <div>
                類元件: {uname}
            </div>
        )
    }
}
           

類元件狀态state

狀态是元件私有的，并且完全被元件控制（隻有類元件有狀态，函數元件沒有狀态）。

類元件的資料來源有兩個：

• 内部的狀态state
  • state可以修改
  • 不要直接修改 State，使用

    this.setState()

    來更新類元件 state。
  • 構造函數是唯一可以給

    this.state

    指派的地方。
• 父元件傳遞的props
  • 是隻讀的，不可以修改

class StateTest extends React.Component {
     constructor (props) {
       // 類元件第一行需要添加super并且傳遞props參數
       super(props)
       this.state = {
         info: 'nihao'
       }
     }

    // 類元件的内部狀态需要使用state名稱
    // 類元件狀态的簡化寫法
    state = {
        info: 'hello'
    }

render () {
    const { info } = this.state
    const { msg } = this.props
    return (
        <div>
            <h1>有狀态的元件：{info}</h1>
            <h1>有狀态的元件：{msg}</h1>
        </div>
    )
  }
}