iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Modern Web

白話JavaScript系列 第 19

Day19-Component

學習React過程中很重要的概念為組件化。

何謂組件化???

  • 重複使用
  • 切割成更細小的碎片,達到耦合性降低
  • 組合各個組件形成一個頁面

下面我們來把React的官方網站依照組件的概念切割

https://ithelp.ithome.com.tw/upload/images/20210919/20130419SV3iQeQIQo.png

  1. 把導航欄跟下面內文先分割成兩個組件
  2. 導航欄再細分成Logo、Links、Search、和右邊的版本Link

我們思考一下,如果有四個頁面,只有兩個需要用到導航欄,是不是就只要在其中兩個頁面引入導航欄的組件呢!!!


Class component

在React hooks出現以前,學習類組件必須先把this與物件導向基本先學會,而類組件要使用繼承又使人覺得笨重、煩躁!!!

import React from 'react'

class App extends React.Component {
  render() {
    const name = 'Ian'
    
    return (
      <div className="app">
        <h1>hello</h1>
        <p>{name}</p>
      </div>
    )
  }
}
export default App;

Function component

Hooks出現之後,解救蒼生,也可以讓我們更好的使用組件中的狀態。

接下來我們也會使用函式組件,熟悉一個之後,再學類組件就很容易學會。

import React from 'react'

function App() {
  return(
    <h1>Hello</h1>
  )
}
export default App;

Hooks

  • useState
  • useEffect
  • useContext
  • useReducer
  • useRef
  • useLayoutEffect
  • useCallBack
  • useMemo

JSX

我們上面使用函式組件和類組件中很奇異的寫法就是JSX。

JSX讓我們能夠把邏輯和UI結合在一起,讓資料自己決定畫面。

但React並不要求我們一定要使用JSX,看你個人選擇
https://ithelp.ithome.com.tw/upload/images/20210919/20130419KKjuRZifbN.png

React injection

透過{ } 在React中取用變數

function App() {
  const name = 'Ian'
  return (
    <div className="App">
      <h1>{name}</h1>
    </div>
  );
}
export default App;

黨然也可以在{ }中使用JavaScript

function App() {
  const name = ['Ian','Dennis']
  return (
    <div className="App">
      {name.filter((item) => item === 'Dennis')}
    </div>
  );
}
export default App;

表達式

function App() {
  const name = 'Ian'
  const element = <h1>{name}</h1>
  return (
    <div className="App">
      {element}
    </div>
  );
}

export default App;

當然你也可以塞入更多的element

function App() {
  const element = (
    <div>
      <ul>
        <li>Ian</li>
        <li>Dennis</li>
      </ul>
    </div>
  )
  return (
    <div className="App">
      {element}
    </div>
  );
}
export default App;

明天我們會進入State和Props的章節,敬請期待!!!

/images/emoticon/emoticon12.gif


上一篇
Day18-React起步
下一篇
Day20-Props
系列文
白話JavaScript28
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言