React學習筆記—組件組合

xiaodao 發布于2019-08-22 10:56 / 636人閱讀

摘要：說的通俗點如果組件出現在了組件的方法中，那么組件就是所有者。所有者和被所有者關系是針對組件的，父子關系是針對結構的。子調節調節發生在更新的過程中。帶有狀態的子節點對大部分組件來說，問題不大。應該加在組件上，而不是標簽上。

關注分離

我們在編程的時候碰到相同的功能，可以通過抽出公共方法或者類來實現復用。當我們構建新的組件的時候，盡量保持我們的組件同業務邏輯分離，將相同功能的組件抽出一個組件庫，通過復用這些組件庫來提高我們代碼的重用性。

官方示例

構建一個頭像加用戶名的展示

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當中，所有者就是可以設置其他組件props的組件。說的通俗點：如果組件X出現在了組件Y的render()方法中，那么組件Y就是所有者。正如我們之前所討論的，組件不能改變props—props應同所有者初始化它們時保持一致。
一定要弄清所有者和被所有關系，父子關系的區別。所有者和被所有者關系是針對React組件的，父子關系是針對DOM結構的。來上面的例子來說，Avatar是所有者，擁有div、ProfilePic、ProfileLink，而div和ProfilePic、ProfileLink則是父子關系。

子屬性

當我們創建React實例時，可以在開閉標簽中添加其他的組件或者JavaScript表達式。

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

子調節

調節發生在React更新DOM的過程中。通常，子節點根據它們渲染的順序調節的。看下面兩個渲染示例：

// Render Pass 1

  Paragraph 1
  Paragraph 2

// Render Pass 2

  Paragraph 2

直觀上看，

Paragraph 1

被移除了。實際上，React改變第一個子節點的內容，然后刪除最后一個節點。React根據子節點的順序進行調節。

帶有狀態的子節點

對大部分組件來說，問題不大。對跟數據保存在state當中的UI交互的組件來說，就比較麻煩了。大部分情況下元素是被隱藏而不是移除。

// Render Pass 1

  Paragraph 1
  Paragraph 2

// Render Pass 2

  Paragraph 1
  Paragraph 2

動態子節點

當數據來自于搜索結果或者新的組件被添加到數據流里，在這種情況下，每個子節點需要保持唯一的標識。可以給每個子節點添加key屬性。

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

當React調節這些帶有key的節點時，將會保證這些節點是否重構或者移除。key應該加在組件上，而不是HTML標簽上。

// 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 ;
        })}
      
    );
  }
});

數據流

在React當中，數據通過props從所有者向子節點傳遞。這就是所謂的單向數據綁定了：所有者將它擁有的組件props綁定到它的props或者state，這個過程將會遞歸進行。數據改變就會反映到UI層。

這節看的自己有點繞，JB得好好理理。。。

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

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

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

[BizCharts學習筆記] --- 數據可視化

摘要：所以筆者選擇了，為什么會選擇一是因為它是阿里出品，經歷了一年左右的打磨已經完全適應在使用其次是它支持自由定制，不會像那樣高度封裝，所以在開發復雜圖表的時候會更加得心應手。只是阿里圖表庫中的一員。實際上，在數據可視化這一塊筆者并沒有很多的開發經歷和經驗，不過正是因為這個問題筆者才決定學習一門數據可視化框架來彌補自己在這一方面的不足。在這個大數據統治的時代，數據能給我們提供前所未有的便捷...

CoffeX 2019-08-23 11:56 評論0 收藏0
ReactJS組件之間通信

摘要：最近在學習，不得不說第一次接觸組件化開發很神奇，當然也很不習慣。最近在學習react.js，不得不說第一次接觸組件化開發很神奇，當然也很不習慣。react的思想還是蠻獨特的，當然圍繞react的一系列自動化工具也是讓我感覺亞歷山大今天總結一下react組件之間的通信，權當是自己的學習筆記： reactJs中數據流向的的特點是：單項數據流 react組件之間的組合不知道為什么給我一種數...

codecook 2019-08-22 10:39 評論0 收藏0
vue.js學習筆記

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

levy9527 2019-08-22 16:24 評論0 收藏0
react入門學習筆記（一）

摘要：選擇的主要原因大概是因為該框架出現較早，感覺上會相對成熟，日后學習中遇到問題想要查找答案相對簡單一些，對，就是這么簡單。多說無益，接下來開始的學習，我按照我學習中帶著的問題來一一解答，完成我的入門筆記。主要是針對前端的組件化開發。這兩天得空，特意來折騰了以下時下火熱的前端框架react，至于為什么選react,作為一個初學者react和vue在技術上的優劣我無權評論，也就不妄加評論了...

leon 2019-08-20 18:01 評論0 收藏0