前言
近年 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
留言