React 學習筆記 - React 初探 - Part's 1

大分類
Frontend
By Mark.Ku
React get start

前言

近年 React 前端生態越來越豐富，大量的套件，都是採用 react 開發，也被越來越多企業使用，也讓我也想去了解一下 React，過去從 Angular 、到 Vue、再到 React，我也終於湊滿前端三大框架了，嗯，應該可以向神龍許願了。

三大框架，各自的優勢

Angular - 框架有很明確的規範，有完整的解決方案及強大的 CLI，後端人員上手比較容易。
Vue - 開發快速， api 簡單，使用起來無負擔，舊系統整合翻寫較容易。
React - 前端生態更完整，撰寫起來更貼近 JS 語法，對很多企業來說，穩定又安全，版本昇級不用打掉重練。

專案建立

建立 react 專案，並使用 typescript

npx create-react-app jira --template typescript

P.S.npx非常智能的識別模塊，如果模塊存在，就使用。如果不存在，就臨時下載，用完就刪除。

typescript.json 更改 baseUrl，將預設目錄改成 src

加入 src

{
  "compilerOptions": {
   "baseUrl": "src",
...
}

React 會觸動刷新的兩個屬性

React State

state 有變動時 -> 影響到 virutal dom -> 重新渲染 dom，頁面更新。

React Props ( 外部傳入 )

class component

class ContactInfoBlock extends React.Component {
  constructor(props) {
    super(props);
  } 
  ...
}

function component

import { FC } from "react";
const ContactInfoBlock: FC<ContractProps> = () => {
...
}

for 迴圈渲染 - 就是自己寫 map 去渲染.

import React from "react";

export const Test = () => {
  let items = [1, 3, 5, 7];

  return (
    <div>
      {items?.map((item, index) => (
        <span key={index}>{item}</span>
      ))}
    </div>
  );
};

export default Test;

條件判斷 - 也是寫一個 function , return 一個 html 標籤

import React from "react";

export const Test = () => {
  let items = [1, 3, 5, 7];

  function showItem(item: Number) {
    if (item === 3) {
      return;
    } else {
      return <h1 key={item.toString()}>{item}</h1>;
    }
  }

  return <div>{items?.map((item, index) => showItem(item))}</div>;
};

export default Test;

組件的生命周期，變得很簡單

掛載(Mounting)：已插入真實 DOM
更新(Updating)：正在被重新渲染
卸載(Unmounting)：已移出真實 DOM

心得

開始寫 React時，就發現缺少了很多語法糖，寫起來突然很不習慣，撰寫真的比較貼近 js ，渲染的引擎，幾乎沒有框架的語法，就是單純的 js ，下面就是我覺得差異最多的是

1.缺少很多框架語法糖
2.會影響元件再渲染的就只有 prop 和 state (變得很單純)
3.生命週期更單純 - Mounting、Updating、Unmounting
4.條件判斷 - 也是寫一個 function , return 一個 html 標籤
5.for 迴圈渲染 - 就是自己寫 map 去渲染
6.撰寫自由度很高 ( 不見得是好事 )
但三大框架的共通點，都更傾向完整支援 typescript

參考資料

參考資料