組合 在React中，我們將功能劃分為小型可重用的純函數，我們必須將所有這些可重用的函數放在一起，最終使其成為產品。 將所有較小的函數組合成更大的函數，最終，得到一個應用程序，這稱為組合 。
實現組合有許多不同方法。 我們從Javascript中了解到的一種常見方法是鏈接。 鏈接是一種使用點 表示法調用前一個函數的返回值的函數的方法。
這是一個例子。 我們有一個name ，如果firstName 和lastName 大于5個單詞的大寫字母，剛返回，并且打印名稱的名稱和長度。
const name = "Bhargav Bachina";
const output = name.split(" ")
.filter(name => name.length > 5)
.map(val => {
val = val.toUpperCase();
console.log("Name:::::"+val);
console.log("Count::::"+val.length);
return val;
});
console.log(output)
/*
Name:::::BHARGAV
Count::::7
Name:::::BACHINA
Count::::7
[ "BHARGAV", "BACHINA" ]
*/
在React中，我們使用了不同于鏈接的方法，因為如果有30個這樣的函數，就很難進行鏈接。這里的目的是將所有更簡單的函數組合起來生成一個更高階的函數。
const name = compose(
splitmyName,
countEachName,
comvertUpperCase,
returnName
)
console.log(name);
什么是 React
React是一個簡單的javascript UI庫，用于構建高效、快速的用戶界面。它是一個輕量級庫，因此很受歡迎。它遵循組件設計模式、聲明式編程范式和函數式編程概念，以使前端應用程序更高效。它使用虛擬DOM來有效地操作DOM。它遵循從高階組件到低階組件的單向數據流。
React 與 Angular 有何不同？
Angular是一個成熟的MVC框架，帶有很多特定的特性，比如服務、指令、模板、模塊、解析器等等。React是一個非常輕量級的庫，它只關注MVC的視圖部分。
Angular遵循兩個方向的數據流，而React遵循從上到下的單向數據流。React在開發特性時給了開發人員很大的自由，例如，調用API的方式、路由等等。我們不需要包括路由器庫，除非我們需要它在我們的項目。
什么是Virtual DOM及其工作原理
React 使用 Virtual DOM 來更新真正的 DOM，從而提高效率和速度。 我們來詳細討論這些。
什么是Virtual DOM 瀏覽器遵循HTML指令來構造文檔對象模型(DOM)。當瀏覽器加載HTML并呈現用戶界面時，HTML文檔中的所有元素都變成DOM元素。
DOM是從根元素開始的元素層次結構。例如，看看下面的HTML。
This is heading
this is paragraph
This is heading
this is paragraph
This is heading
this is paragraph
當在瀏覽器中加載這個HTML時，所有這些HTML元素都被轉換成DOM元素，如下所示
當涉及到SPA應用程序時，首次加載index.html ，并在index.html 本身中加載更新后的數據或另一個html。當用戶瀏覽站點時，我們使用新內容更新相同的index.html。每當DOM發生更改時，瀏覽器都需要重新計算CSS、進行布局并重新繪制web頁面。
React 使用 Virtual DOM 有效地重建 DOM。 對于我們來說，這使得DOM操作的一項非常復雜和耗時的任務變得更加容易。 React從開發人員那里抽象出所有這些，以便在Virtual DOM的幫助下構建高效的UI。
虛擬DOM是如何工作的 虛擬DOM只不過是真實 DOM 的 javascript對象表示。 與更新真實 DOM 相比，更新 javascript 對象更容易，更快捷。 考慮到這一點，讓我們看看它是如何工作的。
React將整個DOM副本保存為虛擬DOM
每當有更新時，它都會維護兩個虛擬DOM，以比較之前的狀態和當前狀態，并確定哪些對象已被更改。 例如，段落文本更改為更改。
現在，它通過比較兩個虛擬DOM 差異，并將這些變化更新到實際DOM
一旦真正的DOM更新，它也會更新UI
什么是 JSX
JSX是javascript的語法擴展。它就像一個擁有javascript全部功能的模板語言。它生成React元素，這些元素將在DOM中呈現。React建議在組件使用JSX。在JSX中，我們結合了javascript和HTML，并生成了可以在DOM中呈現的react元素。
下面是JSX的一個例子。我們可以看到如何將javascript和HTML結合起來。如果HTML中包含任何動態變量，我們應該使用表達式{} 。
import React from "react";
export const Header = () => {
const heading = "TODO App"
return(
{heading}
)
}
組件和不同類型
React 中一切都是組件。 我們通常將應用程序的整個邏輯分解為小的單個部分。 我們將每個多帶帶的部分稱為組件。 通常，組件是一個javascript函數，它接受輸入，處理它并返回在UI中呈現的React元素。
在React中有不同類型的組件。讓我們詳細看看。
函數/無狀態/展示組件 函數或無狀態組件是一個純函數，它可接受接受參數，并返回react元素。這些都是沒有任何副作用的純函數。這些組件沒有狀態或生命周期方法，這里有一個例子。
import React from "react";
import Jumbotron from "react-bootstrap/Jumbotron";
export const Header = () => {
return(
TODO App
)
}
類/有狀態組件 類或有狀態組件具有狀態和生命周期方可能通過 setState() 方法更改組件的狀態。類組件是通過擴展React創建的。它在構造函數中初始化，也可能有子組件,這里有一個例子。
import React from "react";
import "../App.css";
import { ToDoForm } from "./todoform";
import { ToDolist } from "./todolist";
export class Dashboard extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
render() {
return (
);
}
}
受控組件 受控組件是在 React 中處理輸入表單的一種技術。表單元素通常維護它們自己的狀態，而react則在組件的狀態屬性中維護狀態。我們可以將兩者結合起來控制輸入表單。這稱為受控組件。因此，在受控組件表單中，數據由React組件處理。
這里有一個例子。當用戶在 todo 項中輸入名稱時，調用一個javascript函數handleChange 捕捉每個輸入的數據并將其放入狀態，這樣就在 handleSubmit 中的使用數據。
import React from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
export class ToDoForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ""};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert("A name was submitted: " + this.state.value);
event.preventDefault();
}
render() {
return (
);
}
}
非受控組件 大多數情況下，建議使用受控組件。有一種稱為非受控組件的方法可以通過使用Ref 來處理表單數據。在非受控組件中，Ref 用于直接從DOM 訪問表單值，而不是事件處理程序。
我們使用Ref 構建了相同的表單，而不是使用React狀態。 我們使用React.createRef() 定義Ref 并傳遞該輸入表單并直接從handleSubmit 方法中的DOM 訪問表單值。
import React from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
export class ToDoForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ""};
this.input = React.createRef();
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
alert("A name was submitted: " + this.input.current.value);
event.preventDefault();
}
render() {
return (
);
}
}
容器組件 容器組件是處理獲取數據、訂閱 redux 存儲等的組件。它們包含展示組件和其他容器組件，但是里面從來沒有html。
高階組件 高階組件是將組件作為參數并生成另一個組件的組件。 Redux connect 是高階組件的示例。 這是一種用于生成可重用組件的強大技術。
Props 和 State
Props 是只讀屬性，傳遞給組件以呈現UI和狀態，我們可以隨時間更改組件的輸出。
下面是一個類組件的示例，它在構造函數中定義了props 和state ，每當使用this.setState() 修改狀態時，將再次調用 render( ) 函數來更改UI中組件的輸出。
import React from "react";
import "../App.css";
export class Dashboard extends React.Component {
constructor(props){
super(props);
this.state = {
name: "some name"
}
}
render() {
// reading state
const name = this.state.name;
//reading props
const address = this.props.address;
return (
{name}
{address}
);
}
}
什么是PropTypes
隨著時間的推移，應用程序會變得越來越大，因此類型檢查非常重要。PropTypes 為組件提供類型檢查，并為其他開發人員提供很好的文檔。如果react項目不使用 Typescript，建議為組件添加 PropTypes 。
如果組件沒有收到任何 props，我們還可以為每個組件定義要顯示的默認 props。這里有一個例子。UserDisplay 有三個 prop:name 、address 和age ，我們正在為它們定義默認的props 和 prop類型。
import React from "react";
import PropTypes from "prop-types";
export const UserDisplay = ({name, address, age}) => {
UserDisplay.defaultProps = {
name: "myname",
age: 100,
address: "0000 onestreet"
};
return (
<>
)
}
UserDisplay.propTypes = {
name: PropTypes.string.isRequired,
address: PropTypes.objectOf(PropTypes.string),
age: PropTypes.number.isRequired
}
如何更新狀態以及如何不更新
你不應該直接修改狀態。可以在構造函數中定義狀態值。直接使用狀態不會觸發重新渲染。React 使用this.setState() 時合并狀態。
// 錯誤方式
this.state.name = "some name"
// 正確方式
this.setState({name:"some name"})
使用this.setState() 的第二種形式總是更安全的，因為更新的props和狀態是異步的。這里，我們根據這些 props 更新狀態。
// 錯誤方式
this.setState({
timesVisited: this.state.timesVisited + this.props.count
})
// 正確方式
this.setState((state, props) => {
timesVisited: state.timesVisited + props.count
});
組件生命周期方法
組件在進入和離開DOM時要經歷一系列生命周期方法，下面是這些生命周期方法。
componentWillMount() 在渲染前調用,在客戶端也在服務端，它只發生一次。
componentDidMount() 在第一次渲染后調用，只在客戶端。之后組件已經生成了對應的DOM結構，可以通過this.getDOMNode() 來進行訪問。 如果你想和其他JavaScript框架一起使用，可以在這個方法中調用setTimeout , setInterval 或者發送AJAX請求等操作(防止異部操作阻塞UI)。
componentWillReceiveProps()
在組件接收到一個新的 prop (更新后)時被調用。這個方法在初始化render時不會被調用。
shouldComponentUpdate() 返回一個布爾值。在組件接收到新的props 或者state 時被調用。在初始化時或者使用forceUpdate 時不被調用。 可以在你確認不需要更新組件時使用。
componentWillUpdate() 在組件接收到新的props 或者state 但還沒有render 時被調用。在初始化時不會被調用。
componentDidUpdate() 在組件完成更新后立即調用。在初始化時不會被調用。
componentWillUnMount() 件從 DOM 中移除的時候立刻被調用。
getDerivedStateFromError() 這個生命周期方法在ErrorBoundary 類中使用。實際上，如果使用這個生命周期方法，任何類都會變成ErrorBoundary 。這用于在組件樹中出現錯誤時呈現回退UI，而不是在屏幕上顯示一些奇怪的錯誤。
componentDidCatch() 這個生命周期方法在ErrorBoundary類中使用。實際上，如果使用這個生命周期方法，任何類都會變成ErrorBoundary。這用于在組件樹中出現錯誤時記錄錯誤。
超越繼承的組合
在React中，我們總是使用組合而不是繼承。我們已經在函數式編程部分討論了什么是組合。這是一種結合簡單的可重用函數來生成高階組件的技術。下面是一個組合的例子，我們在 dashboard 組件中使用兩個小組件todoForm 和todoList 。
import React from "react";
import "../App.css";
import { ToDoForm } from "./todoform";
import { ToDolist } from "./todolist";
export class Dashboard extends React.Component {
render() {
return (
);
}
}
如何在React中應用樣式
將樣式應用于React組件有三種方法。
外部樣式表 在此方法中，你可以將外部樣式表導入到組件使用類中。 但是你應該使用className 而不是class 來為React元素應用樣式, 這里有一個例子。
import React from "react";
import "./App.css";
import { Header } from "./header/header";
import { Footer } from "./footer/footer";
import { Dashboard } from "./dashboard/dashboard";
import { UserDisplay } from "./userdisplay";
function App() {
return (
);
}
export default App;
內聯樣式 在這個方法中，我們可以直接將 props 傳遞給HTML元素，屬性為style 。這里有一個例子。這里需要注意的重要一點是，我們將javascript對象傳遞給style，這就是為什么我們使用 backgroundColor 而不是CSS方法backbackground -color 。
import React from "react";
export const Header = () => {
const heading = "TODO App"
return(
{heading}
)
}
定義樣式對象并使用它 因為我們將javascript對象傳遞給style 屬性，所以我們可以在組件中定義一個style 對象并使用它。下面是一個示例，你也可以將此對象作為 props 傳遞到組件樹中。
import React from "react";
const footerStyle = {
width: "100%",
backgroundColor: "green",
padding: "50px",
font: "30px",
color: "white",
fontWeight: "bold"
}
export const Footer = () => {
return(
All Rights Reserved 2019
)
}
什么是Redux及其工作原理
Redux 是 React的一個狀態管理庫，它基于flux。 Redux簡化了React中的單向數據流。 Redux將狀態管理完全從React中抽象出來。
它是如何工作的 在React中，組件連接到 redux ，如果要訪問 redux，需要派出一個包含 id 和負載(payload) 的 action 。action 中的 payload 是可選的，action 將其轉發給 Reducer。
當reducer 收到action 時，通過 swithc...case 語法比較 action 中type 。 匹配時，更新對應的內容返回新的 state 。
當Redux 狀態更改時，連接到Redux 的組件將接收新的狀態作為props 。當組件接收到這些props 時，它將進入更新階段并重新渲染 UI。
Redux 循環細節
讓我們詳細看看整個redux 循環細節。
Action : Action 只是一個簡單的json對象，type 和有payload 作為鍵。type 是必須要有的，payload 是可選的。下面是一個 action 的例子。
// action
{
type:"SEND_EMAIL",
payload: data
};
Action Creators ：這些是創建Actions 的函數，因此我們在派發action 時不必在組件中手動編寫每個 action 。 以下是 action creator 的示例。
// action creator
export function sendEamil(data) {
return { type:"SEND_EMAIL", payload: data};
}
Reducers ：Reducers 是純函數，它將 action 和當前 state 作為參數,計算必要的邏輯并返回一個新r的state 。 這些 Reducers 沒有任何副作用。 它不會改變 state 而是總是返回 state 。
export default function emailReducer(state = [], action){
switch(action.type) {
case "SEND_EMAIL": return Object.assign({}, state, {
email: action.payload
});
default: return state;
}
}
組件如何與 redux 進行連接
mapStateToProps ：此函數將state 映射到 props 上，因此只要state 發生變化，新 state 會重新映射到 props 。 這是訂閱store 的方式。
mapDispatchToProps ：此函數用于將 action creators 綁定到你的props 。以便我們可以在第12 行中使用This . props.actions.sendemail() 來派發一個動作。
connect 和bindActionCreators 來自 redux。 前者用于連接 store ，如第22行，后者用于將 action creators 綁定到你的 props ，如第20行。
// import connect
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
// import action creators
import * as userActions from "../../../actions/userActions";
export class User extends React.Component {
handleSubmit() {
// dispatch an action
this.props.actions.sendEmail(this.state.email);
}
}
// you are mapping you state props
const mapStateToProps = (state, ownProps) => ({user: state.user})
// you are binding your action creators to your props
const mapDispatchToProps = (dispatch) => ({actions: bindActionCreators(userActions, dispatch)})
export default connect(mapStateToProps, mapDispatchToProps)(User);
什么是 React Router Dom 及其工作原理
react-router-dom 是應用程序中路由的庫。 React庫中沒有路由功能，需要多帶帶安裝react-router-dom 。
react-router-dom 提供兩個路由器BrowserRouter 和HashRoauter 。前者基于rul的pathname段，后者基于hash段。
前者：http://127.0.0.1:3000/article/num1
后者：http://127.0.0.1:3000/#/article/num1（不一定是這樣，但#是少不了的）
react-router-dom 組件
BrowserRouter 和 HashRouter 是路由器。
Route 用于路由匹配。
Link 組件用于在應用程序中創建鏈接。 它將在HTML中渲染為錨標記。
NavLink 是突出顯示當前活動鏈接的特殊鏈接。
Switch 不是必需的，但在組合路由時很有用。
Redirect 用于強制路由重定向
下面是組件中的Link 、NavLink 和Redirect 的例子
// normal link
React
// you can redirect to this url
以下是 react router 組件的示例。 如果你查看下面的示例，我們將匹配路徑并使用Switch 和Route 呈現相應的組件。
import React from "react"
// import react router DOM elements
import { Switch, Route, Redirect } from "react-router-dom"
import ComponentA from "../common/compa"
import ComponentB from "../common/compb"
import ComponentC from "../common/compc"
import ComponentD from "../common/compd"
import ComponentE from "../common/compe"
const Layout = ({ match }) => {
return(
)}
export default Layout
什么是錯誤邊界
在 React 中，我們通常有一個組件樹。如果任何一個組件發生錯誤，它將破壞整個組件樹。沒有辦法捕捉這些錯誤，我們可以用錯誤邊界優雅地處理這些錯誤。
錯誤邊界有兩個作用
如果發生錯誤，顯示回退UI
記錄錯誤
下面是ErrorBoundary 類的一個例子。如果類實現了 getDerivedStateFromError 或componentDidCatch 這兩個生命周期方法的任何一下，，那么這個類就會成為ErrorBoundary 。前者返回{hasError: true} 來呈現回退UI，后者用于記錄錯誤。
import React from "react"
export class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
componentDidCatch(error, info) {
// You can also log the error to an error reporting service
console.log("Error::::", error);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return OOPS!. WE ARE LOOKING INTO IT. ;
}
return this.props.children;
}
}
以下是我們如何在其中一個組件中使用ErrorBoundary。使用ErrorBoundary類包裹 ToDoForm 和ToDoList 。 如果這些組件中發生任何錯誤，我們會記錄錯誤并顯示回退UI。
import React from "react";
import "../App.css";
import { ToDoForm } from "./todoform";
import { ToDolist } from "./todolist";
import { ErrorBoundary } from "../errorboundary";
export class Dashboard extends React.Component {
render() {
return (
);
}
}
什么是 Fragments
在React中，我們需要有一個父元素，同時從組件返回React元素。有時在DOM中添加額外的節點會很煩人。使用 Fragments ，我們不需要在DOM中添加額外的節點。我們只需要用 React.Fragment 或才簡寫 <> 來包裹內容就行了。如下 所示：
// Without Fragments
return (
)
// With Fragments
return (
)
// shorthand notation Fragments
return (
<>
什么是傳送門(Portals)
默認情況下，所有子組件都在UI上呈現，具體取決于組件層次結構。Portal 提供了一種將子節點渲染到存在于父組件以外的 DOM 節點的優秀的方案。
這里有一個例子。默認情況下，父組件在DOM層次結構中有子組件。
我們可以將 children 組件移出parent 組件并將其附加 id 為 someid 的 Dom 節點下。
首先，獲取 id 為 someid，我們在constrcutorand中創建一個元素div，將child附加到componentDidMount中的someRoot。 最后，我們在ReactDOM.createPortal（this.props.childen），domnode的幫助下將子節點傳遞給該特定DOM節點。
首先，先獲取 id 為someid DOM元素，接著在構造函數中創建一個元素div，在 componentDidMount 方法中將 someRoot 放到 div 中 。 最后，通過 ReactDOM.createPortal(this.props.childen), domnode) 將 children 傳遞到對應的節點下。
const someRoot = document.getElementById("someid");
class Modal extends React.Component {
constructor(props) {
super(props);
this.el = document.createElement("div");
}
componentDidMount() {
someRoot.appendChild(this.el);
}
componentWillUnmount() {
someRoot.removeChild(this.el);
}
render() {
return ReactDOM.createPortal(
this.props.children,
this.el,
);
}
}
什么是上下文
有時我們必須將props 傳遞給組件樹，即使所有中間組件都不需要這些props 。上下文是一種傳遞props 的方法，而不用在每一層傳遞組件樹。
什么是 Hooks
Hooks 是React版本16.8中的新功能。 請記住，我們不能在函數組件中使用state ，因為它們不是類組件。Hooks 讓我們在函數組件中可以使用state 和其他功能。
目前沒有重大變化，我們不必放棄類組件。
Hook 不會影響你對 React 概念的理解。 恰恰相反，Hook 為已知的 React 概念提供了更直接的 API：props， state，context，refs 以及生命周期。稍后我們將看到，Hook 還提供了一種更強大的方式來組合他們。
我們可以使用一些鉤子，例如useState，useEffect，useContext，useReducer等。
下面是 Hooks 的基本規則
Hooks 應該在外層使用，不應該在循環，條件或嵌套函數中使用
Hooks 應該只在函數組件中使用。
讓我們看一個例子來理解 hooks。 這是一個函數組件，它采用props 并在UI上顯示這些props 。 在useState 鉤子的幫助下，我們將這個函數組件轉換為有狀態組件。 首先，我們在第5行定義狀態，這相當于
constructor(props) {
super(props);
this.state = {
name:"myname", age:10, address:"0000 one street"
}
}
useState 返回兩個項，一個是user ，另一個是setUser 函數。 user 是一個可以在沒有 this 關鍵字的情況下直接使用的對象，setUser 是一個可以用來設置用戶點擊第21 行按鈕的狀態的函數，該函數等效于以下內容。
this.setState({name:"name changed"})
1 import React, { useState } from "react";
2
3 export const UserDisplay = ({name, address, age}) => {
4
5 const [user, setUser] = useState({ name: "myname", age: 10, address: "0000 onestreet" });
6
7 return (
8 <>
9
10
Name:
11
{user.name}
12
14
Address:
15
{user.address}
16
setUser({name: "name changed"})}>
22 Click me
23
24
25 )
26 }
如何提高性能
我們可以通過多種方式提高應用性能，以下這些比較重要：
適當地使用shouldComponentUpdate 生命周期方法。 它避免了子組件的不必要的渲染。 如果樹中有100個組件，則不重新渲染整個組件樹來提高應用程序性能。
使用create-react-app 來構建項目，這會創建整個項目結構，并進行大量優化。
不可變性是提高性能的關鍵。不要對數據進行修改，而是始終在現有集合的基礎上創建新的集合，以保持盡可能少的復制，從而提高性能。
在顯示列表或表格時始終使用 Keys ，這會讓 React 的更新速度更快
代碼分離是將代碼插入到多帶帶的文件中，只加載模塊或部分所需的文件的技術。
如何在重新加載頁面時保留數據
單頁應用程序首先在DOM中加載index.html ，然后在用戶瀏覽頁面時加載內容，或者從同一index.html 中的后端API獲取任何數據。
如果通過點擊瀏覽器中的重新加載按鈕重新加載頁面index.html ，整個React應用程序將重新加載，我們將丟失應用程序的狀態。 如何保留應用狀態？
每當重新加載應用程序時，我們使用瀏覽器localstorage 來保存應用程序的狀態。我們將整個存儲數據保存在localstorage 中，每當有頁面刷新或重新加載時，我們從localstorage 加載狀態。
如何在React進行API調用
我們使用redux-thunk 在React中調用API。因為reduce 是純函數，所以沒有副作用，比如調用API。
因此，我們必須使用redux-thunk 從 action creators 那里進行 API 調用。Action creator 派發一個action，將來自API的數據放入action 的 payload 中。Reducers 接收我們在上面的redux 循環中討論的數據，其余的過程也是相同的。
redux-thunk是一個中間件。一旦它被引入到項目中，每次派發一個action 時，都會通過thunk 傳遞。如果它是一個函數，它只是等待函數處理并返回響應。如果它不是一個函數，它只是正常處理。
這里有一個例子。sendEmailAPI 是從組件中調用的函數，它接受一個數據并返回一個函數，其中dispatch 作為參數。我們使用redux-thunk 調用API apiservice ，并等待收到響應。一旦接收到響應，我們就使用payload 派發一個action 。
import apiservice from "../services/apiservice";
export function sendEmail(data) {
return { type:"SEND_EMAIL", payload: data };
}
export function sendEmailAPI(email) {
return function(dispatch) {
return apiservice.callAPI(email).then(data => {
dispatch(sendEmail(data));
});
}
}
總結
要想有把握的面試，必須充分了解上述所有主題。 即使你目前正在使用React，理解這些概念也能增強你在職場中信心。
代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
交流
這篇來來回回整理了快五天，大家給個贊唄！
干貨系列文章匯總如下，覺得不錯點個Star，歡迎 加群 互相學習。
https://github.com/qq44924588...
我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨 ，在進階的路上，共勉！
關注公眾號，后臺回復福利 ，即可看到福利，你懂的。
