概念

高阶组件(Higher-Order Components): 能够接受一个组件并返回一个新的组件

高阶组件（HOC）是 React 中用于重用组件逻辑的高级技术

HOC 本身不是 React API 的一部分,是从 React 构思本质中浮现出来的一种模式

高阶组件(HOC)是一个函数，能够接受一个组件并返回一个新的组件

组件是将 props 转化成 UI ，然而高阶组件将一个组价转化成另外一个组件。

相当于高阶组件接收一个组件，然后给组件添加一个data 的props属性 返回出来

1

const EnhancedComponent = higherOrderComponent(WrappedComponent);

之前使用mixins作为解决交叉问题的方法，现在被抛弃了

组件是React中代码重用的最小单元

高阶组件既不会修改输入组件，也不会通过继承来复制行为。

高阶组件是纯函数

高阶组件（HOC）并不关心数据将会如何或者为什么使用，并且被包裹的元素并不关心数据的源头。

高阶组件的实现

1、属性代理：本质上是使用组合的方式，通过将组件包装在容器组件中实现功能

2、反向继承：使用一个函数接受一个组件作为参数传入，并返回一个继承了该传入组件的类组件，且在返回组件的 render() 方法中返回 super.render() 方法

运用了很多AOP切片编程是思想

Refs 和 DOM

Refs 提供了一种在 render 方法中创建DOM 节点或 React 元素的方式

在常规的 React 数据流中，props 是父组件与子组件交互的唯一方式。要修改子元素，你需要用新的 props 去重新渲染子元素。

Refs：强制修改子元素。

被修改的子元素可以是 React组件实例（类组件实例），或者是一个 DOM 元素，不能使函数组件

何时使用 Refs

1. 处理focus、文本选择或者媒体播放
2. 触发强制动画
3. 集成第三方DOM库
4. 如果可以通过声明式实现，就尽量避免使用 refs

不要过度使用 Refs

能使用状态提升运用state改变组件状态，不要使用 refs 来更新组件

创建 Refs: React.createRef()

使用 React.createRef() 创建 refs，通过 ref 属性来获得 子元素。

当构造组件时，refs 通常被赋值给实例的一个属性，这样你可以在组件中任意一处使用它们.

渲染属性(Render Props)

用于使用一个值为函数的 prop 在 React 组件之间的代码共享(数据共享)

带有渲染属性(Render Props)的组件需要一个返回 React 元素并调用它的函数，而不是实现自己的渲染逻辑。

1
2
3

<DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>

组件是React 主要的代码复用单元，但如何共享状态或一个组件的行为封装到其他需要相同状态的组件中并不是很明了

主要概念

1、 在常规的 React 数据流中，props 是父组件与子组件交互的唯一方式,要修改子元素，需要用新的 props 去重新渲染子元素

2、 函数组件必须显式传递props，类组件不需要显式传递但是获取时需要在前边加this（this.props）

3、 提取组件的规则：（1）会被复用的组件要提出来；（2） 当条件渲染的条件过于复杂时；（3） 当map()中有太多嵌套时

4、 props是只读的，无论是函数组件还是类组件，都无法修改自身的props

5、 state是私有的，并且由组件自身控制

6、 存储不参与数据流的内容（如计时器id）可以自由向该类（组件类本身不是state）中添加其他字段（不用声明变量，直接通过this.xxx=xxx 添加）

7、 setState用法：

（1） this.setState({xxx:yyy})；

（2） this.setState((state,props)=>({xxx:yyy}))，该函数接收前一个状态值(变化前的state)作为第 1 个参数， 并将更新后的props值作为第 2 个参数:

8、 无论作为父组件还是子组件，它都无法获悉另一个组件是否有状态，同时也不需要关心另一个组件是定义为函数组件还是类组件。state不能被自身组件以外的任何组件访问

9、 单向数据流：任何state始终由某个特定的组件所有，并且从该state导出的任何数据或ui只能影响树中“下方”的组件

10、 React中不能通过 return false 来阻止默认行为，必须明确调用e.preventDefault()

