需要用java語(yǔ)言，需要用什么東西努隙，都是從頭現(xiàn)學(xué)的
認(rèn)準(zhǔn)干這個(gè)事兒，就缺什么補(bǔ)什么
基金系統(tǒng)業(yè)務(wù)研發(fā)
熟悉react技術(shù)棧
css孔轴。html剃法。js
盒子模型碎捺。布局
熟悉一個(gè)框架路鹰，vue。react收厨。
多瀏覽器調(diào)試
團(tuán)隊(duì)的重要性
誰(shuí)能大致說(shuō)下vue和react的最大區(qū)別之處晋柱？
可能是先接觸的vue吧，后來(lái)工作需要學(xué)習(xí)的react诵叁。用react工作一段時(shí)間了還是覺(jué)得react更簡(jiǎn)單些雁竞，尤其是做一些表單的新增編輯回顯的時(shí)候，覺(jué)得vue的數(shù)據(jù)雙向綁定方便些拧额。一開(kāi)始用react都寫(xiě)不明白”撸現(xiàn)在用了一年多可能是習(xí)慣了，尤其是hook 出來(lái)以后侥锦，覺(jué)得react也挺好用的进栽，
感覺(jué)React 是手動(dòng)擋，Vue 是自動(dòng)擋恭垦。
要說(shuō)詳細(xì)一點(diǎn)區(qū)別嘛
1.react整體是函數(shù)式的思想快毛，把組件設(shè)計(jì)成純組件，狀態(tài)和邏輯通過(guò)參數(shù)傳入番挺，所以在react中唠帝，是單向數(shù)據(jù)流
而vue的思想是響應(yīng)式的，也就是基于是數(shù)據(jù)可變的玄柏，通過(guò)對(duì)每一個(gè)屬性建立Watcher來(lái)監(jiān)聽(tīng)襟衰，當(dāng)屬性變化的時(shí)候，響應(yīng)式的更新對(duì)應(yīng)的虛擬dom粪摘。
2.還有就是
react的思路是all in js右蒲，通過(guò)js來(lái)生成html，所以設(shè)計(jì)了jsx赶熟，還有通過(guò)js來(lái)操作css
vue是把html瑰妄，css，js組合到一起映砖，用各自的處理方式间坐，
3.react是類(lèi)式的寫(xiě)法，api很少.像一個(gè){}花括號(hào)，就可以在里面寫(xiě)js了竹宋，想寫(xiě)判斷劳澄，就直接寫(xiě)個(gè)三元表達(dá)式。
而vue是聲明式的寫(xiě)法蜈七，通過(guò)傳入各種options秒拔，api和參數(shù)都很多。所以react結(jié)合typescript更容易一起寫(xiě)飒硅，vue稍微復(fù)雜砂缩。像v-if。v-show三娩。
總結(jié)庵芭，感覺(jué)vue更簡(jiǎn)單自動(dòng)化，想傻瓜相機(jī)雀监，而react双吆，需要自己區(qū)手動(dòng)調(diào)焦
但是hook的出現(xiàn)，讓我覺(jué)得react更加好用了
使用React hook的好處
// 聲明一個(gè)叫 "count" 的 state 變量
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = You clicked ${count} times;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
復(fù)雜組件變得難以理解
我們經(jīng)常維護(hù)一些組件会前，組件起初很簡(jiǎn)單好乐，但是逐漸會(huì)被狀態(tài)邏輯和副作用充斥。每個(gè)生命周期常常包含一些不相關(guān)的邏輯瓦宜。例如蔚万，組件常常在 componentDidMount 和 componentDidUpdate 中獲取數(shù)據(jù)。但是歉提，同一個(gè) componentDidMount 中可能也包含很多其它的邏輯笛坦，如設(shè)置事件監(jiān)聽(tīng)，而之后需在 componentWillUnmount 中清除苔巨。相互關(guān)聯(lián)且需要對(duì)照修改的代碼被進(jìn)行了拆分版扩，而完全不相關(guān)的代碼卻在同一個(gè)方法中組合在一起。如此很容易產(chǎn)生 bug侄泽，并且導(dǎo)致邏輯不一致礁芦。
如果你熟悉 React class 的生命周期函數(shù)，你可以把 useEffect Hook 看做 componentDidMount悼尾，componentDidUpdate 和 componentWillUnmount 這三個(gè)函數(shù)的組合柿扣。
生命周期
componentWillMount:
在組件掛載到DOM前調(diào)用，且只會(huì)被調(diào)用一次闺魏，在這邊調(diào)用this.setState不會(huì)引起組件重新渲染未状，也可以把寫(xiě)在這邊的內(nèi)容提前到constructor()中，所以項(xiàng)目中很少用析桥。
render:
根據(jù)組件的props和state（無(wú)兩者的重傳遞和重賦值司草，論值是否有變化艰垂，都可以引起組件重新render） ，return 一個(gè)React元素（描述組件埋虹，即UI）猜憎，不負(fù)責(zé)組件實(shí)際渲染工作，之后由React自身根據(jù)此元素去渲染出頁(yè)面DOM搔课。render是純函數(shù)（Pure function：函數(shù)的返回結(jié)果只依賴(lài)于它的參數(shù)胰柑；函數(shù)執(zhí)行過(guò)程里面沒(méi)有副作用），不能在里面執(zhí)行this.setState爬泥，會(huì)有改變組件狀態(tài)的副作用柬讨。
1.componentDidMount:組件掛載到DOM后調(diào)用，且只會(huì)被調(diào)用一次
2.componentDidUpdate(prevProps, prevState)
此方法在組件更新后被調(diào)用急灭，可以操作組件更新的DOM姐浮，prevProps和prevState這兩個(gè)參數(shù)指的是組件更新前的props和state
3.componentWillUnmount
此方法在組件被卸載前調(diào)用谷遂，可以在這里執(zhí)行一些清理工作葬馋，比如清楚組件中使用的定時(shí)器，清楚componentDidMount中手動(dòng)創(chuàng)建的DOM元素等肾扰，以避免引起內(nèi)存泄漏畴嘶。
團(tuán)隊(duì)的重要性
團(tuán)隊(duì)的重要性吧，技術(shù)不會(huì)可以慢慢學(xué)嘛
需要用java語(yǔ)言集晚，需要用什么東西窗悯，都是從頭現(xiàn)學(xué)的
認(rèn)準(zhǔn)干這個(gè)事兒，就缺什么補(bǔ)什么
css盒模型布局
flex-direction 決定元素的排列方向
row 默認(rèn)值偷拔，主軸為水平方向蒋院，（左 => 右）
column 主軸為垂直方向，（上 => 下）
flex-wrap 決定元素如何換行
nowrap 默認(rèn)值莲绰，只顯示一行欺旧，不換行
wrap 多行顯示
justify-content 定義主軸為水平方向，分布方式蛤签。
flex-start 水平方向起點(diǎn)開(kāi)始對(duì)齊
flex-end 水平方向結(jié)束位置對(duì)齊
center 居中對(duì)齊
space-between 兩端對(duì)齊辞友，平均間隔
space-around 每個(gè)子元素都有相等的外邊距，相鄰元素外邊距不會(huì)疊加
align-items 定義主軸為垂直方向震肮，分布方式称龙。
flex-start 垂直方向起點(diǎn)開(kāi)始對(duì)齊
flex-end 垂直方向結(jié)束位置對(duì)齊
center 垂直方向居中對(duì)齊
baseline 與基線(xiàn)對(duì)齊（有圖）
插件
"antd": "^4.8.0",
"array-move": "^3.0.1",
"axios": "^0.21.1"
"bizcharts": "^4.0.7",
"craco-less": "^1.17.0",
"crypto-js": "^4.0.0",
"echarts": "^4.9.0",
"echarts-for-react": "^2.0.16",
"file-saver": "^2.0.2",
"moment": "^2.29.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-ace": "^9.4.0",
"react-app-polyfill": "^2.0.0",
"react-async-component": "^2.0.0",
"react-clipboard": "^1.3.2",
"react-copy-to-clipboard": "^5.0.2",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.3",
"sql-formatter": "^4.0.2",
"util": "^0.12.3",
單向數(shù)據(jù)流 and 雙向數(shù)據(jù)流
單向數(shù)據(jù)流，在React中戳晌，這意味著：
單項(xiàng)數(shù)據(jù)流并不是React獨(dú)有的概念鲫尊，但是作為JavaScript開(kāi)發(fā)人員，這可能是您第一次聽(tīng)到他沦偎。
通常疫向，此概念意味著數(shù)據(jù)只有一種方式可以傳輸?shù)綉?yīng)用程序的其他部分竞帽。
該視圖是應(yīng)用程序狀態(tài)的結(jié)果。成員只有在操作采取行動(dòng)時(shí)鸿捧。狀態(tài)更新將傳遞到視圖和子組件
屹篓，才能改變。當(dāng)動(dòng)作發(fā)生時(shí)匙奴，狀態(tài)被更新堆巧。
得益于單項(xiàng)綁定，數(shù)據(jù)不能以相反的方式流動(dòng)（例如泼菌，雙向數(shù)據(jù)會(huì)發(fā)生這種情況）谍肤，這具有一些關(guān)鍵優(yōu)勢(shì)：
她更不容易出錯(cuò)，因?yàn)槟梢愿玫乜刂茢?shù)據(jù)哗伯。
React的一大創(chuàng)新荒揣，就是把每一個(gè)組件都看成一個(gè)狀態(tài)機(jī)，組件內(nèi)部通過(guò)state來(lái)維護(hù)組件狀態(tài)的變化焊刹，這也是state唯一的作用系任。
雙向數(shù)據(jù)流
無(wú)論數(shù)據(jù)改變，或是用戶(hù)操作虐块，都能帶來(lái)相互的變動(dòng)俩滥，自動(dòng)更新。
優(yōu)缺點(diǎn)
單向數(shù)據(jù)流優(yōu)缺點(diǎn)
優(yōu)點(diǎn)
1贺奠、所有狀態(tài)的改變可記錄霜旧、可跟蹤，源頭易追溯儡率。
2挂据、所有數(shù)據(jù)只有一份，組件數(shù)據(jù)只有唯一的入口和出口儿普，使得程序更直觀(guān)更容易理解崎逃，有利于應(yīng)用的可維護(hù)性。
3箕肃、一旦數(shù)據(jù)變化婚脱，就去更新頁(yè)面（data-頁(yè)面），但是沒(méi)有（頁(yè)面-data）
4勺像、如果用戶(hù)在頁(yè)面上做了變動(dòng)障贸，那么就手動(dòng)收集起來(lái)（雙向是自動(dòng)），合并到原有的數(shù)據(jù)中吟宦。
缺點(diǎn)
1篮洁、HTML代碼渲染完成，無(wú)法改變殃姓，有新數(shù)據(jù)袁波，就需把舊HTML代碼去掉瓦阐，整合新數(shù)據(jù)和模板重新渲染。
2篷牌、代碼量上升睡蟋，數(shù)據(jù)流轉(zhuǎn)過(guò)程變長(zhǎng)，出現(xiàn)很多類(lèi)似的樣板代碼枷颊。
3戳杀、同時(shí)由于對(duì)應(yīng)狀態(tài)獨(dú)立管理的嚴(yán)格要求（單一的全局store），在處理局部狀態(tài)較多的場(chǎng)景時(shí)（如用戶(hù)輸入交互較多的“富表單型”應(yīng)用）夭苗，會(huì)顯得啰嗦及繁瑣信卡。
雙向數(shù)據(jù)綁定的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)
1、用戶(hù)在視圖上的修改會(huì)自動(dòng)同步到數(shù)據(jù)模型中去题造，數(shù)據(jù)模型中值的變化也會(huì)立刻同步到視圖中去傍菇。
2、無(wú)需進(jìn)行和單向數(shù)據(jù)綁定的那些相關(guān)操作界赔。
3丢习、在表單交互較多的場(chǎng)景下，會(huì)簡(jiǎn)化大量業(yè)務(wù)無(wú)關(guān)的代碼仔蝌。
缺點(diǎn)
1泛领、無(wú)法追蹤局部狀態(tài)的變化荒吏。
2敛惊、“暗箱操作”，增加了出錯(cuò)時(shí)debug的難度绰更。
3瞧挤、由于組件數(shù)據(jù)變化來(lái)源入口變得可能不止一個(gè)，數(shù)據(jù)流轉(zhuǎn)方向易紊亂儡湾，若在缺乏“管制”手段特恬，血崩
