React学习笔记—组件组合

xiaodao 发布于2019-08-22 10:56 / 600人阅读

摘要：说的通俗点如果组件出现在了组件的方法中，那么组件就是所有者。所有者和被所有者关系是针对组件的，父子关系是针对结构的。子调节调节发生在更新的过程中。带有状态的子节点对大部分组件来说，问题不大。应该加在组件上，而不是标签上。

关注分离

我们在编程的时候碰到相同的功能，可以通过抽出公共方法或者类来实现复用。当我们构建新的组件的时候，尽量保持我们的组件同业务逻辑分离，将相同功能的组件抽出一个组件库，通过复用这些组件库来提高我们代码的重用性。

官方示例

构建一个头像加用户名的展示

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云服务器云服务器学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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