事件冒泡处理: 1、合成事件间,e.stopPropagation();2、原生事件与最外层document上的事件间,e.nativeEvent.stopImmediatePropagation();3、阻止合成事件与除最外层document上的原生事件,’判断e.target’

SCSS 描述一个人

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

.human {
  // 为了少打点字，下面就简称 block: b | element: e | modifier: m

  &__finger {
    &--little {}
  }

  // case.1 [ b--m 中嵌套 b__e ]
  &--male {
    .human__leg {}
  }

  // case.2 [ 伪类或者伪元素中嵌套 b__e ]
  &:hover {
    .human__hand {}
  }

  // case.3 [ state 中嵌套 b__e ]
  &.is-hurt {
    .human__head {}
  }

  // case.4 [ 任意情况下嵌套 +, ~ 等特殊的选择符 ]
  &__arm {
    &:focus {
      & ~ .human__hand--right {}
    }
  }

  // case.5 [ 共享规则 ]
  &__teeth, &__tongue {}
}

上面列举了几种原始画风下 scss 开发时经常会碰到几种不得不把 .block__element--modifier 写全的几种情况，也就是 本文 想解决的BEM开发比较痛的地方 —— 最痛的是还要加 namespace…

第一步：声明bem-mixins

与flex的区别

Flex 布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是一维布局。

Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。

Grid 布局远比 Flex 布局强大。

基本概念

容器和项目

采用网格布局的区域，称为”容器”（container）。
容器内部采用网格定位的子元素，称为”项目”（item）。

1
2
3
4
5

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

最外层的<div>元素就是容器，内层的三个<div>元素就是项目
项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目

Flex 布局是什么

Flex 是 Flexible Box 的缩写，意为”弹性布局“，用来为盒状模型提供最大的灵活性
任何一个容器都可以指定为 Flex 布局
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

1
2
3
4
5
6
7
8
9
10
11

white-space:nowrap;         //强制不换行（中英文都起作用）

white-space:pre-wrap;       //只对中文起作用，强制换行

word-break:break-all;       // 只对英文起作用，以字母作为依据，强制换行

word-break:break-word;      //只对英文起作用，以单词作为依据，强制换行

overflow:hidden;            //超出的内容隐藏

text-overflow:ellipsis;     //超出的内容为省略号

单行文本

1
2
3
4
5
6
7

.text {
  width: 100px;
  white-space: nowrap;       /* 使文本不可换行 */
  word-break: break-all;     /* 英文换行，以字母作为依据 */
  overflow: hidden;          /* 隐藏溢出部分 */ 
  text-overflow: ellipsis;   /* 显示省略符号来代表被隐藏的文本 */
}

多行文本

方法1

1
2
3
4
5
6
7
8
9

.text {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;       /* 超出的内容显示省略号 */
    word-break: break-all;         /* 英文换行，以字母作为依据 */
    display: -webkit-box;          /* 将对象作为弹性伸缩盒子模型显示 */   
    -webkit-box-orient: vertical;  /*设置子元素排列方式*/
    -webkit-line-clamp: 3;         /*设置显示的行数，多出的部分会显示为...*/
}

Sass 和 SCSS 区别

SCSS 是Sass 3引入新的语法，其语法完全兼容 CSS3，并且继承了Sass的强大功能。

Sass 和SCSS其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

• 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
• 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。

Sass 支持两种不同的语法。两种语法可以互相加载，所以 选择哪一种语法取决于你和你的团队。

BEM

什么是 BEM 命名规范

Bem 是块（block）、元素（element）、修饰符（modifier）的简写

• 块: 组件
• 元素：块的子节点
• 修饰符：改变某个块的外观的标志，不同状态或不同版本
  Yandex 中文：燕基科斯 提出的一种前端 CSS 命名方法论

BEM的关键是，可以获得更多的描述和更加清晰的结构，从其名字可以知道某个标记的含义。于是，通过查看 HTML 代码中的 class 属性，就能知道元素之间的关联。