国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React學(xué)習(xí)筆記—組件組合

xiaodao / 629人閱讀

摘要：說(shuō)的通俗點(diǎn)如果組件出現(xiàn)在了組件的方法中，那么組件就是所有者。所有者和被所有者關(guān)系是針對(duì)組件的，父子關(guān)系是針對(duì)結(jié)構(gòu)的。子調(diào)節(jié)調(diào)節(jié)發(fā)生在更新的過(guò)程中。帶有狀態(tài)的子節(jié)點(diǎn)對(duì)大部分組件來(lái)說(shuō)，問(wèn)題不大。應(yīng)該加在組件上，而不是標(biāo)簽上。

關(guān)注分離

我們?cè)诰幊痰臅r(shí)候碰到相同的功能，可以通過(guò)抽出公共方法或者類來(lái)實(shí)現(xiàn)復(fù)用。當(dāng)我們構(gòu)建新的組件的時(shí)候，盡量保持我們的組件同業(yè)務(wù)邏輯分離，將相同功能的組件抽出一個(gè)組件庫(kù)，通過(guò)復(fù)用這些組件庫(kù)來(lái)提高我們代碼的重用性。

官方示例

構(gòu)建一個(gè)頭像加用戶名的展示

var Avatar = React.createClass({
  render: function() {
    return (
      

        
        
      

    );
  }
});

var ProfilePic = React.createClass({
  render: function() {
    return (
      
    );
  }
});

var ProfileLink = React.createClass({
  render: function() {
    return (
      
        {this.props.username}
      
    );
  }
});

React.render(
  ,
  document.getElementById("example")
);
所有者

上面的例子中，組件Avatar包含了組件ProfilePic和ProfileLink。在React當(dāng)中，所有者就是可以設(shè)置其他組件props的組件。說(shuō)的通俗點(diǎn)：如果組件X出現(xiàn)在了組件Y的render()方法中，那么組件Y就是所有者。正如我們之前所討論的，組件不能改變props—props應(yīng)同所有者初始化它們時(shí)保持一致。
一定要弄清所有者和被所有關(guān)系，父子關(guān)系的區(qū)別。所有者和被所有者關(guān)系是針對(duì)React組件的，父子關(guān)系是針對(duì)DOM結(jié)構(gòu)的。來(lái)上面的例子來(lái)說(shuō)，Avatar是所有者，擁有div、ProfilePic、ProfileLink，而div和ProfilePic、ProfileLink則是父子關(guān)系。

子屬性

當(dāng)我們創(chuàng)建React實(shí)例時(shí)，可以在開(kāi)閉標(biāo)簽中添加其他的組件或者JavaScript表達(dá)式。

Parent可以通過(guò)this.props.children獲取到它的子內(nèi)容。this.props.children是不透明的：通過(guò)React.Children utilities去操作。

子調(diào)節(jié)

調(diào)節(jié)發(fā)生在React更新DOM的過(guò)程中。通常，子節(jié)點(diǎn)根據(jù)它們渲染的順序調(diào)節(jié)的。看下面兩個(gè)渲染示例：

// Render Pass 1

  
Paragraph 1

  
Paragraph 2


// Render Pass 2

  
Paragraph 2

直觀上看，

Paragraph 1

被移除了。實(shí)際上，React改變第一個(gè)子節(jié)點(diǎn)的內(nèi)容，然后刪除最后一個(gè)節(jié)點(diǎn)。React根據(jù)子節(jié)點(diǎn)的順序進(jìn)行調(diào)節(jié)。

帶有狀態(tài)的子節(jié)點(diǎn)

對(duì)大部分組件來(lái)說(shuō)，問(wèn)題不大。對(duì)跟數(shù)據(jù)保存在state當(dāng)中的UI交互的組件來(lái)說(shuō)，就比較麻煩了。大部分情況下元素是被隱藏而不是移除。

// Render Pass 1

  
Paragraph 1

  
Paragraph 2


// Render Pass 2

  
Paragraph 1

  
Paragraph 2
動(dòng)態(tài)子節(jié)點(diǎn)

當(dāng)數(shù)據(jù)來(lái)自于搜索結(jié)果或者新的組件被添加到數(shù)據(jù)流里，在這種情況下，每個(gè)子節(jié)點(diǎn)需要保持唯一的標(biāo)識(shí)。可以給每個(gè)子節(jié)點(diǎn)添加key屬性。

var Component = React.createClass({
    render: function() {
        var results = this.props.results;
        return (
            
    
                {results.map(function(result) {
                    return 
  1. {result.text}
    2. ;
                })}
            

        );
    }
});

當(dāng)React調(diào)節(jié)這些帶有key的節(jié)點(diǎn)時(shí)，將會(huì)保證這些節(jié)點(diǎn)是否重構(gòu)或者移除。key應(yīng)該加在組件上，而不是HTML標(biāo)簽上。

