React組件編寫思路（二）

Muninn 發布于2019-08-20 16:30 / 1859人閱讀

摘要：那什么時候使用受控組件，什么時候使用非受控組件呢我們知道受控組件是比較符合我們傳統組件開發的思路的。故最基本的組件編寫套路就這些。

上一篇講了 React 兩種最常見的組件：受控組件和非受控組件。為了可用性，我們一般編寫出來的組件希望支持這兩種特性：可以通過組件自身的方法來改變組件的某(些)狀態，也可以通過 props 的值的變化來改變組件自身的同一個(些)狀態。

組件改變自己的狀態只能通過改變 state 完成，而把 props 的變化反映到 state 卻是可以通過生命周期函數來實現。首先還是拿上一篇中受控 alert 組件代碼為例：

class Alert extends React.Component {
  constructor( props ) {
    super( props )
    this.state = {
      content: "",
      show: false
    }
    this.show = ( content )=>{
      this.setState( {
        content: content,
        show: true
      } )
    }

    this.hide = ()=>{
      this.setState( {
        show: false
      } )
    }
  }
  render() {
    let style = {
      display: this.state.show ? "fixed" : "none"
    }
    return (
      
        Alert
        { this.state.content }
        
          
        
      
    );
  }
}

組件初始化的時候構造函數會接受傳入的 props ，而當組件的容器改變傳入組件的 props 的值時會觸發組件的 componentWillReceiveProps 的方法，在這個方法中我們可以把變化后的 props(nextProps) 通過 setState 映射成 state 的變化。那么我們需要做的就是給受控組件增加初始化 props 處理和在 componentWillReceiveProps 內 props 的處理。

class Alert extends React.Component {
  constructor( props ) {
    super( props )
    this.state = {
      content: this.props.content || "",
      show: this.props.show || false
    }
    this.show = ( content )=>{
      this.setState( {
        content: content,
        show: true
      } )
    }

    this.hide = ()=>{
      this.setState( {
        show: false
      } )
    }
  }

  componentWillReceiveProps( nextProps ) {
    this.setState( nextProps );
  }

  render() {
    let style = {
      display: this.state.show ? "fixed" : "none"
    }
    return (
      
        Alert
        { this.state.content }
        
          
        
      
    );
  }
}

那么針對同一個 alert 組件的使用就變得多樣化，可以根據自己項目的需求來變化。譬如：

import { Alert } from "Alert";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      alertMsg: "",
      showAlert: false
    }
    this.saveHandler = ()=>{
      // save ajax success
      this.refs.myAlert.show( "Save successfully" );
    }
    this.removeHandler = ()=>{
      // remove ajax success
      this.setState( {
        alertMsg: "Remove successfully",
        showAlert: true
      } )
    }
  }

  render() {
    
      
      
      
    
  }
}

為了讓組件更健壯，我們對 state 和 props 的一些必須的初始化值(默認值)需要明確指定

class Alert extends React.Component {
  constructor( props ) {
    super( props )
    let content = this.props.content;
    let show = this.props.show;
    /*
      props.xxx 的優先級比 props.defautXxx 高，
      如果設置了props.xxx 則 props.defaultXxx 就不起作用
    */
    this.state = {
      content: content === undefined ? this.props.defaultContent : content
      show: show === undefined ? this.props.defaultShow : show
    }
  }
}
Alert.propTypes = {
  defaultShow: React.PropTypes.bool,
  defaultContent: React.PropTypes.string,
  show: React.PropTypes.bool,
  content: React.PropTypes.string
}

Alert.defaultProps = {
  defaultShow: false,
  defaultContent: ""
}

如上代碼如果對 props.xxx 和 props.defaultXxx 有迷惑的童鞋，其實有了 xxx 完全沒有必要再有 defaultXxx，但是參考一些組件庫的 api 設計，我理解為是為了保持受控組件 api 的統一性，如果把 alert 組件當成受控組件則初始化使用 defaultXxx，如果當成非受控組件就直接使用 xxx。

那什么時候使用受控組件，什么時候使用非受控組件呢？我們知道受控組件是比較符合我們傳統 UI 組件開發的思路的。但是 React 在跨組件通訊方面很弱，如果不借助第三方庫進行通訊，對于兩個毫無關系的組件相互調用就需要傳遞層層的回調函數。我想沒有人喜歡這種編程風格，所以把所有組件的狀態抽象到一個地方進行集中管理變化，典型的數據流用 redux 就傾向于使用非受控組件了（這里不討論flux思想的由來，不討論redux好壞）。

故最基本的 React 組件編寫套路就這些。但是這些還只是 api 應用層面的東西，比較難的是在編寫組件時候對狀態的抽象，使使用者使用的舒服自然。

GPU云服務器云服務器 react 設計思路實現思路編程思路

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82956.html

React組件編寫思路（一）

摘要：受控組件例假設有一個方法非受控組件例接下來我們來看下如果編寫這兩種組件，打個比方我們要自定義一個組件。于是修改后的代碼如下確定使用這個組件的代碼以上就是兩種組件的編寫思路，你可以選擇把你的組件編寫成任意一種，那么使用者使用時也會有所不同。新手寫 React 組件往往無從入手，怎么寫，什么時候用 props，什么時候用 state 摸不著頭腦。其實是沒有了解到 React 的一些思想。...

CollinPeng 2019-08-20 16:30 評論0 收藏0
從頭開始，徹底理解服務端渲染原理(8千字匯總長文)

摘要：到此，就初步實現了一個組件是服務端渲染。服務端渲染完成頁面結構，瀏覽器端渲染完成事件綁定。但是，在服務端渲染中卻出現了問題。根據這個思路，服務端渲染中異步數據的獲取功能就完成啦。大家好，我是神三元，這一次，讓我們來以React為例，把服務端渲染(Server Side Render，簡稱SSR)學個明明白白。這里附上這個項目的github地址:https://github.com/...

hiyang 2019-08-26 10:42 評論0 收藏0
webpack+babel+react練習流程記錄

摘要：簡介來構建用戶界面的庫，不是框架關注于層虛擬單向數據流這些概念如何使用下載文件也可以使用，需要用到的模塊介紹是編寫組件的一種語法規范，可以看為是的擴展，它支持將和混寫在一起，最后使用編譯為常規的，方便瀏覽器解析編寫第一個例子使用編寫組件 react簡介來構建用戶界面的庫，不是框架關注于view層虛擬DOM 單向數據流 JSX這些概念如何使用react 下載文件 rea...

DDreach 2019-08-19 18:25 評論0 收藏0
仿 taro-ui 實現 modal 組件小程序組件

摘要：其他的項目使用了拼裝樣式驗證傳入的屬性是否是函數驗證父組件傳入的數據格式是否正確五參考文獻談談的使用使用場景仿 taro-ui 實現 modal 組件小程序組件. 簡介: 項目中使用到彈窗類的組件,重新制造了一個輪子. 源碼地址: https://github.com/xiangxiong... 編寫完modal組件總計花了28分鐘. 效果圖: showImg(htt...

qpal 2019-08-23 16:53 評論0 收藏0
仿 taro-ui 實現 modal 組件小程序組件

摘要：其他的項目使用了拼裝樣式驗證傳入的屬性是否是函數驗證父組件傳入的數據格式是否正確五參考文獻談談的使用使用場景仿 taro-ui 實現 modal 組件小程序組件. 簡介: 項目中使用到彈窗類的組件,重新制造了一個輪子. 源碼地址: https://github.com/xiangxiong... 編寫完modal組件總計花了28分鐘. 效果圖: showImg(htt...

helloworldcoding 2019-08-23 16:53 評論0 收藏0