react小知識(1) – 這個defaultProps可以刪掉嗎?

windyrain發表於2019-01-06
React

初衷

業務程式碼在react元件向react-redux模式轉換中，出現了一段不確定是否冗餘的程式碼

實際業務中，由於元件render方法中，直接使用了list.map, 所以當list為undefined, 會導致程式報錯。

因此，在開發第一個react版本時，對App.defaultProps進行了定義。這段程式碼對保障程式的可用性，有重要的意義。

那麼當redux來襲，這個defaultProps可以刪掉嗎?

import React , { 
Component 
  } from 'react';
import { 
connect 
  } from "react-redux";
@connect(  state =>
 ({ 
   // 已在appReducer中定義list的初值為[]    list: state.appReducer.list   
  }))class App extends Component { 
   componentDidMount() { 
   // react寫法, 此處略去axios宣告    axios.get('http://api.xxx.com').then((response) =>
 { 
     this.setState({ 
       list: response.data.list      
  })    
  })        // redux寫法, 此處略去requestList宣告    // 依賴action ->
 reducer ->
 mapStateToProps 更新list    // axios請求通常寫在action中，需使用 redux-thunk 中介軟體    // this.props.requestList();
  
  }  render() { 
   return this.props.list.map((item) =>
 <
span>
{item.name
  }<
/span>
);
  
  }
  }App.defaultProps = { 
 list: []
  };
export default App複製程式碼

調查

  1. google檢索，關鍵詞: mapStateToProps defaultProps

    搜尋引擎返回的結果，對我理解此問題有幫助的，有以下2個連結。

    1. set-default-props-for-a-react-component

    2. how-to-declare-reactjs-default-props-when-using-redux

    第一個連結裡面提到了：As mapStateToProps is being called before the component construction (when defaultProps are defined)

    mapStateToProps 是在元件的contructor前呼叫的。

    第二個連結裡面提到了：after you shared your mapStateToProps, yes, it has something to do with Redux!The issue is caused by your reducer.

    You must declare initial state shape and moreover, you must specify the initial state in each reducer.

    Redux will call our reducer with an undefined state for the first time. This is our chance to return the initial state of our app.

    Redux 會使用一個 undefined 狀態對 reducer 進行呼叫，此時，我們可以返回 app 的初始狀態

  2. 安裝一個react-redux腳手架進行實踐，本次選了react-redux-boilerplate

    react小知識(1) – 這個defaultProps可以刪掉嗎?

    如圖所示，defaultProps 中的 username 並沒有生效。

    而且在 HomePage 元件的 constructor 方法中，列印出來的日誌中，username 也是 reducer initial state 賦予的值。

    react小知識(1) – 這個defaultProps可以刪掉嗎?

    還有一張圖，更好的說明了這個問題，其實被 connect 包裹的 HomePage 元件，實際的呼叫情況就是

     <
    HomePage username="fengyu" />
    複製程式碼

    這和我們直接使用 react 元件時，傳遞了 props , 元件內的 defaultProps，就不會生效的道理是一摸一樣的。

    同樣對上面檢索結果中提到的，mapStateToProps 是在元件的contructor前呼叫，做了很好的印證。

此時，我已經徹底的放心，在維護好 reducer 中的 initialState 的前提下，可以把專案中的 defaultProps 刪掉了。

總結

  • 面對不確定的程式碼，最好的態度並不是放著不管，而是積極面對。也許他並不會對程式的執行造成影響，但是會妨礙你對框架的理解。

  • 需要進一步理解，向元件傳遞了 props ，為什麼 defaultProps 中的相同鍵值就不生效了。

  • 任何一個小問題搞明白都會使你快樂。

2019，開心的研究，期待技術上的成長！

來源：https://juejin.im/post/5c31b7e96fb9a049be5da366

相關文章