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

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
新手React開發(fā)人員容易做錯的5件事

請勿執(zhí)行的操作以及如何解決的方法，這部分內(nèi)容是針對React的新手開發(fā)人員提供的。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都做網(wǎng)站、網(wǎng)站建設、外貿(mào)營銷網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的周至網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

1. 忘記大寫React組件

考慮一下這段代碼，它創(chuàng)建一個簡單的div，其中包含父組件的標題。里面有一個子組件，其中包含帶有一些文本的div。

 
 
 
 
    
  
  
  
  
  1. class childComponent extends React.Component { 
    2. 
  
  
  
  
  2.   render() { 
    3. 
  
  
  
  
  3.     return ( 
    4. 
  
  
  
  
  4.        
    5. 
  
  
  
  
  5.         
    Child Component
     
    6. 
  
  
  
  
  6.       
 
  •     ); 
  •   } 
  • } 
  •  
  • class ParentComponent extends React.Component { 
  •   render() { 
  •     return ( 
  •        
  •         Parent Component 
  •          
  •       
    •  
  •     ); 
  •   } 
  • } 
  •  
  • export default ParentComponent; 

    • 您認為代碼運行時會出現(xiàn)什么?

    childComponent 未渲染。它去哪兒了?代碼編譯成功，終端也沒有錯誤。

    再次查看子組件的代碼。注意組件的名稱，你注意到什么不同了嗎?

    在瀏覽器中打開控制臺，瀏覽器控制臺警告的大小寫不正確

    事實證明，React將小寫組件視為DOM標記。如果你是React的新手，你可能已經(jīng)錯過了React文檔中的這個小細節(jié)。

    如果不了解這一點，初學者常常會陷入這樣的困惑：即他們的代碼編譯沒有任何錯誤，到底哪里出了問題?

    解決方法很簡單，大寫您的組件。

    2. 錯誤地調(diào)用收到的props

    要訪問由父組件傳入的prop，子組件必須確保它們調(diào)用了正確的prop名稱。

    還可以使用另一個變量名將Props傳遞給子組件?？紤]以下代碼片段：

     
 
 
 
      
  
  
  
  
    1. class ChildComponent extends React.Component { 
      2. 
  
  
  
  
    2.   render() { 
      3. 
  
  
  
  
    3.     const { randomString } = this.props; 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.     return ( 
      6. 
  
  
  
  
    6.        
      7. 
  
  
  
  
    7.         
      {randomString}
       
      8. 
  
  
  
  
    8.       
     
  •     ); 
  •   } 
  • } 
  •  
  • class ParentComponent extends React.Component { 
  •   render() { 
  •     const randomString = 'lorem ipsum'; 
  •      
  •     return ( 
  •        
  •         Parent Component 
  •          
  •       
    •  
  •     ); 
  •   } 
  • } 

    • 盡管此代碼可以編譯并運行無誤，但 ChildComponent內(nèi)不會渲染任何文本。

     
 
 
 
      
  
  
  
  
    1.  
      2.

    仔細看看這一行代碼，在 ParentComponent 中聲明的變量 randomString 作為名為 mainText 的prop傳遞給 ChildComponent。

    然而，ChildComponent 試圖從它收到的prop中訪問 randomString。由于它僅接收 mainText 作為prop，因此將導致未定義的值分配給在 ChildComponent 中聲明的 randomString。結果，其

    標記內(nèi)未呈現(xiàn)任何內(nèi)容。

    注意哪些prop被傳遞到您的組件中，并相應地訪問它們。這將在調(diào)試期間為您節(jié)省一些不必要的麻煩。

    3. 傳遞不正確的Props類型

    如果所接收的prop不是預期的類型，那么依賴于這些接收prop的組件可能會有不同的行為。

     
 
 
 
      
  
  
  
  
    1. class ChildComponent extends React.Component { 
      2. 
  
  
  
  
    2.   render() { 
      3. 
  
  
  
  
    3.     const { showIntro, showBody } = this.props; 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.     return ( 
      6. 
  
  
  
  
    6.        
      7. 
  
  
  
  
    7.         {showIntro && 
      Hello!
      } 
      8. 
  
  
  
  
    8.         {showBody && 
      Spot the mistake!
      } 
      9. 
  
  
  
  
    9.       
     
  •     ); 
  •   } 
  • } 

    • 考慮這個有兩個prop的 ChildComponent：showIntro 和 showBody。它顯示“你好!和“發(fā)現(xiàn)錯誤!”只有當showIntro 和 showBody 分別設置為 true 時才會這樣。

    ChildComponent 希望將兩個布爾值作為prop傳遞。如果在父組件中執(zhí)行類似的操作，會發(fā)生什么情況?

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.  
      4.

    在prop中使用了不同的引號和大括號。但是，它們的行為將不同。看看這個：

    前兩個 ChildComponent 都渲染了兩個

    標記，而最后一個 ChildComponent 沒有渲染。

    作為prop傳遞的 'false' 和 {'false'} 會導致無意中為 showIntro 和 showBody 分配了一個值為 false 的字符串，而不是布爾值 false。

    對于前兩個 ChildComponent，將 showIntro 和 showBody 都計算為 true。

    這是由于 && 運算符的隱式強制類型轉換。當 && 運算符檢查 showIntro 或 showBody(均為字符串)時，兩個字符串都將強制為 true。

    最后一個 ChildComponent 接收到布爾值 false，因此它沒有正確渲染任何內(nèi)容。

     
 
 
 
      
  
  
  
  
    1. console.log(`showIntro type: ${typeof showIntro}`); 
      2. 
  
  
  
  
    2. console.log(`showIntro evaluated to: ${showIntro && true}`); 
      3. 
  
  
  
  
    3. console.log(`showBody type: ${typeof showBody}`); 
      4. 
  
  
  
  
    4. console.log(`showBody evaluated to: ${showBody && true}`); 
      5.

    為了確認這一點，我們運行 console.log() 來檢查每個 ChildComponent 中prop的運行結果。

    正如這里所演示的，初學者在將prop傳遞給其他組件時能夠區(qū)分使用引號和花括號之間的區(qū)別是非常重要的。

    您可以使用引號來傳遞字符串文字。

     
 
 
 
      
  
  
  
  
    1.  // passing in a String 
      2.

    花括號用于傳遞JavaScript表達式。

     
 
 
 
      
  
  
  
  
    1.  // passing in a Number 
      2. 
  
  
  
  
    2.  // passing in a Boolean 
      3.

    以下是Reac文檔中的一些注意事項：

    將JavaScript表達式嵌入屬性中時，請勿在大括號周圍加上引號。您應該使用引號(用于字符串值)或大括號(用于表達式)，但不要在同一屬性中都使用引號。

    4. 在render()內(nèi)部調(diào)用setState()

    下圖無限循環(huán)錯誤消息

    盡管您的組件中沒有 componentWillUpdate() 或 componentWillUpdate()，您仍可能遇到此錯誤。當您在 render() 函數(shù)中調(diào)用 setState() 時也會發(fā)生此錯誤。

    為什么會這樣?每次調(diào)用 setState() 時，React將通過調(diào)用 render() 重新渲染。您的 render() 函數(shù)內(nèi)部是什么?setState()。你看到結果了嗎?一個無限循環(huán)。

    只需將 setState() 調(diào)用移到 render() 函數(shù)之外即可。

    如果在組件掛載后必須初始化狀態(tài)(也許是從API端點提取數(shù)據(jù))，請在 componentDidMoun() 中進行。

    如果可以在組件掛載之前初始化狀態(tài)，也可以使用構造函數(shù)來完成。

    5. setState()的異步性

    在調(diào)試時，通常使用 console.log() 打印值。但是，當代碼異步運行時，這不能很好地工作。

     
 
 
 
      
  
  
  
  
    1. handleCounterIncrement = () => { 
      2. 
  
  
  
  
    2.   const { counter } = this.state; 
      3. 
  
  
  
  
    3.   console.log(`Before update: ${counter}`); 
      4. 
  
  
  
  
    4.   this.setState({ counter: counter + 1 }); 
      5. 
  
  
  
  
    5.   console.log(`After update: ${counter}`); 
      6. 
  
  
  
  
    6. }; 
      7.

    你以前試過這樣做嗎?壞消息——setState() 調(diào)用是異步的。不能保證給定的代碼將按順序執(zhí)行。它可能導致如下輸出：

    在執(zhí)行 setState() 之前執(zhí)行了兩個 console.log() 調(diào)用。因此，它兩次打印前一個狀態(tài)的值。

    如果希望在調(diào)用 setState() 之前和之后檢查狀態(tài)的值，請在 setState() 中將回調(diào)作為第二個參數(shù)傳遞。

     
 
 
 
      
  
  
  
  
    1. handleCounterIncrement = () => { 
      2. 
  
  
  
  
    2.   const { counter } = this.state; 
      3. 
  
  
  
  
    3.   console.log(`before update: ${counter}`); 
      4. 
  
  
  
  
    4.   this.setState({ counter: counter + 1 }, () => { 
      5. 
  
  
  
  
    5.     console.log(`after update: ${this.state.counter}`); 
      6. 
  
  
  
  
    6.   }); 
      7. 
  
  
  
  
    7. }; 
      8.

    回調(diào)將在 setState() 完成后執(zhí)行，從而為 console.log() 提供同步行為。


    標題名稱：新手React開發(fā)人員容易做錯的5件事
    URL分享：http://www.5511xx.com/article/dpgesjc.html