成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React組件編寫思路（二）

Muninn / 1862人閱讀

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

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

組件改變自己的狀態(tài)只能通過改變 state 完成，而把 props 的變化反映到 state 卻是可以通過生命周期函數(shù)來實現(xiàn)。首先還是拿上一篇中受控 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 }

        
      

    );
  }
}

組件初始化的時候構(gòu)造函數(shù)會接受傳入的 props ，而當組件的容器改變傳入組件的 props 的值時會觸發(fā)組件的 componentWillReceiveProps 的方法，在這個方法中我們可以把變化后的 props(nextProps) 通過 setState 映射成 state 的變化。那么我們需要做的就是給受控組件增加初始化 props 處理和在 componentWillReceiveProps 內(nèi) 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 組件的使用就變得多樣化，可以根據(jù)自己項目的需求來變化。譬如：

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 的優(yōu)先級比 props.defautXxx 高，
      如果設(shè)置了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 設(shè)計，我理解為是為了保持受控組件 api 的統(tǒng)一性，如果把 alert 組件當成受控組件則初始化使用 defaultXxx，如果當成非受控組件就直接使用 xxx。

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

故最基本的 React 組件編寫套路就這些。但是這些還只是 api 應(yīng)用層面的東西，比較難的是在編寫組件時候?qū)顟B(tài)的抽象，使使用者使用的舒服自然。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82956.html

相關(guān)文章

  • React組件編寫思路（一）

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

    CollinPeng 評論0 收藏0

  • 從頭開始，徹底理解服務(wù)端渲染原理(8千字匯總長文)

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

    hiyang 評論0 收藏0

  • webpack+babel+react練習流程記錄

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

    DDreach 評論0 收藏0

  • 仿 taro-ui 實現(xiàn) modal 組件 小程序組件

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

    qpal 評論0 收藏0

  • 仿 taro-ui 實現(xiàn) modal 組件 小程序組件

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

    helloworldcoding 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<