iT邦幫忙

2019 iT 邦幫忙鐵人賽

0

記得這兩位朋友的分別代表的作用

  • state是讓元件控制自己的狀態
  • props是讓外部對元件自己進行配置

*props

props是React父元件與子元件間溝通的橋樑,是靜態(唯獨)的。
props與state主要的差別在於props是不可改變的

父元件App傳入子元件name屬性,value為joyce

import React, { Component } from 'react';
import Table from './Table'

class App extends Component {
  render() {
    return (
      <Table name="joyce"/>
    );
  }
}

export default App;

子元件Table透過this.props取得由父元件傳入的name
就會印出joyce。

import React, { Component } from 'react';

class Table extends Component {
  render() {
    return (
      <div className="Table">{this.props.name}</div>
    );
  }
}

export default Table;

*state

state 主要作用是用元件保存、控制以及修改自己可變的狀態。state在元件內部初始化(給預設值),state狀態可以透過this.setState方法進行更新,setState會使元件重新渲染。
以下範例透過點擊li就可切換h3所顯示的狀態

class App extends Component {
  constructor(props) { //若要使用這個方法
    super(props) //必須先執行super(props),若有用到props的話會找不到this.props,沒用到props也可以只寫super()
    this.state = {
        currentPage: 'one', //給預設值
    }
  }

  clickHandler = (e) => {
    this.setState({ currentPage: e})
  }

  render () {
    return (
      <div>
          <h3>{this.state.currentPage}</h3>
          <ul>
              <li onClick={()=>this.clickHandler('one')}>one</li>
              <li onClick={()=>this.clickHandler('two')}>two</li>
          </ul>
      </div>
    )
  }
}
export default App;
  • 沒有state的元件叫做無狀態元件(stateless component)
  • 設定了state的原元件叫做有狀態元件(stateful component)
    因為狀態會帶來管理上的複雜性,所以React.js非常鼓勵多寫無狀態元件
    以下為範例(一) 沒有使用state的元件,應改為無狀態元件,詳見範例(二)
class HelloWorld extends Component {
  constructor() {
    super()
  }

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

  render () {
    return (
      <div onClick={this.sayHi}>Hello World</div>
    )
  }
}
export default HelloWorld;

範例(二)改為無狀態元件(函數式的寫法)

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

通常一個元件是透過繼承Component來建構,一個子類就是一個元件。
而用函數的元件寫法:一個函數就是一個元件,可以和之前練習一樣,透過來使用該元件,兩者不同的是函數式元件只能接受props,無法像類元件一樣可以在constructor裡面初始化state。函數式元件(無狀態元件)就是一種只能接受props和提供render方法的類元件。


上一篇
認識React
下一篇
React 生命週期(Life Cycle)
系列文
前端工程師的30份套餐30

尚未有邦友留言

立即登入留言