日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
一名 Vue 程序員總結(jié)的 React 基礎(chǔ)

 一、生命周期

React 生命周期圖解[1]

我已經(jīng)把這張圖印在腦子里面了，沒事就自己畫畫，中間發(fā)散一些自己的思考。u1s1，不知道 react 的生命周期命名為什么要怎么長(zhǎng)~~~， 小程序，vue 的都比較短。畢竟使用的頻率還是很高的，Hooks 除外。

公司主營(yíng)業(yè)務(wù)：成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出白云免費(fèi)做網(wǎng)站回饋大家。

image.png

1、constructor

constructor 是類通用的構(gòu)造函數(shù)，常用于初始化，算是生命周期的一環(huán)。React 后來的版本中類組件也可以不寫。

注意：在構(gòu)造函數(shù)中使用時(shí)，super 關(guān)鍵字將單獨(dú)出現(xiàn)，并且必須在使用 this 關(guān)鍵字之前使用。super 關(guān)鍵字也可以用來調(diào)用父對(duì)象上的函數(shù)。MDN 說明[2]

 
 
 
 
      
  
  
  
  1. class JJTest extends React.Component {  
    2.   
  
  
  
  2.   // constructor 寫法  
    3.   
  
  
  
  3.   constructor(props) {  
    4.   
  
  
  
  4.     super(props);  
    5.   
  
  
  
  5.     this.state = {  
    6.   
  
  
  
  6.       count: 0,  
    7.   
  
  
  
  7.     };  
    8.   
  
  
  
  8.     thisthis.handleClick = this.handleClick.bind(this);  
    9.   
  
  
  
  9.   }  
    10.   
  
  
  
  10.   // 直接聲明  
    11.   
  
  
  
  11.   state = {  
    12.   
  
  
  
  12.     count: 0,  
    13.   
  
  
  
  13.   };  
    14.   
  
  
  
  14. } 
    15.

2、getDerivedStateFromProps

觸發(fā)時(shí)機(jī)：state 變化、props 變化、forceUpdate，如上圖。

這是一個(gè)靜態(tài)方法, 是一個(gè)和組件自身"不相關(guān)"的角色. 在這個(gè)靜態(tài)方法中, 除了兩個(gè)默認(rèn)的位置參數(shù) nextProps 和 currentState 以外, 你無法訪問任何組件上的數(shù)據(jù)。

 
 
 
 
      
  
  
  
  1. // 初始化/更新時(shí)調(diào)用  
    2.   
  
  
  
  2. static getDerivedStateFromProps(nextProps, currentState) {  
    3.   
  
  
  
  3.   console.log(nextProps, currentState, "getDerivedStateFromProps方法執(zhí)行");  
    4.   
  
  
  
  4.   // 返回值是對(duì)currentState進(jìn)行修改  
    5.   
  
  
  
  5.   return { 
    6.   
  
  
  
  6.     fatherText: nextProps.text,  
    7.   
  
  
  
  7.   };  
    8.   
  
  
  
  8. } 
    9.

3、render

render 函數(shù)返回的 JSX 結(jié)構(gòu)，用于描述具體的渲染內(nèi)容， render 被調(diào)用時(shí)，它會(huì)檢查 this.props 和 this.state 的變化并返回以下類型之一：

  •  React 元素。通常通過 JSX 創(chuàng)建。例如，
  •  會(huì)被 React 渲染為 DOM 節(jié)點(diǎn)， 會(huì)被 React 渲染為自定義組件，無論是
  •  還是 均為 React 元素。
  •  數(shù)組或 fragments。使得 render 方法可以返回多個(gè)元素。欲了解更多詳細(xì)信息，請(qǐng)參閱 fragments 文檔。
  •  Portals?？梢凿秩咀庸?jié)點(diǎn)到不同的 DOM 子樹中。欲了解更多詳細(xì)信息，請(qǐng)參閱有關(guān) portals 的文檔
  •  字符串或數(shù)值類型。它們?cè)?DOM 中會(huì)被渲染為文本節(jié)點(diǎn)
  •  布爾類型或 null。什么都不渲染。（主要用于支持返回 test && 的模式，其中 test 為布爾類型。)

注意：如果 shouldComponentUpdate() 返回 false，則不會(huì)調(diào)用 render()。

