iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
自我挑戰組

React 學習之路系列 第 4

Components 與 Props(Day4)

當我們會寫基本的 Hello World 之後,就可以開始考慮擴展跟重組我們要撰寫的程式碼了。我們會把一段與其他程式碼基本上相異的,而內部彼此有關聯的程式碼,寫成所謂的元件(component),而撰寫的方式有兩種

撰寫元件的方法:

  1. JS function
function Smile(){
    return <div>?</div>;
}
  1. ES6 Class
Class Smile extends React.Component {
  render() {
    Return <div>?</div>;
  }
}

同樣的元件帶上不同的資料,使用 Props

知道基本的 Component 的寫法之後,就可以練習
1.去拆解或組合並複用元件
2.重複使用元件並帶入不同資料,使用 Props,像函數傳遞參數

function Greet(props) {
  return <h1>{props.message}, {props.face}</h1>;
}

const element = (
  <div>
    <h1>=== Emoji List and Message ===</h1>
    <Greet message="LOL" face="?" />
    <Greet message="..." face="?" />
    <Greet message="No!" face="?" />
  </div>);
ReactDOM.render(element, document.getElementById('root'));

以下組合例子(裡面使用了map語法,後面會更詳細的說明)

function Greet(props) {
  return <h1>{props.message}, {props.face}</h1>;
}

function Emotions() {
  const emojiList = [{
    message: 'LOL',
    face: "?"
  }, {
    message: 'speechless',
    face: "?"
  }, {
    message: 'Shocked',
    face: "?"
  }]
  return (
    <div>
    <h1>=== Emoji List and Message ===</h1>
      {
        emojiList.map(item=>{
          return <Greet key={item.face} message={item.message} face={item.face} />
        })
      }
  </div>
  )
}

ReactDOM.render(<Emotions />, document.getElementById('root'));

Codepen

注)Props 是唯獨的,像是 Pure function?

什麼是 Pure function?
1.給同樣的輸入,會得到一樣的輸出
2.沒有副作用

如果 props 可以存取,就會產生副作用。在輸出時,「同時」更新了輸入。
更多說明可參考 Eric Elliott 的 Master the JavaScript Interview: What is a Pure Function?

以上今天。

參考資料:
https://zh-hant.reactjs.org/docs/components-and-props.html
Master the JavaScript Interview: What is a Pure Function?


上一篇
Render Element(Day3)
下一篇
State 和生命週期(上)(Day5)
系列文
React 學習之路30

尚未有邦友留言

立即登入留言