組合 在React中，我們將功能劃分為小型可重用的純函數(shù)，我們必須將所有這些可重用的函數(shù)放在一起，最終使其成為產(chǎn)品。 將所有較小的函數(shù)組合成更大的函數(shù)，最終，得到一個應(yīng)用程序，這稱為組合 。
實現(xiàn)組合有許多不同方法。 我們從Javascript中了解到的一種常見方法是鏈接。 鏈接是一種使用點 表示法調(diào)用前一個函數(shù)的返回值的函數(shù)的方法。
這是一個例子。 我們有一個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個這樣的函數(shù)，就很難進(jìn)行鏈接。這里的目的是將所有更簡單的函數(shù)組合起來生成一個更高階的函數(shù)。
const name = compose(
splitmyName,
countEachName,
comvertUpperCase,
returnName
)
console.log(name);
什么是 React
React是一個簡單的javascript UI庫，用于構(gòu)建高效、快速的用戶界面。它是一個輕量級庫，因此很受歡迎。它遵循組件設(shè)計模式、聲明式編程范式和函數(shù)式編程概念，以使前端應(yīng)用程序更高效。它使用虛擬DOM來有效地操作DOM。它遵循從高階組件到低階組件的單向數(shù)據(jù)流。
React 與 Angular 有何不同？
Angular是一個成熟的MVC框架，帶有很多特定的特性，比如服務(wù)、指令、模板、模塊、解析器等等。React是一個非常輕量級的庫，它只關(guān)注MVC的視圖部分。
Angular遵循兩個方向的數(shù)據(jù)流，而React遵循從上到下的單向數(shù)據(jù)流。React在開發(fā)特性時給了開發(fā)人員很大的自由，例如，調(diào)用API的方式、路由等等。我們不需要包括路由器庫，除非我們需要它在我們的項目。
什么是Virtual DOM及其工作原理
React 使用 Virtual DOM 來更新真正的 DOM，從而提高效率和速度。 我們來詳細(xì)討論這些。
什么是Virtual DOM 瀏覽器遵循HTML指令來構(gòu)造文檔對象模型(DOM)。當(dāng)瀏覽器加載HTML并呈現(xiàn)用戶界面時，HTML文檔中的所有元素都變成DOM元素。
DOM是從根元素開始的元素層次結(jié)構(gòu)。例如，看看下面的HTML。
This is heading
this is paragraph
This is heading
this is paragraph
This is heading
this is paragraph
當(dāng)在瀏覽器中加載這個HTML時，所有這些HTML元素都被轉(zhuǎn)換成DOM元素，如下所示
當(dāng)涉及到SPA應(yīng)用程序時，首次加載index.html ，并在index.html 本身中加載更新后的數(shù)據(jù)或另一個html。當(dāng)用戶瀏覽站點時，我們使用新內(nèi)容更新相同的index.html。每當(dāng)DOM發(fā)生更改時，瀏覽器都需要重新計算CSS、進(jìn)行布局并重新繪制web頁面。
React 使用 Virtual DOM 有效地重建 DOM。 對于我們來說，這使得DOM操作的一項非常復(fù)雜和耗時的任務(wù)變得更加容易。 React從開發(fā)人員那里抽象出所有這些，以便在Virtual DOM的幫助下構(gòu)建高效的UI。
虛擬DOM是如何工作的 虛擬DOM只不過是真實 DOM 的 javascript對象表示。 與更新真實 DOM 相比，更新 javascript 對象更容易，更快捷。 考慮到這一點，讓我們看看它是如何工作的。
React將整個DOM副本保存為虛擬DOM
每當(dāng)有更新時，它都會維護兩個虛擬DOM，以比較之前的狀態(tài)和當(dāng)前狀態(tài)，并確定哪些對象已被更改。 例如，段落文本更改為更改。
現(xiàn)在，它通過比較兩個虛擬DOM 差異，并將這些變化更新到實際DOM
一旦真正的DOM更新，它也會更新UI
什么是 JSX
JSX是javascript的語法擴展。它就像一個擁有javascript全部功能的模板語言。它生成React元素，這些元素將在DOM中呈現(xiàn)。React建議在組件使用JSX。在JSX中，我們結(jié)合了javascript和HTML，并生成了可以在DOM中呈現(xiàn)的react元素。
下面是JSX的一個例子。我們可以看到如何將javascript和HTML結(jié)合起來。如果HTML中包含任何動態(tài)變量，我們應(yīng)該使用表達(dá)式{} 。
import React from "react";
export const Header = () => {
const heading = "TODO App"
return(
{heading}
)
}
組件和不同類型
React 中一切都是組件。 我們通常將應(yīng)用程序的整個邏輯分解為小的單個部分。 我們將每個多帶帶的部分稱為組件。 通常，組件是一個javascript函數(shù)，它接受輸入，處理它并返回在UI中呈現(xiàn)的React元素。
在React中有不同類型的組件。讓我們詳細(xì)看看。
函數(shù)/無狀態(tài)/展示組件 函數(shù)或無狀態(tài)組件是一個純函數(shù)，它可接受接受參數(shù)，并返回react元素。這些都是沒有任何副作用的純函數(shù)。這些組件沒有狀態(tài)或生命周期方法，這里有一個例子。
import React from "react";
import Jumbotron from "react-bootstrap/Jumbotron";
export const Header = () => {
return(
TODO App
)
}
類/有狀態(tài)組件 類或有狀態(tài)組件具有狀態(tài)和生命周期方可能通過 setState() 方法更改組件的狀態(tài)。類組件是通過擴展React創(chuàng)建的。它在構(gòu)造函數(shù)中初始化，也可能有子組件,這里有一個例子。
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 中處理輸入表單的一種技術(shù)。表單元素通常維護它們自己的狀態(tài)，而react則在組件的狀態(tài)屬性中維護狀態(tài)。我們可以將兩者結(jié)合起來控制輸入表單。這稱為受控組件。因此，在受控組件表單中，數(shù)據(jù)由React組件處理。
這里有一個例子。當(dāng)用戶在 todo 項中輸入名稱時，調(diào)用一個javascript函數(shù)handleChange 捕捉每個輸入的數(shù)據(jù)并將其放入狀態(tài)，這樣就在 handleSubmit 中的使用數(shù)據(jù)。
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 (
);
}
}
非受控組件 大多數(shù)情況下，建議使用受控組件。有一種稱為非受控組件的方法可以通過使用Ref 來處理表單數(shù)據(jù)。在非受控組件中，Ref 用于直接從DOM 訪問表單值，而不是事件處理程序。
我們使用Ref 構(gòu)建了相同的表單，而不是使用React狀態(tài)。 我們使用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 (
);
}
}
容器組件 容器組件是處理獲取數(shù)據(jù)、訂閱 redux 存儲等的組件。它們包含展示組件和其他容器組件，但是里面從來沒有html。
高階組件 高階組件是將組件作為參數(shù)并生成另一個組件的組件。 Redux connect 是高階組件的示例。 這是一種用于生成可重用組件的強大技術(shù)。
Props 和 State
Props 是只讀屬性，傳遞給組件以呈現(xiàn)UI和狀態(tài)，我們可以隨時間更改組件的輸出。
下面是一個類組件的示例，它在構(gòu)造函數(shù)中定義了props 和state ，每當(dāng)使用this.setState() 修改狀態(tài)時，將再次調(diào)用 render( ) 函數(shù)來更改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
隨著時間的推移，應(yīng)用程序會變得越來越大，因此類型檢查非常重要。PropTypes 為組件提供類型檢查，并為其他開發(fā)人員提供很好的文檔。如果react項目不使用 Typescript，建議為組件添加 PropTypes 。
如果組件沒有收到任何 props，我們還可以為每個組件定義要顯示的默認(rèn) props。這里有一個例子。UserDisplay 有三個 prop:name 、address 和age ，我們正在為它們定義默認(rèn)的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
}
如何更新狀態(tài)以及如何不更新
你不應(yīng)該直接修改狀態(tài)?？梢栽跇?gòu)造函數(shù)中定義狀態(tài)值。直接使用狀態(tài)不會觸發(fā)重新渲染。React 使用this.setState() 時合并狀態(tài)。
// 錯誤方式
this.state.name = "some name"
// 正確方式
this.setState({name:"some name"})
使用this.setState() 的第二種形式總是更安全的，因為更新的props和狀態(tài)是異步的。這里，我們根據(jù)這些 props 更新狀態(tài)。
// 錯誤方式
this.setState({
timesVisited: this.state.timesVisited + this.props.count
})
// 正確方式
this.setState((state, props) => {
timesVisited: state.timesVisited + props.count
});
組件生命周期方法
組件在進(jìn)入和離開DOM時要經(jīng)歷一系列生命周期方法，下面是這些生命周期方法。
componentWillMount() 在渲染前調(diào)用,在客戶端也在服務(wù)端，它只發(fā)生一次。
componentDidMount() 在第一次渲染后調(diào)用，只在客戶端。之后組件已經(jīng)生成了對應(yīng)的DOM結(jié)構(gòu)，可以通過this.getDOMNode() 來進(jìn)行訪問。 如果你想和其他JavaScript框架一起使用，可以在這個方法中調(diào)用setTimeout , setInterval 或者發(fā)送AJAX請求等操作(防止異部操作阻塞UI)。
componentWillReceiveProps()
在組件接收到一個新的 prop (更新后)時被調(diào)用。這個方法在初始化render時不會被調(diào)用。
shouldComponentUpdate() 返回一個布爾值。在組件接收到新的props 或者state 時被調(diào)用。在初始化時或者使用forceUpdate 時不被調(diào)用。 可以在你確認(rèn)不需要更新組件時使用。
componentWillUpdate() 在組件接收到新的props 或者state 但還沒有render 時被調(diào)用。在初始化時不會被調(diào)用。
componentDidUpdate() 在組件完成更新后立即調(diào)用。在初始化時不會被調(diào)用。
componentWillUnMount() 件從 DOM 中移除的時候立刻被調(diào)用。
getDerivedStateFromError() 這個生命周期方法在ErrorBoundary 類中使用。實際上，如果使用這個生命周期方法，任何類都會變成ErrorBoundary 。這用于在組件樹中出現(xiàn)錯誤時呈現(xiàn)回退UI，而不是在屏幕上顯示一些奇怪的錯誤。
componentDidCatch() 這個生命周期方法在ErrorBoundary類中使用。實際上，如果使用這個生命周期方法，任何類都會變成ErrorBoundary。這用于在組件樹中出現(xiàn)錯誤時記錄錯誤。
超越繼承的組合
在React中，我們總是使用組合而不是繼承。我們已經(jīng)在函數(shù)式編程部分討論了什么是組合。這是一種結(jié)合簡單的可重用函數(shù)來生成高階組件的技術(shù)。下面是一個組合的例子，我們在 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中應(yīng)用樣式
將樣式應(yīng)用于React組件有三種方法。
外部樣式表 在此方法中，你可以將外部樣式表導(dǎo)入到組件使用類中。 但是你應(yīng)該使用className 而不是class 來為React元素應(yīng)用樣式, 這里有一個例子。
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;
內(nèi)聯(lián)樣式 在這個方法中，我們可以直接將 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的一個狀態(tài)管理庫，它基于flux。 Redux簡化了React中的單向數(shù)據(jù)流。 Redux將狀態(tài)管理完全從React中抽象出來。
它是如何工作的 在React中，組件連接到 redux ，如果要訪問 redux，需要派出一個包含 id 和負(fù)載(payload) 的 action 。action 中的 payload 是可選的，action 將其轉(zhuǎn)發(fā)給 Reducer。
當(dāng)reducer 收到action 時，通過 swithc...case 語法比較 action 中type 。 匹配時，更新對應(yīng)的內(nèi)容返回新的 state 。
當(dāng)Redux 狀態(tài)更改時，連接到Redux 的組件將接收新的狀態(tài)作為props 。當(dāng)組件接收到這些props 時，它將進(jìn)入更新階段并重新渲染 UI。
Redux 循環(huán)細(xì)節(jié)
讓我們詳細(xì)看看整個redux 循環(huán)細(xì)節(jié)。
Action : Action 只是一個簡單的json對象，type 和有payload 作為鍵。type 是必須要有的，payload 是可選的。下面是一個 action 的例子。
// action
{
type:"SEND_EMAIL",
payload: data
};
Action Creators ：這些是創(chuàng)建Actions 的函數(shù)，因此我們在派發(fā)action 時不必在組件中手動編寫每個 action 。 以下是 action creator 的示例。
// action creator
export function sendEamil(data) {
return { type:"SEND_EMAIL", payload: data};
}
Reducers ：Reducers 是純函數(shù)，它將 action 和當(dāng)前 state 作為參數(shù),計算必要的邏輯并返回一個新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 進(jìn)行連接
mapStateToProps ：此函數(shù)將state 映射到 props 上，因此只要state 發(fā)生變化，新 state 會重新映射到 props 。 這是訂閱store 的方式。
mapDispatchToProps ：此函數(shù)用于將 action creators 綁定到你的props 。以便我們可以在第12 行中使用This . props.actions.sendemail() 來派發(fā)一個動作。
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 是應(yīng)用程序中路由的庫。 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 組件用于在應(yīng)用程序中創(chuàng)建鏈接。 它將在HTML中渲染為錨標(biāo)記。
NavLink 是突出顯示當(dāng)前活動鏈接的特殊鏈接。
Switch 不是必需的，但在組合路由時很有用。
Redirect 用于強制路由重定向
下面是組件中的Link 、NavLink 和Redirect 的例子
// normal link
React
// you can redirect to this url
以下是 react router 組件的示例。 如果你查看下面的示例，我們將匹配路徑并使用Switch 和Route 呈現(xiàn)相應(yīng)的組件。
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 中，我們通常有一個組件樹。如果任何一個組件發(fā)生錯誤，它將破壞整個組件樹。沒有辦法捕捉這些錯誤，我們可以用錯誤邊界優(yōu)雅地處理這些錯誤。
錯誤邊界有兩個作用
如果發(fā)生錯誤，顯示回退UI
記錄錯誤
下面是ErrorBoundary 類的一個例子。如果類實現(xiàn)了 getDerivedStateFromError 或componentDidCatch 這兩個生命周期方法的任何一下，，那么這個類就會成為ErrorBoundary 。前者返回{hasError: true} 來呈現(xiàn)回退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;
}
}
以下是我們?nèi)绾卧谄渲幸粋€組件中使用ErrorBoundary。使用ErrorBoundary類包裹 ToDoForm 和ToDoList 。 如果這些組件中發(fā)生任何錯誤，我們會記錄錯誤并顯示回退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中添加額外的節(jié)點會很煩人。使用 Fragments ，我們不需要在DOM中添加額外的節(jié)點。我們只需要用 React.Fragment 或才簡寫 <> 來包裹內(nèi)容就行了。如下 所示：
// Without Fragments
return (
)
// With Fragments
return (
)
// shorthand notation Fragments
return (
<>
什么是傳送門(Portals)
默認(rèn)情況下，所有子組件都在UI上呈現(xiàn)，具體取決于組件層次結(jié)構(gòu)。Portal 提供了一種將子節(jié)點渲染到存在于父組件以外的 DOM 節(jié)點的優(yōu)秀的方案。
這里有一個例子。默認(rèn)情況下，父組件在DOM層次結(jié)構(gòu)中有子組件。
我們可以將 children 組件移出parent 組件并將其附加 id 為 someid 的 Dom 節(jié)點下。
首先，獲取 id 為 someid，我們在constrcutorand中創(chuàng)建一個元素div，將child附加到componentDidMount中的someRoot。 最后，我們在ReactDOM.createPortal（this.props.childen），domnode的幫助下將子節(jié)點傳遞給該特定DOM節(jié)點。
首先，先獲取 id 為someid DOM元素，接著在構(gòu)造函數(shù)中創(chuàng)建一個元素div，在 componentDidMount 方法中將 someRoot 放到 div 中 。 最后，通過 ReactDOM.createPortal(this.props.childen), domnode) 將 children 傳遞到對應(yīng)的節(jié)點下。
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中的新功能。 請記住，我們不能在函數(shù)組件中使用state ，因為它們不是類組件。Hooks 讓我們在函數(shù)組件中可以使用state 和其他功能。
目前沒有重大變化，我們不必放棄類組件。
Hook 不會影響你對 React 概念的理解。 恰恰相反，Hook 為已知的 React 概念提供了更直接的 API：props， state，context，refs 以及生命周期。稍后我們將看到，Hook 還提供了一種更強大的方式來組合他們。
我們可以使用一些鉤子，例如useState，useEffect，useContext，useReducer等。
下面是 Hooks 的基本規(guī)則
Hooks 應(yīng)該在外層使用，不應(yīng)該在循環(huán)，條件或嵌套函數(shù)中使用
Hooks 應(yīng)該只在函數(shù)組件中使用。
讓我們看一個例子來理解 hooks。 這是一個函數(shù)組件，它采用props 并在UI上顯示這些props 。 在useState 鉤子的幫助下，我們將這個函數(shù)組件轉(zhuǎn)換為有狀態(tài)組件。 首先，我們在第5行定義狀態(tài)，這相當(dāng)于
constructor(props) {
super(props);
this.state = {
name:"myname", age:10, address:"0000 one street"
}
}
useState 返回兩個項，一個是user ，另一個是setUser 函數(shù)。 user 是一個可以在沒有 this 關(guān)鍵字的情況下直接使用的對象，setUser 是一個可以用來設(shè)置用戶點擊第21 行按鈕的狀態(tài)的函數(shù)，該函數(shù)等效于以下內(nèi)容。
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 }
如何提高性能
我們可以通過多種方式提高應(yīng)用性能，以下這些比較重要：
適當(dāng)?shù)厥褂?b>shouldComponentUpdate生命周期方法。 它避免了子組件的不必要的渲染。 如果樹中有100個組件，則不重新渲染整個組件樹來提高應(yīng)用程序性能。
使用create-react-app 來構(gòu)建項目，這會創(chuàng)建整個項目結(jié)構(gòu)，并進(jìn)行大量優(yōu)化。
不可變性是提高性能的關(guān)鍵。不要對數(shù)據(jù)進(jìn)行修改，而是始終在現(xiàn)有集合的基礎(chǔ)上創(chuàng)建新的集合，以保持盡可能少的復(fù)制，從而提高性能。
在顯示列表或表格時始終使用 Keys ，這會讓 React 的更新速度更快
代碼分離是將代碼插入到多帶帶的文件中，只加載模塊或部分所需的文件的技術(shù)。
如何在重新加載頁面時保留數(shù)據(jù)
單頁應(yīng)用程序首先在DOM中加載index.html ，然后在用戶瀏覽頁面時加載內(nèi)容，或者從同一index.html 中的后端API獲取任何數(shù)據(jù)。
如果通過點擊瀏覽器中的重新加載按鈕重新加載頁面index.html ，整個React應(yīng)用程序?qū)⒅匦录虞d，我們將丟失應(yīng)用程序的狀態(tài)。 如何保留應(yīng)用狀態(tài)？
每當(dāng)重新加載應(yīng)用程序時，我們使用瀏覽器localstorage 來保存應(yīng)用程序的狀態(tài)。我們將整個存儲數(shù)據(jù)保存在localstorage 中，每當(dāng)有頁面刷新或重新加載時，我們從localstorage 加載狀態(tài)。
如何在React進(jìn)行API調(diào)用
我們使用redux-thunk 在React中調(diào)用API。因為reduce 是純函數(shù)，所以沒有副作用，比如調(diào)用API。
因此，我們必須使用redux-thunk 從 action creators 那里進(jìn)行 API 調(diào)用。Action creator 派發(fā)一個action，將來自API的數(shù)據(jù)放入action 的 payload 中。Reducers 接收我們在上面的redux 循環(huán)中討論的數(shù)據(jù)，其余的過程也是相同的。
redux-thunk是一個中間件。一旦它被引入到項目中，每次派發(fā)一個action 時，都會通過thunk 傳遞。如果它是一個函數(shù)，它只是等待函數(shù)處理并返回響應(yīng)。如果它不是一個函數(shù)，它只是正常處理。
這里有一個例子。sendEmailAPI 是從組件中調(diào)用的函數(shù)，它接受一個數(shù)據(jù)并返回一個函數(shù)，其中dispatch 作為參數(shù)。我們使用redux-thunk 調(diào)用API apiservice ，并等待收到響應(yīng)。一旦接收到響應(yīng)，我們就使用payload 派發(fā)一個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));
});
}
}
總結(jié)
要想有把握的面試，必須充分了解上述所有主題。 即使你目前正在使用React，理解這些概念也能增強你在職場中信心。
代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug。
交流
這篇來來回回整理了快五天，大家給個贊唄！
干貨系列文章匯總?cè)缦?，覺得不錯點個Star，歡迎 加群 互相學(xué)習(xí)。
https://github.com/qq44924588...
我是小智，公眾號「大遷世界」作者，對前端技術(shù)保持學(xué)習(xí)愛好者。我會經(jīng)常分享自己所學(xué)所看的干貨 ，在進(jìn)階的路上，共勉！
關(guān)注公眾號，后臺回復(fù)福利 ，即可看到福利，你懂的。
