rugu

分享一种不入侵源码的解决方法 在 open 和 close 事件触发时，动态修改 u-dropdown 组件的 contentHeight 属性即可

## 无状态和数据不可变 ### 什么是无状态？ 第一次听说`无状态`这个词是在学习 HTTP 协议时了解到：标准的 HTTP 协议是一个`无状态，无连接`的通信协议 因为每一个 http 请求都是独立的，和前后的请求都没有什么关系，服务器也不会存储和该请求相关的任何信息。 但有时候我们为了记住用户的登录状态，就引入了 cookie、session 等机制保存请求上下文，记录状态。 后面在学习 React 时又听说了`有状态组件` 和 `无状态组件` ： - 有状态组件：组件内部有自己的变量记录一些组件自身的数据 - 无状态组件：组件内部没有额外变量，完全依赖于外部传入的数据 无状态组件的好处： - 相同的输入总是产生相同的输出，不容易产生难以定位的 bug，便于测试 -...

## TS中接口是什么？与类型的关系是什么？ ### 接口（interface） 通俗来说，接口就是用来描述复杂数据结构的一种类型 语法： ```typescript interface Person { firstName: string; lastName: string } function name(person:Person) { console.log(person.firstName, person.lastName) } ``` 这里的 Person 就是一个接口，也就是一种自定义的类型 接口还能定义函数类型： ```typescript interface AddFunc {...

## 柯里化与组合(curry&compose) ### 柯里化 > 将一个多参数的函数, 转换为一个单参数的函数, 并且新的函数可以继续接收剩余的参数 例如: ```js function add(a, b, c) { return a + b + c } // 通过柯里化函数 curry 进行转换 const _add = curry(add)...

## 函数式编程 ### 什么是函数式编程？ 函数式编程就像第三次工业革命，前两次分别为 1. 命令式编程（Imperative programming） 2. 面向对象编程（Object Oriented Programming） 函数式编程的着眼点是**函数**，而不是**过程**，它强调的是如何通过函数的组合变换去解决问题，而不是通过写什么样的语句去解决问题 函数就是一种描述集合和集合之间的**转换关系**，输入通过函数都会返回一个输出值 所以**函数**实际上是一个**关系**，或者说是一种映射，而这种映射关系是可以组合的，一旦我们知道一个函数的输出类型可以匹配另一个函数的输入，那它们就可以进行组合 ### 函数式编程的特点 - 函数是一等公民 - 声明式编程 - 惰性执行 - 无状态和数据不可变 - 没有副作用 - 纯函数 ###...

## 什么是 BFC BFC 全称：Block Formatting Context （块级格式化上下文）= `block-level box` + ` Formatting Context` `block-level box` 即为块级元素，与之对应的即为行内元素 `inline-level box` BFC 是一个独立的渲染区域，只有块级元素参与， 它规定了内部的块级元素如何布局，并且这个区域与外部完全隔离，不会互相影响 ### 如何生成 BFC CSS2.1 中规定满足下列 CSS 声明之一的元素会生成 BFC：...

## any、never、unknow ### any `any` 是任意值类型，定义为 any 类型的变量允许被赋值为任意类型。 ```ts let myFavoriteNumber: any = 'seven' myFavoriteNumber = 7 ``` **变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型**，也就是说声明为 any 类型和写 JS 没啥区别 ### never `never` 类型表示的是那些永不存在的值的类型。例如一个抛出异常的函数，一个永远不会返回的函数的返回值类型 ```tsx // 返回never的函数必须存在无法达到的终点...

## React为什么是典型的FP？ReactView = render(data) 怎样以FP的方式理解？ 函数式编程的特性： **1、数据不可变(Immutable)** - 在React中，强调一个组件不能去修改传入的prop值，也是遵循Immutable的原则； - 在Redux中，更是强调Immutable的作用，每个reducer不能够修改state，只能返回一个新的state **2、纯函数** - 在React中，组件的render函数应该是一个纯函数，只有这样组件渲染的结果才只和 state/props 有关系，遵循![[公式]](https://www.zhihu.com/equation?tex=UI%3Df%28state%29)这个公式； - 在Redux，reducer 必须是一个纯函数，也是函数式编程的要求 另外 React 官网也说 React 可以使用声明式编写UI，让你的代码更加可靠，且方便调试。 以及函数式组件，hooks，都是函数式编程的体现。 ###

## 对比vue2，vue3的函数式风格体现在什么地方 在 Vue 2 中，函数式组件主要有两个应用场景： - 作为性能优化，因为它们的初始化速度比有状态组件快得多 - 返回多个根节点 ```js // Vue 2 函数式组件示例 export default { functional: true, props: ['level'], render(h, { props, data, children }) { return...

## TS 中的元组和枚举类型的作用 ### 元组 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同 ```tsx //定义一个元组类型 let x: [string, number] x = ['hello', 10] // ok x = [10, 'hello'] // error ``` 元组可以越界添加元素（不建议），但是不能越界访问 ```tsx const list: [string,...