2023/05/04-笔记

morning刘
122 阅读5分钟

？？运算符

JavaScript 双问号也称为空值合并运算符。这个运算符只会在左侧表达式是 null 或 undefined 时
返回右侧的表达式。
不同于逻辑或，空值合并运算符会允许把 0 和空字符串作为有效的数值。

let name = 'morning'
let newName = name ?? 'nice'
console.log(newName) // morning

let name1 = null
let newName1 = name1 ?? 'nice'
console.log(newName1) // nice

let name2 = " "
let newName2 = name2 ?? 'nice'
console.log(newName2) // " "

i18next

i18next是一个用JavaScript编写的国际化框架。但它远不止于此!
I18next不仅仅提供标准的i18n特性，如(复数、上下文、插值、格式)。
它为您提供了一个完整的解决方案，将您的产品从web本地化到移动和桌面。

Ref

`useRef` 是一个 React Hook，它能让你引用一个不需要渲染的值。
场景：

不要过度使用refs。您应该只对不能用props表示的命令式行为使用refs:例如，滚动到节点、聚焦节点、触发动画、选择文本等等。

如果你可以用prop来表达某样东西，你就不应该使用ref。例如，与其从Modal组件中公开一个像{open, close}这样的命令式句柄，不如把isOpen作为一个像这样的prop。效果可以帮助您通过道具公开命令式行为

  • 不要在渲染期间写入 或者读取 ref.current。
  • 你可以在 事件处理程序或者 effects 中读取和写入 ref
  • 改变它 不会触发重新渲染（不像是 state 变量，会触发重新渲染）。

forwardRef

forwardRef允许组件通过ref向父组件公开DOM节点。

[公开命令句柄而不是 DOM 节点]

** 收到一个ref作为 props 之后的第二个参数。将它传递给要公开的 DOM 节点**

import { forwardRef } from 'react';  

const MyInput = forwardRef(function MyInput(props, ref) {  
const { label, ...otherProps } = props;  

return (  
<label>  
    {label}  
    <input {...otherProps} ref={ref} />  
</label>  
);  
});

useImperativeHandle

`useImperativeHandle` 是 React 中的一个 Hook，它能让你自定义由 [ref]暴露出来的句柄。

useImperativeHandle(ref, createHandle, dependencies?)

参数 

  • ref：该 ref 是你从 forwardRef 渲染函数 中获得的第二个参数。
  • createHandle：该函数无需参数，它返回你想要暴露的 ref 的句柄。该句柄可以包含任何类型。通常，你会返回一个包含你想暴露的方法的对象。
  • 可选的 dependencies：函数 createHandle 代码中所用到的所有反应式的值的列表。反应式的值包含 props、状态和其他所有直接在你组件体内声明的变量和函数。倘若你的代码检查器已 为 React 配置好，它会验证每一个反应式的值是否被正确指定为依赖项。该列表的长度必须是一个常数项，并且必须按照 [dep1, dep2, dep3] 的形式罗列各依赖项。React 会使用 Object.is 来比较每一个依赖项与其对应的之前值。如果一次重新渲染导致某些依赖项发生了改变，或你没有提供这个参数列表，你的函数 createHandle 将会被重新执行，而新生成的句柄则会被分配给 ref。

使用方法 

向父组件暴露一个自定义的 ref 句柄 

默认情况下，组件不会将它们的 DOM 节点暴露给父组件。举例来说，如果你想要 MyInput 的父组件 能访问到 <input> DOM 节点，你必须选择使用 forwardRef:。

import { forwardRef } from 'react';
const MyInput = forwardRef(function MyInput(props, ref) {
  return <input {...props} ref={ref} />;
});

在上方的代码中，MyInput 的 ref 会接收到 <input> DOM 节点。然而，你可以选择暴露一个自定义的值。为了修改被暴露的句柄，在你的顶层组件调用 useImperativeHandle：

import { forwardRef, useImperativeHandle } from 'react';
const MyInput = forwardRef(function MyInput(props, ref) {
  useImperativeHandle(ref, () => {
    return {
      // ... 你的方法 ...
    };

  }, []);
  return <input {...props} />;
});

注意在上述代码中，该 ref 已不再被转发到 <input> 中。

举例来说，假设你不想暴露出整个 <input> DOM 节点，但你想要它其中两个方法：focus 和 scrollIntoView。为此，用单独额外的 ref 来指向真实的浏览器 DOM。然后使用 useImperativeHandle 来暴露一个句柄，它只返回你想要父组件去调用的方法：

import { forwardRef, useRef, useImperativeHandle } from 'react';
const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);
  useImperativeHandle(ref, () => {
    return {
      focus() {
        inputRef.current.focus();
      },
      scrollIntoView() {
        inputRef.current.scrollIntoView();
      },
    };
  }, []);
  return <input {...props} ref={inputRef} />;
});

现在，如果你的父组件获得了 MyInput 的 ref，就能通过该 ref 来调用 focus 和 scrollIntoView 方法。然而，它的访问是受限的，无法读取或调用下方 <input> DOM 节点的其他所有属性和方法。

memo

`memo`允许您在 props 不变时跳过重新渲染组件。
只要props不改变，就不会重新渲染
称为记忆化组件*memoized*

import { memo } from 'react';  
const SomeComponent = memo(function SomeComponent(props) {  
// ...  
});

&&

a1 = true && true; // t && t returns true
a2 = true && false; // t && f returns false
a3 = false && true; // f && t returns false
a4 = false && 3 === 4; // f && f returns false
a5 = "Cat" && "Dog"; // t && t returns "Dog"
a6 = false && "Cat"; // f && t returns false
a7 = "Cat" && false; // t && f returns false
a8 = "" && false; // f && f returns ""
a9 = false && ""; // f && f returns false

<Input onFocus={(e) => {e.target.blur()}}>

blur:当你把光标放在文本框上输入的时候，是聚焦，但这里添加blur()，
blur的作用就是去除聚焦，也就是你不能把光标放在这个文本框上，
换句话说就是你不能输入文本,类似禁用状态但可以通过其他方式填充

TypeScript： Omit

TypeScript 3.5 新增的 Omit 辅助类型，这个类型用来创建从原始类型中移除了某些属性的新类型
**忽略某个类型的某些属性**

type ModalFEvent = (value: any, flag?: NamePath) => void;

export function useChooseModal<T extends ChooseMProps>(
  Modal: any = ChoosePopup,
  config?: Record<string, any>,
) {
  type ExChooseMProps = Omit<T, 'onFinish'> & {
    onFinish: ModalFEvent;
  };
 }

代码注解：忽略代码块中的T的 onFinish方法，用 & 自定义onFinish的类型

avatar
文章
阅读
粉丝