iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

React Native & Redux 初步探討系列 第 8

Day 08 React Component

第八天~

前面我們把 React Native 一些特色講解了一下,

也稍微的改動了畫面,

那在這過程中,多次的提到 component

那我們今天就來說一下 component

什麼是 Component

React , 它就是封裝了 一部分畫面的 結構樣式邏輯

component 擁有以下特性:

封閉性

component 內部的邏輯是封閉的,無法直接的從外部去干涉

可組合性

這其實就像在玩積木一樣,我們可以把不同的 component 組合起來,放在同一個空間裡

const App = () => {
  return (
    <div>
      <Header />
      <Body />
      <Footer />
    </div>
  );
};

邏輯獨立性

當我們在建立 component 我們可以在內部制定相關的邏輯,

比如說,我希望建立一個 TouchMe component

它的邏輯是:按鈕能夠在按下去的時候改變文字

const TouchMe = () => {
  const [text, setText] = useState('按我!');

  const onButtonClick = () => {
    setText('按了!');
  };
  return <Button onClick={onButtonClick}>{text}</Button>;
};

如上,就是一個簡單的邏輯,被包裹在 TouchMe component

可重複性

component 是可以重複被使用的,並且是不會互相影響的,

例如,我們可以用 TouchMe component 去建立大量的 TouchMe Button

const App = () => {
  return (
    <>
      <TouchMe />
      <TouchMe />
      <TouchMe />
      <TouchMe />
    </>
  );
};

如上,每一個 TouchMe Button 都會有自己的邏輯,按下去也不會去影響到其他的

建立 Component

在 React 要如何建立 component 呢?

兩種方式:

es6 class

es6 class 語法 繼承 React.Component

class App extends React.Component {
  render() {
    return <Text>Hello</Text>;
  }
}

必須實作 render function 並且 return react element

function

就如同範例那樣,宣告一個 function ,最後 return react element

const App = () => {
  return <Text>Hello</Text>;
};

什麼是 react element

它是在 react 裡最小的單位,
它並不是 component ,也不是 component 的 instance,也不是 virtual DOM
就只是一個純物件(plain object), 描述關於此節點最終輸出的畫面內容,

那裡面會包含兩個參數, type and props

  • type 來決定是 DOM node or Component
  • props 就是關於此 element 屬性的內容

它的建立有兩種:

  • jsx 就是像 html tag 一樣
  • function 可以使用 React.createElement 來建立

上一篇
Day 07 Style
下一篇
Day 09 function ?? class ??
系列文
React Native & Redux 初步探討33

尚未有邦友留言

立即登入留言