// WRONG!
var ListItemWrapper = React.createClass({
  render: function() {
    return 
  • {this.props.data.text}
    • ;
  }
});
var MyComponent = React.createClass({
  render: function() {
    return (
      
      
        {this.props.results.map(function(result) {
          return ;
        })}
      
    
    );
  }
});

// Correct :)
var ListItemWrapper = React.createClass({
  render: function() {
    return 
  • {this.props.data.text}
    • ;
  }
});
var MyComponent = React.createClass({
  render: function() {
    return (
      
      
        {this.props.results.map(function(result) {
           return ;
        })}
      
    
    );
  }
});
    數(shù)據(jù)流

    在React當(dāng)中，數(shù)據(jù)通過(guò)props從所有者向子節(jié)點(diǎn)傳遞。這就是所謂的單向數(shù)據(jù)綁定了：所有者將它擁有的組件props綁定到它的props或者state，這個(gè)過(guò)程將會(huì)遞歸進(jìn)行。數(shù)據(jù)改變就會(huì)反映到UI層。

      
    這節(jié)看的自己有點(diǎn)繞，JB得好好理理。。。

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

    轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/91490.html

    相關(guān)文章

    • [BizCharts學(xué)習(xí)筆記] --- 數(shù)據(jù)可視化

      摘要：所以筆者選擇了，為什么會(huì)選擇一是因?yàn)樗前⒗锍銎罚?jīng)歷了一年左右的打磨已經(jīng)完全適應(yīng)在使用其次是它支持自由定制，不會(huì)像那樣高度封裝，所以在開(kāi)發(fā)復(fù)雜圖表的時(shí)候會(huì)更加得心應(yīng)手。只是阿里圖表庫(kù)中的一員。 實(shí)際上，在數(shù)據(jù)可視化這一塊筆者并沒(méi)有很多的開(kāi)發(fā)經(jīng)歷和經(jīng)驗(yàn)，不過(guò)正是因?yàn)檫@個(gè)問(wèn)題筆者才決定學(xué)習(xí)一門(mén)數(shù)據(jù)可視化框架來(lái)彌補(bǔ)自己在這一方面的不足。在這個(gè)大數(shù)據(jù)統(tǒng)治的時(shí)代，數(shù)據(jù)能給我們提供前所未有的便捷...

      CoffeX 評(píng)論0 收藏0

    • ReactJS組件之間通信

      摘要：最近在學(xué)習(xí)，不得不說(shuō)第一次接觸組件化開(kāi)發(fā)很神奇，當(dāng)然也很不習(xí)慣。 最近在學(xué)習(xí)react.js，不得不說(shuō)第一次接觸組件化開(kāi)發(fā)很神奇，當(dāng)然也很不習(xí)慣。react的思想還是蠻獨(dú)特的，當(dāng)然圍繞react的一系列自動(dòng)化工具也是讓我感覺(jué)亞歷山大今天總結(jié)一下react組件之間的通信，權(quán)當(dāng)是自己的學(xué)習(xí)筆記： reactJs中數(shù)據(jù)流向的的特點(diǎn)是：?jiǎn)雾?xiàng)數(shù)據(jù)流 react組件之間的組合不知道為什么給我一種數(shù)...

      codecook 評(píng)論0 收藏0

    • vue.js學(xué)習(xí)筆記

      摘要：指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于。對(duì)象形式佐客湯姆咪口修飾符修飾符是以半角句號(hào)指明的特殊后綴，用于指出一個(gè)指令應(yīng)該以特殊方式綁定。修飾符修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。 指令 指令(Directives)是帶有v-前綴的特殊屬性。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于DOM。 v-if條件判斷 T...

      levy9527 評(píng)論0 收藏0

    • react入門(mén)學(xué)習(xí)筆記（一）

      摘要：選擇的主要原因大概是因?yàn)樵摽蚣艹霈F(xiàn)較早，感覺(jué)上會(huì)相對(duì)成熟，日后學(xué)習(xí)中遇到問(wèn)題想要查找答案相對(duì)簡(jiǎn)單一些，對(duì)，就是這么簡(jiǎn)單。多說(shuō)無(wú)益，接下來(lái)開(kāi)始的學(xué)習(xí)，我按照我學(xué)習(xí)中帶著的問(wèn)題來(lái)一一解答，完成我的入門(mén)筆記。主要是針對(duì)前端的組件化開(kāi)發(fā)。 這兩天得空，特意來(lái)折騰了以下時(shí)下火熱的前端框架react，至于為什么選react,作為一個(gè)初學(xué)者react和vue在技術(shù)上的優(yōu)劣我無(wú)權(quán)評(píng)論，也就不妄加評(píng)論了...

      leon 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    xiaodao

    男|高級(jí)講師

    TA的文章

    閱讀更多
    最新活動(dòng)
    閱讀需要支付1元查看
    <