第11节——组合 vs 继承+使用

一、组合 vs 继承

1、组合的概念

它不是从基类继承属性，而是描述一个类，该类可以引用另一个类的一个或多个对象作为实例。比如我们有多个汽车零件，可以用它来组合成一台汽车。

2、继承的概念

简单来说，当一个子类从它的父类派生属性时，我们称之为继承。比如我们有一台汽车这个基础类，那么我们可以继承它的载人等属性

3、例子

React 推荐使用组合而不是继承，原因如下。React 中的一切都是一个组件，它遵循一个强大的基于组件的模型。这是组合比继承更好的代码重用方法的主要原因之一

我们有header组件、footer组件。这些组件在很多页面都可以使用。那么我们就可以使用react 组合这种特性把他们给组合起来

import React from "react";

export default class Page extends React.Component {
  render() {
    return (
      

        

        
内容
        

      
    );
  }
}

这看起来就像搭积木一样。其实react 组件化的核心思想就是把我们的逻辑块以及UI块拆分。组成一个个的小组件及hooks（这个后面会着重讲）。然后在页面上想搭积木一样把他搭建起来。

二、组件化

把重复的代码提取出来合并成为一个个组件，组件最重要的就是复用，位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强。组件化更多关注UI部分，每个组件有独立的HTML、css、js代码。可以根据需要把它放在页面的任意部位，也可以和其他组件一起形成新的组件。一个页面是各个组件的结合，可以根据需要进行组装

三、ReactDOM.createPortal

1、概念

Portal 提供了一种将子节点渲染到存在于父组件以外 DOM 节点的方案。在 CSS 中，我们可以使用 position: fixed 等定位方式，让元素从视觉上脱离父元素。在 React 中，Portal 直接改变了组件的挂载方式，不再是挂载到上层父节点上，而是可以让用户指定一个挂载节点。一般用于模态对话框，工具提示、悬浮卡、加载动画等

2、用法

/**
	第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或react组件
	二个参数（container）是一个 DOM 元素 这个元素就是第一个元素要挂载的一个元素
*/
ReactDOM.createPortal(child, container)
class Protal extends React.Component {
  constructor() {
    super();
    // 创建一个dom元素
    this.dom = document.createElement("div");
    // 挂载到body下面
    document.body.appendChild(this.dom)
  }


  render() {
    return ReactDOM.createPortal(
Protal在root外
, this.dom);
  }
}

3、封装 Modal 弹框

Modal组件

页面中使用