react小知識(1) - 這個defaultProps能夠刪掉嗎?

初衷

業務代碼在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

   

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

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

   

   還有一張圖，更好的說明了這個問題，其實被 connect 包裹的 HomePage 組件，實際的調用狀況就是

   <HomePage username="fengyu" />
   複製代碼

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

   一樣對上面檢索結果中提到的，mapStateToProps 是在組件的contructor前調用，作了很好的印證。

此時，我已經完全的放心，在維護好 reducer 中的 initialState 的前提下，能夠把項目中的 defaultProps 刪掉了。

總結

• 面對不肯定的代碼，最好的態度並非放着無論，而是積極面對。也許他並不會對程序的運行形成影響，可是會妨礙你對框架的理解。

• 須要進一步理解，向組件傳遞了 props ，爲何 defaultProps 中的相同鍵值就不生效了。

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

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