Hooks 不需要寫 render 函數(shù)。要注意的一點(diǎn)是，即使 Hooks 不需要寫 render， 沒有用到 React.xxx，組件內(nèi)還是要import React from "react";的（至于原因，后續(xù)深入 Hooks 學(xué)一下，大哥們也可以解釋下）。React 官方也說了，后續(xù)的版本會(huì)優(yōu)化掉這一點(diǎn)。

4、componentDidMount

主要用于組件加載完成時(shí)做某些操作，比如發(fā)起網(wǎng)絡(luò)請(qǐng)求或者綁定事件。當(dāng)做 vue 的 mounted 用就行了，這里需要注意的是：

componentDidMount() 里直接調(diào)用 setState()。它將觸發(fā)額外渲染,也就是兩次 render，不過問題不大，主要還是理解。

5、shouldComponentUpdate

該方法通過返回 true 或者 false 來確定是否需要觸發(fā)新的渲染。因?yàn)殇秩居|發(fā)最后一道關(guān)卡，所以也是性能優(yōu)化的必爭(zhēng)之地。通過添加判斷條件來阻止不必要的渲染。注意：首次渲染或使用 forceUpdate() 時(shí)不會(huì)調(diào)用該方法。

React 官方提供了一個(gè)通用的優(yōu)化方案，也就是 PureComponent。PureComponent 的核心原理就是默認(rèn)實(shí)現(xiàn)了 shouldComponentUpdate 函數(shù)，在這個(gè)函數(shù)中對(duì) props 和 state 進(jìn)行淺比較，用來判斷是否觸發(fā)更新。

當(dāng)然 PureComponent 也是有缺點(diǎn)的，使用的時(shí)候一定要注意：由于進(jìn)行的是淺比較，可能由于深層的數(shù)據(jù)不一致導(dǎo)致而產(chǎn)生錯(cuò)誤的否定判斷，從而導(dǎo)致頁 面得不到更新。不適合使用在含有多層嵌套對(duì)象的 state 和 prop 中。

 
 
 
 
      
  
  
  
  1. shouldComponentUpdate(nextProps, nextState) {  
    2.   
  
  
  
  2.   // 淺比較僅比較值與引用，并不會(huì)對(duì) Object 中的每一項(xiàng)值進(jìn)行比較  
    3.   
  
  
  
  3.   if (shadowEqual(nextProps, this.props) || shadowEqual(nextState, this.state) ) {  
    4.   
  
  
  
  4.     return true  
    5.   
  
  
  
  5.   }  
    6.   
  
  
  
  6.   return false  
    7.   
  
  
  
  7. } 
    8.

6、getSnapshotBeforeUpdate

在 DOM 更新前被調(diào)用，返回值將作為 componentDidUpdate 的第三個(gè)參數(shù)。

 
 
 
 
      
  
  
  
  1. getSnapshotBeforeUpdate(prevProps, prevState) {  
    2.   
  
  
  
  2.     console.log("getSnapshotBeforeUpdate方法執(zhí)行");  
    3.   
  
  
  
  3.     return "componentDidUpdated的第三個(gè)參數(shù)";  
    4.   
  
  
  
  4. } 
    5.

7、componentDidUpdate

首次渲染不會(huì)執(zhí)行此方法。可以使用 setState，會(huì)觸發(fā)重渲染，但一定要小心使用，避免死循環(huán)

 
 
 
 
      
  
  
  
  1. componentDidUpdate(preProps, preState, valueFromSnapshot) {  
    2.   
  
  
  
  2.    console.log("componentDidUpdate方法執(zhí)行");  
    3.   
  
  
  
  3.    console.log("從 getSnapshotBeforeUpdate 獲取到的值是", valueFromSnapshot);  
    4.   
  
  
  
  4.  } 
    5.

8、componentWillUnmount

主要用于一些事件的解綁，資源清理等，比如取消定時(shí)器，取消訂閱事件

小結(jié)

生命周期一定要好好理解，一定要?jiǎng)邮謱?，看一下每種情況下，生命周期的執(zhí)行結(jié)果。上述代碼中在React-TypeScript 倉(cāng)庫[3]中都有，可以 clone 下來跑跑看，或者直接訪問俊劫學(xué)習(xí)系統(tǒng) LifeCycle[4]。還有些其他的生命周期，componentDidCatch, UNSAFE_componentWillMount()等等，簡(jiǎn)單了解下就行。

二、JSX

1、循環(huán)列表

