在公司的项目开发过程中，我们在项目开始之前根据设计搞开发了一个单独的UI组件库 Components，在正式的项目里面前中期都是通过将我们的组件库通过npm包管理的方式在项目里面去引用，再import需要的组件；在一次发版后线上出现一个较为严重的问题，在线下复现查找问题 debugger 的时候, 调试到组件库的代码时，由于是经过打包的代码十分难以调试基本上全是 n啊 v啊，一堆看不出语义的变量，以至于没有办法快速定位是业务代码还是组件库里的逻辑有问题（尽管后面还是定位到了问题出现在业务代码里面。。）。

这种情况下，我们决定把组件库的代码引入到项目里面，通过子模块的实现引入进行管理，实际项目也没有通过npm包的形式引用组件库，直接放在了本地通过 Next 提供的 Dynamic 模块来进行组件的懒加载（暂时也没有太多的替代方案）。主要涉及到 git subModule 相关的操作。

子模块的管理和使用

实际上就是在一个git仓库下面将另一个 git 项目设置为项目的子模块(submodule)。这个子模块它是一个第三方开发的Git 库或者是你独立开发；既可以达到使用子模块中的代码的目的，两个项目又具有相对独立的提交。

通过 git submodule 可以查看当前子模块的信息如下：
子模块信息
包含子模块当前指向的commit_id 名称以及版本等其他信息

两个项目各自独立管理、在子模块有修改后更新子模块的指向

Hooks 在React 16.8 以上的版本中才可以使用
eslint-plugin-react-hooks

Hook 定义

Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。

nodebestpractice
资源

Refs

官方说明： Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

在React开发中、想要操作元素的状态一般是修改State、或者是修改传入的props。但是有时候一些效果不能通过如此操作实现，例如开发中常常碰到的：

• 输入框的焦点获取、比如打开登录界面登录框自动获取焦点
• 动态的根据一个元素的大小/距离 计算另外一个元素的大小

使用 Ref

目前的React版本（16.11.0）中 Refs 的用法如下：

import React form 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // 创建
    this.myRef = React.createRef();
  }

  render() {
    // 传入
    return <div ref={this.myRef} />;
  }
}

对于节点的访问:

const node = this.myRef.current;

说明：

• 1.通过调用 React.createRef 创建了一个 React ref 并将 DOM节点的引用current赋值给 this.myRef 变量。
• 2. 指定 ref 为 JSX 属性，将this.myRef 传入; ref 和 key 一样不属于 props属性，二者都会被 React 特殊处理和维护。
• 3. ref 挂载以后，ref.current 指向 ref 所在节点

如果之前用过 React，你可能了解之前的 ref 可以通过 this.refs.inputRef 来访问 DOM 节点、如下所示，这个 ref 是字符串类型的，在使用上来说似乎更加方便。现在官方版本不建议再使用它，因为 string 类型的 refs 存在问题。它属于过时 API 并可能会在未来的版本被移除。

import React form 'react';
class MyInput extends React.Component {
  componentDidMount() {
    this.refs.inputRef.focus();
  }
  render() {
    // 还能用 但不建议
    return <input ref="inputRef" />;
  }
}

Ref的值

官方文档中有说明，ref 的值根据节点的类型不同而有所不同：

• 当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 对象 接收底层 DOM 元素作为其 current 属性。可以访问元素的宽高等属性、input框还可以调用focus方法实现自动聚焦
• 当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性。即可以通过 current 调用组件中的方法

不能在函数组件上使用 ref 属性，因为他们没有实例。

回调 Refs

更加精细的控制 refs 的传递, 可以达到类似 props 的传递效果，在需要的地方传入inputRef

// 官方 Demo
function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

官方说明：

如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。

Refs 转发

ref Hook

useRef() 是 React 提供的在 Hooks 中获取 DOM 元素的方法。
使用方法如下：

import React, { useRef} from 'react';
function RefDemo(){
    const inputEl = useRef(null);
    const onButtonClick=()=>{ 
        inputEl.current.value="Hello, Ref";
        console.log(inputEl); //输出获取到的DOM节点
    };
    return (
        <>
            {/*保存input的ref到inputEl */}
            <input ref={inputEl} type="text"/>
            <button onClick = {onButtonClick}>展示</button>
        </>
    );
}
export default RefDemo;

官方文档

用伪元素实现气泡框

介绍

    在项目开发中本来自己负责的基础组件库里面的 Tooltip 组件没有达到预期的效果(有八阿哥)…
    后来想到其实可以用伪元素实现一个类似的气泡弹窗，但是又想到一个问题：我每个元素的气泡内容不一样这尼玛怎么填进去呢？
    于是乎，查文档、还真在文档里让我发现了一点有用的东西，通过 attr() CSS表达式和一个自定义数据属性 data-descr 创建一个纯CSS, 内容提示气泡如下：

相关属性： 自定义属性 data-desrc 表达式 attr()

兼容性： 还不错哦！！

各种链接如下：

• data-descr_Demo链接

• attr() 具体文档

• canIUse

• Demo地址

相关代码

<h1>伪元素实现气泡提示</h1>
<p>
  <span class="tooltip" data-descr="伪元素">伪元素</span>
  <span class="tooltip" data-descr="实现">实现</span>
  <span class="tooltip" data-descr="气泡提示">气泡提示</span>
</p>

body {
  font-family: sans-serif;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip[data-descr]:hover::after {
  content: attr(data-descr);
  position: absolute;
  top: -24px;
  left: 0;
  min-width: 60px;
  max-width: 100%;
  height: 24px;
  padding: 0 8px;
  box-sizing: border-box;
  line-height: 24px;
  font-size: 10px;
  text-align: left;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border-radius: 4px;
  background: #202020;
}

.tooltip[data-descr]:hover::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 15px;
  padding: 1px;
  box-sizing: border-box;
  border: 5px solid #202020;
  width: 0;
  height: 0;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  z-index: 99;
}

在项目中常常会需要对话框、下拉列表、悬浮窗等交互的组件，当在父组件中使用一个下拉列表的时候，父组件的大小是固定的、同时还有一些overflow: hidden;子组件想要完全展示就变得比较困难，或者不能完全展示、或者阴影被父组件overflow给hidden掉了，同时在用overflow去清除浮动的影响的时候也要考虑到副作用，当元素比较多或者内容比较大的时候会不会被截断的问题。这个当想让子元素的层级最高而且不用被父元素给截断的时候就需要一个容器或者元素能够脱离父组件，至少从视觉上就得脱离父组件的影响。

Portals 是 react 16 官方提供的解决方案， 使得组件可以脱离父组件从而挂载在页面的任何地方。

在做组件层级的时候 应用的skill
文档

React 哲学

组合优于继承

class Component

function Component

PureComponent

组件库中组件的设计

stateLess
常用样式尽量少