1、Algorithm 一道算法题
给定一个长度为
n的整数数组height。有n条垂线，第i条线的两个端点是(i, 0)和(i, height[i])。 找出其中的两条线，使得它们与x轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明： 你不能倾斜容器。
这里考虑用双指针来求解。 用一个左指针 L 代表数组 height 的左边线，右指针 R 代表 height 的右边线。 找到这样的 L 和 R，使得 (R-L)*Math.min(height(L),height(R)) 最小。 这里 L 初始值为 0， R 初始值为 height.length-1。让 L 和 R 向中间移动，每次通过上述公式计算盛水的水量，如果 height[L] <= height[R]，则让 L 向 R靠近，否则让 R 向 L 靠近，以此进行指针的移动。
/**
* @param {number[]} height
* @return {number}
*/
var maxArea = function(height) {
let L = 0,R =height?.length-1;
let max = (R-L) * Math.min(height[R],height[L]);
while(L<R){
const product = (R-L)*Math.min(height[R],height[L]);
if(product > max){
max = product;
}
if(height[L] <= height[R]){
L++;
}else{
R--;
}
}
return max;
}
2、Review 读一篇英文文章
React Forms - Formik vs. Hook-Form vs. Final-Form
- 表单是什么？ 表单通过适当的 UI & 交互，将用户的输入转化为特定的数据结构
- 现有的表单方案有哪些？ 从受控组件和非受控组件，可以分成 react-hook-form （非受控）和 formik、react-final-form（受控）
- 各个表单方案的差别？ 各个表单方案归根结底，其实是在解决各个表单项之间以及表单项与表单整体的通信问题。
- 孰优孰劣？ 如果是开始一个新项目，建议使用 react-hook-form，因为它具有以下优点： 1、没有依赖，并且相比于其他2个表单方案它的模版代码更少。 2、很直观，而且验证表单项的值的代码书写相比于其他方案更少。
3、Technique/Tips 分享一个小技术
表单验证，有相应的库，比如很受欢迎的 Yup。 Yup 采用了 Schema 的方式进行验证，比如：
import { object, string, number, date, InferType } from 'yup';
let userSchema = object({
name: string().required(),
age: number().required().positive().integer(),
email: string().email(),
website: string().url().nullable(),
createdOn: date().default(() => new Date()),
});
// parse and assert validity
const user = await userSchema.validate(await fetchUser());
type User = InferType<typeof userSchema>;
Yup 具有以下的杀手锏优点：
1、简洁而富有表现力的模式接口，适用于建模简单到复杂的数据模型
2、强大的TypeScript支持。从模式中推断静态类型，或确保模式正确实现了类型
3、内置的异步验证支持。同样适用于服务器端和客户端的验证
4、可扩展：添加自己的类型安全方法和模式 丰富的错误详细信息，轻松进行调试
4、Share 分享一个观点
学习表单方案的源码，是在学习状态管理和底层数据模型、表单项之间的联动、表单项和表单整体的通信、动态校验的实现方法。