jsx 中一般用 map 來渲染列表循環(huán)類的，vue 中直接在 template 中寫 v-for 即可

 
 
 
 
      
  
  
  
  1. {  
    2.   
  
  
  
  2.   list.map((item, index) => {  
    3.   
  
  
  
  3.     return ;  
    4.   
  
  
  
  4.   });  
    5.   
  
  
  
  5. } 
    6.

2、樣式

(1)className

單獨(dú)寫一個(gè) class 是可以的，動(dòng)態(tài)拼接需要借助 classnames[5] 庫

 
 
 
 
      
  
  
  
  1. import style from './style.css'  
    2.   
  
  
  
  2.  
    3.

(2)style

需要注意的：兩個(gè)括號(hào)（樣式被當(dāng)做一個(gè)對(duì)象來解析），類似-連接的樣式屬性需要轉(zhuǎn)換成小駝峰寫法。

 
 
 
 
      
  
  
  
  1. 樣式
 

(3)css 隔離

u1s1，css 隔離這塊還是 vue 的 scoped 好用

  •  css-module

create-react-app 中內(nèi)置了使用 CSS Modules 的配置，和 vue 的 scoped 原理相似，都是在生成的 class 后面加了 hash 值

 
 
 
 
      
  
  
  
  1. // style.module.css  
    2.   
  
  
  
  2. .text {  
    3.   
  
  
  
  3.     color: blue  
    4.   
  
  
  
  4. }  
    5.   
  
  
  
  5. // app.tsx  
    6.   
  
  
  
  6. import s from "./style.module.css";  
    7.   
  
  
  
  7. class App extends Component { 
    8.   
  
  
  
  8.    render() {  
    9.   
  
  
  
  9.     return css-module text
;  
  •   }  
  • }  
  • // 編譯后  
  • .text_3FI3s6uz {  
  •     color: blue;  
  • } 
    •  styled-components

    目前社區(qū)里最受歡迎的一款 CSS in JS 方案，個(gè)人感覺有點(diǎn)別扭，不太喜歡

     
 
 
 
        
  
  
  
    1. //引入styled-components  
      2.   
  
  
  
    2. import styled from "styled-components";  
      3.   
  
  
  
    3. //修改了div的樣式  
      4.   
  
  
  
    4. const Title = styled.div`  
      5.   
  
  
  
    5.   font-size: 30px;  
      6.   
  
  
  
    6.   color: red;  
      7.   
  
  
  
    7. `;  
      8.   
  
  
  
    8. class App extends Component { 
      9.   
  
  
  
    9.   render() {  
      10.   
  
  
  
    10.     return (  
      11.   
  
  
  
    11.       <>  
      12.   
  
  
  
    12.         CSS in JS 方案  
      13.   
  
  
  
    13.         
      14.   
  
  
  
    14.     );  
      15.   
  
  
  
    15.   }  
      16.   
  
  
  
    16. } 
      17.

    3、一個(gè) JSX

    剛開始從 vue 轉(zhuǎn)過來會(huì)有些不適應(yīng)（話說有多少人直接在 vue 里面寫 JSX 的），之前用的都是 Vue Sfc 寫法，當(dāng)然多寫寫就熟悉了。至于 React 采用 JSX 的優(yōu)劣勢(shì)，評(píng)論區(qū)各抒己見哈。

    代碼對(duì)應(yīng)頁面預(yù)覽[6]

    image.png

     
 
 
 
        
  
  
  
    1. render() {  
      2.   
  
  
  
    2.     return (  
      3.   
  
  
  
    3.       <>  
      4.   
  
  
  
    4.           
      5.   
  
  
  
    5.           
      6.   
  
  
  
    6.             
      7.   
  
  
  
    7.             修改父組件文本內(nèi)容  
      8.   
  
  
  
    8.             
      9.   
  
  
  
    9.             
      10.   
  
  
  
    10.             {this.state.hideChild ? "顯示" : "隱藏"}子組件  
      11.   
  
  
  
    11.             
      12.   
  
  
  
    12.           {this.state.hideChild ? null : (  
      13.   
  
  
  
    13.               
      14.   
  
  
  
    14.           )}  
      15.   
  
  
  
    15.         
      
  •         
      
  •             
  •           
  •             src={this.state.lifeCycle}  
  •             title="navigation"  
  •             width="100%"  
  •             height="600px"  
  •             onLoad={this.onLoading}  
  •             onError={this.onLoading}  
  •           >  
  •         
    •   
  •         
  •     );  
  •   } 

    • 三、基礎(chǔ)組件

    組件這塊，個(gè)人感覺和 vue 差別還是比較大的，顆粒度更細(xì)致，當(dāng)然也增加了一定難度。這里就簡(jiǎn)單例舉一個(gè)TS版本的，帶 Icon 的標(biāo)題組件

     
 
 
 
        
  
  
  
    1. import cn from "classnames";  
      2.   
  
  
  
    2. import React from "react";  
      3.   
  
  
  
    3. import "./style/index.less";  
      4.   
  
  
  
    4. import { Icon,IIconProps } from "zent";  
      5.   
  
  
  
    5. interface IProps {  
      6.   
  
  
  
    6.   title: string;  
      7.   
  
  
  
    7.   iconType?: IIconProps['type'];  
      8.   
  
  
  
    8.   isShowIcon?: boolean;  
      9.   
  
  
  
    9.   iconClassName?: string;  
      10.   
  
  
  
    10.   titleClassName?: string; 
      11.   
  
  
  
    11.  }  
      12.   
  
  
  
    12. export const ContentTitle: React.FC = (props) => {  
      13.   
  
  
  
    13.   const { title, iconType = 'youzan', isShowIcon = false , iconClassName, titleClassName, ...popProps } = props; 
      14.   
  
  
  
    14.   return (  
      15.   
  
  
  
    15.       
      16.   
  
  
  
    16.       {title}  
      17.   
  
  
  
    17.       {isShowIcon &&   
  
  
  
    18.         className={cn("content-title__icon", iconClassName)}  
      19.   
  
  
  
    19.         {...popProps} 
      20.   
  
  
  
    20.         type={iconType}  
      21.   
  
  
  
    21.       />}  
      22.   
  
  
  
    22.     
      
  •   );  
  • };  
  • export default ContentTitle; 

    • 四、高階組件 HOC

    1、含義

    和 vue mixins 相同，都是為了解決代碼復(fù)用的問題，但 react 中已經(jīng)廢棄 mixins，vue 中也不推薦使用。主要是會(huì)帶來命名沖突，相互依賴，不方便維護(hù)等一些缺點(diǎn)。

    高階組件其實(shí)就是處理 react 組件的函數(shù)，簡(jiǎn)單理解就是和 ES6 中提供的 export/import 作用相似，不同點(diǎn)在于：高階組件會(huì)進(jìn)行加工后再導(dǎo)出你需要的東西。類似于方程式：y = ax + b， x 是入口（組件），會(huì)根據(jù) a 和 b 進(jìn)行計(jì)算，得到最終的 y（處理后的組件） 給到你用。

    2、Demo

    官網(wǎng)的實(shí)現(xiàn) Demo: 高階組件[7]

    一個(gè)簡(jiǎn)單的高階組件(實(shí)現(xiàn)有兩種方式：屬性代理和反向繼承)：

     
 
 
 
        
  
  
  
    1. // 屬性代理: 組件屬性的一些修改  
      2.   
  
  
  
    2. const JJHOC = (WrappedComponent) => {  
      3.   
  
  
  
    3.   return class NewComponent extends React.Component {  
      4.   
  
  
  
    4.     render() {  
      5.   
  
  
  
    5.       const newProps = { type: "HOC" };  
      6.   
  
  
  
    6.       return ;  
      7.   
  
  
  
    7.     }  
      8.   
  
  
  
    8.   };  
      9.   
  
  
  
    9. }; 
      10.   
  
  
  
    10.  // 反向繼承: 在render() 方法中返回 super.render() 方法  
      11.   
  
  
  
    11. const JJHOC = (WrappedComponent) => {  
      12.   
  
  
  
    12.   return class NewComponent extends WrappedComponent {  
      13.   
  
  
  
    13.     render() {  
      14.   
  
  
  
    14.       return super.render();  
      15.   
  
  
  
    15.     }  
      16.   
  
  
  
    16.   };  
      17.   
  
  
  
    17. }; 
      18.

    3、常用 HOC

    •  react-router withRouter: 可獲取 history，一些路由信息
    •  redux connect 連接 React 組件與 Redux store，給組件掛載 dispatch 方法。

    五、組件通信

    1、props

    和 vue 不同的是，react props 傳值可以直接寫，不需要聲明。在 props 上掛載 function，就相當(dāng)于是 vue 的$emit。同樣需要注意的是子組件不可以修改 props 的值

     
 
 
 
        
  
  
  
    1. import React from "react";  
      2.   
  
  
  
    2. function Child(props) {  
      3.   
  
  
  
    3.   const sendMsg = (msg) => {  
      4.   
  
  
  
    4.     props.onClick("子組件的消息");  
      5.   
  
  
  
    5.   };  
      6.   
  
  
  
    6.   return (  
      7.   
  
  
  
    7.     
       
      8.   
  
  
  
    8.        
      子組件標(biāo)題：{props.title}
        
      9.   
  
  
  
    9.        sendMsg("子組件消息")}> 子傳父   
      10.   
  
  
  
    10.     
      
  •   );  
  • }  
  • function Father() { 
  •   const onClick = (msg) => { 
  •     console.log(`父組件接收：${msg}`);  
  •   };  
  •   return (  
  •     
      
  •         
  •     
    •   
  •   );  
  • }  
  • export default Father; 

    • 2、context

    React Context 官網(wǎng)說明[8]，跨組件傳值。創(chuàng)建了一個(gè)上下文，同 context 內(nèi)的組件都可以 通過 Provider 配合 value 使用數(shù)據(jù)

     
 
 
 
        
  
  
  
    1. import * as React from "react";  
      2.   
  
  
  
    2. import { Button } from "zent";  
      3.   
  
  
  
    3. // Context 可以讓我們無須明確地傳遍每一個(gè)組件，就能將值深入傳遞進(jìn)組件樹。  
      4.   
  
  
  
    4. // 為當(dāng)前的 theme 創(chuàng)建一個(gè) context（“primary”為默認(rèn)值）。  
      5.   
  
  
  
    5. const ThemeContext = React.createContext("primary");  
      6.   
  
  
  
    6. export default class App extends React.Component {  
      7.   
  
  
  
    7.   render() { 
      8.   
  
  
  
    8.     // 使用一個(gè) Provider 來將當(dāng)前的 theme 傳遞給以下的組件樹。  
      9.   
  
  
  
    9.     // 無論多深，任何組件都能讀取這個(gè)值。  
      10.   
  
  
  
    10.     // 在這個(gè)例子中，我們將 danger 作為當(dāng)前的值傳遞下去。  
      11.   
  
  
  
    11.     return (  
      12.   
  
  
  
    12.         
      13.   
  
  
  
    13.           
      14.   
  
  
  
    14.         
      15.   
  
  
  
    15.     );  
      16.   
  
  
  
    16.   }  
      17.   
  
  
  
    17. }  
      18.   
  
  
  
    18. // 中間的組件再也不必指明往下傳遞 theme 了。  
      19.   
  
  
  
    19. function Toolbar() {  
      20.   
  
  
  
    20.   return (  
      21.   
  
  
  
    21.     
        
      22.   
  
  
  
    22.         
      23.   
  
  
  
    23.     
      
  •   );  
  • }  
  • class ThemedButton extends React.Component {  
  •   // 指定 contextType 讀取當(dāng)前的 theme context。  
  •   // React 會(huì)往上找到最近的 theme Provider，然后使用它的值。  
  •   // 在這個(gè)例子中，當(dāng)前的 theme 值為 “danger”。  
  •   static contextType = ThemeContext;  
  •   render() {  
  •     return context測(cè)試;  
  •   }  
  • } 

    • 3、Redux

    Redux 中文文檔[9]

    redux 的三大核心：

    •  action：action 可以說是一個(gè)動(dòng)作，用來描述將要觸發(fā)的事件。
    •  state：?jiǎn)我粩?shù)據(jù)源，用來存儲(chǔ)我們的數(shù)據(jù)。
    •  reducer：通過觸發(fā)的 action 事件來改變 state 的值。

    不一定非要用，很多項(xiàng)目 context 就已經(jīng)夠用了

    （1）掛載

    使用 createStore 創(chuàng)建一個(gè) store 并通過 Provider 把它放到容器組件中

     
 
 
 
        
  
  
  
    1. // index.js  
      2.   
  
  
  
    2. const store = createStore(appReducer);  
      3.   
  
  
  
    3. ReactDOM.render(  
      4.   
  
  
  
    4.     
      5.   
  
  
  
    5.       
      6.   
  
  
  
    6.   ,  
      7.   
  
  
  
    7.   document.getElementById("root"); 
      8.   
  
  
  
    8. ); 
      9.

    （2）創(chuàng)建修改的方法

    和 vuex 相似，都是通過 action 來修改數(shù)據(jù)

     
 
 
 
        
  
  
  
    1. // action.js  
      2.   
  
  
  
    2. export const addConst = (payload) => {  
      3.   
  
  
  
    3.   type: "ADD_CONST",  
      4.   
  
  
  
    4. }  
      5.   
  
  
  
    5. export const minusConst = (payload) => {  
      6.   
  
  
  
    6.  type: "MINUS_CONST",  
      7.   
  
  
  
    7. } 
      8.

    （3）創(chuàng)建一個(gè) store 集合

    當(dāng) dispatch 觸發(fā)相應(yīng)的方法，執(zhí)行對(duì)應(yīng)的操作，修改 store 數(shù)據(jù)。

     
 
 
 
        
  
  
  
    1. // appReducer.js  
      2.   
  
  
  
    2. const initialState = { count: 0 };  
      3.   
  
  
  
    3. const reducer = (state = initialState, action) => {  
      4.   
  
  
  
    4.   switch (action.type) { 
      5.   
  
  
  
    5.     case "ADD_CONST":  
      6.   
  
  
  
    6.       return { count: count + 1 };  
      7.   
  
  
  
    7.     case "MINUS_CONST":  
      8.   
  
  
  
    8.       return { count: count - 1 };  
      9.   
  
  
  
    9.     default:  
      10.   
  
  
  
    10.       return state;  
      11.   
  
  
  
    11.   }  
      12.   
  
  
  
    12. }; 
      13.   
  
  
  
    13. export default reducer; 
      14.

    （4）組件中 redux 使用姿勢(shì)

     
 
 
 
        
  
  
  
    1. import React from "react";  
      2.   
  
  
  
    2. import { connect } from "react-redux";  
      3.   
  
  
  
    3. const ReduxDemo: React.FC = (props) => {  
      4.   
  
  
  
    4.   const addCount = () => {  
      5.   
  
  
  
    5.     const { dispatch } = props;  
      6.   
  
  
  
    6.     dispatch({ 
      7.   
  
  
  
    7.        type: "ADD_CONST", 
      8.   
  
  
  
    8.     });  
      9.   
  
  
  
    9.   };  
      10.   
  
  
  
    10.   const minusCount = () => {  
      11.   
  
  
  
    11.     const { dispatch } = props;  
      12.   
  
  
  
    12.     dispatch({  
      13.   
  
  
  
    13.       type: "MINUS_CONST",  
      14.   
  
  
  
    14.     });  
      15.   
  
  
  
    15.   };  
      16.   
  
  
  
    16.   return (  
      17.   
  
  
  
    17.     
        
      18.   
  
  
  
    18.       加  
      19.   
  
  
  
    19.       減  
      20.   
  
  
  
    20.       
      {props.state}
        
      21.   
  
  
  
    21.     
      
  •   );  
  • };  
  • const mapStateToProps = (state) => {  
  •   return {  
  •     count: state.count,  
  •   };  
  • };  
  • export default connect(mapStateToProps)(ReduxDemo); 

    • 六、組件校驗(yàn)

    React 官網(wǎng) 使用 PropTypes 進(jìn)行類型檢查[10] react props 不是必須聲明的，但是如果項(xiàng)目規(guī)范起來，就需要在 propTypes 中聲明 props 類型，注意需要引入prop-types庫

    不過現(xiàn)在更多的是通過 typescript 來校驗(yàn)類型了，開發(fā)階段就能發(fā)現(xiàn)問題。

     
 
 
 
        
  
  
  
    1. import * as React from "react";  
      2.   
  
  
  
    2. import PropTypes from "prop-types";  
      3.   
  
  
  
    3. interface IProps {  
      4.   
  
  
  
    4.   name: string;  
      5.   
  
  
  
    5. }  
      6.   
  
  
  
    6. const PropsDemo: React.FC = ({ name }) => {  
      7.   
  
  
  
    7.   return 
      Hello, {name}
      ;  
      8.   
  
  
  
    8. };  
      9.   
  
  
  
    9. PropsDemo.propTypes = {  
      10.   
  
  
  
    10.   name: PropTypes.string,  
      11.   
  
  
  
    11. }; 
      12.

    七、React Router

    •  React Router 官網(wǎng)[11] 英文版
    •  React Router 中文文檔[12] 感覺寫的不是很清楚

    1、注意

    •  react-router: 實(shí)現(xiàn)了路由的核心功能, react-router 3.x  版本還包括操作 dom 的方法,4.x 以上就沒有了。
    •  react-router-dom: 基于 react-router，加入了在瀏覽器運(yùn)行環(huán)境下的一些功能，例如：Link 組件，會(huì)渲染一個(gè) a 標(biāo)簽，Link 組件源碼 a 標(biāo)簽行; BrowserRouter 和 HashRouter 組件，前者使用 pushState 和 popState 事件構(gòu)建路由，后者使用 window.location.hash 和 hashchange 事件構(gòu)建路由。
    •  react-router-native: 基于 react-router，類似 react-router-dom，加入了 react-native 運(yùn)行環(huán)境下的一些功能

    2、一個(gè) Demo 

     
 
 
 
        
  
  
  
    1. import React, { Component } from "react";  
      2.   
  
  
  
    2. import Admin from "./pages/admin/admin";  
      3.   
  
  
  
    3. import Login from "./pages/login/Login";  
      4.   
  
  
  
    4. import { HashRouter, Route, Switch } from "react-router-dom";  
      5.   
  
  
  
    5. class App extends Component {  
      6.   
  
  
  
    6.   render() {  
      7.   
  
  
  
    7.     return (  
      8.   
  
  
  
    8.         
      9.   
  
  
  
    9.           
      10.   
  
  
  
    10.             
      11.   
  
  
  
    11.             
      12.   
  
  
  
    12.           
      13.   
  
  
  
    13.         
      14.   
  
  
  
    14.     );  
      15.   
  
  
  
    15.   }  
      16.   
  
  
  
    16. }  
      17.   
  
  
  
    17. export default App; 
      18.

    3、路由傳參

    （1）params

     
 
 
 
        
  
  
  
    1. // router  
      2.   
  
  
  
    2.   
      3.   
  
  
  
    3. // 傳參  
      4.   
  
  
  
    4. xxx  
      5.   
  
  
  
    5. this.props.history.push({pathname:`/path/${id}`});  
      6.   
  
  
  
    6. // 獲取  
      7.   
  
  
  
    7. this.props.match.params.id 
      8.

    （2）query

     
 
 
 
        
  
  
  
    1. // router  
      2.   
  
  
  
    2.   
      3.   
  
  
  
    3. // 傳參  
      4.   
  
  
  
    4. xxx  
      5.   
  
  
  
    5. this.props.history.push({pathname:"/query",query: { id : '789' }});  
      6.   
  
  
  
    6. // 獲取  
      7.   
  
  
  
    7. this.props.location.query.id 
      8.

    （3）Hooks

     
 
 
 
        
  
  
  
    1. // 跳轉(zhuǎn)  
      2.   
  
  
  
    2. let history = useHistory();  
      3.   
  
  
  
    3. history.push("/");  
      4.   
  
  
  
    4. // 獲取  
      5.   
  
  
  
    5. useLocation();  
      6.   
  
  
  
    6. useParams();  
      7.   
  
  
  
    7. useRouteMatch(); 
      8.

    4、exact 屬性

    exact 是 Route 下的一條屬性，一般而言，react 路由會(huì)匹配所有匹配到的路由組價(jià)，exact 能夠使得路由的匹配更嚴(yán)格一些。

    exact 的值為 bool 型，為 true 是表示嚴(yán)格匹配，為 false 時(shí)為正常匹配。

    如在 exact 為 true 時(shí)，’/link’與’/’是不匹配的，但是在 false 的情況下它們又是匹配的。

    八、總結(jié)

    學(xué)完生命周期，多練習(xí) JSX，配合 React Router 和 Redux 多寫寫組件，基本就能上手開發(fā)了。沒有過多的 API 需要學(xué)習(xí)，寫起來也比較自由。React 雖然生態(tài)強(qiáng)大，選著性比較多，但是這樣產(chǎn)生了一個(gè)問題：什么是 React 的最佳實(shí)踐？


    本文標(biāo)題：一名 Vue 程序員總結(jié)的 React 基礎(chǔ)
    本文地址：http://m.5511xx.com/article/djsoods.html