React项目知识积累（四）

吃蛋糕的居居

已于 2024-05-27 10:59:01 修改

阅读量622

点赞数 7

文章标签： javascript css react.js 前端框架 less html5 node.js

于 2024-05-24 20:15:02 首次发布

本文链接：https://blog.csdn.net/weixin_45133582/article/details/139182634

版权

1.`useMemo( )`

在 React 中，useMemo 是一个 Hook，用于记忆计算结果，只有当依赖项之一发生变化时，才会重新计算。这有助于避免不必要的计算和渲染，从而提高应用程序的性能。

基本语法如下：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

在这个例子中，computeExpensiveValue 是一个可能很昂贵的计算函数，它依赖于参数 a 和 b。useMemo 的第一个参数是一个函数，该函数在组件首次渲染时执行，并返回想要记忆的值。第二个参数是一个数组，包含了这个函数的依赖项。只有当数组中的任何值发生变化时，computeExpensiveValue 函数才会重新执行。

useMemo 特别有用在处理复杂计算、大型对象或数组时，它可以防止不必要的重复计算，从而节省性能。

例如，假设你有一个计算两个数相加的函数，并且你想要在组件中记忆这个结果：

import React, { useState, useMemo } from 'react';

function MyComponent({ initialNumber }) {
  const [number, setNumber] = useState(initialNumber);
  const [number2, setNumber2] = useState(initialNumber + 1);

  const sum = useMemo(() => number + number2, [number, number2]);

  return (
    <div>
      <p>Number: {number}</p>
      <p>Number2: {number2}</p>
      <p>Sum: {sum}</p>
      <button onClick={() => setNumber(number + 1)}>Increment Number</button>
      <button onClick={() => setNumber2(number2 + 1)}>Increment Number2</button>
    </div>
  );
}

在这个例子中，sum 是通过 useMemo 记忆的，它只有在 number 或 number2 发生变化时才会重新计算。这样，只要 number 和 number2 的值保持不变，sum 的值就不会改变，从而节省了性能。

useMemo 是一个强大的性能优化工具，但使用时需要谨慎，因为它可能会隐藏潜在的性能问题，使代码更难维护。在决定使用 useMemo 之前，最好先考虑是否真的需要它。

const subMit = useMemo(()=>{
  return dataValue?.map(()=>{
  return { data };
    });
  },[ date ]);

2. :global{ }

在CSS中，:global 伪类用于选择器匹配文档中的所有元素，而不考虑它们是否位于一个特定的作用域内。这通常用于在CSS中引入外部的CSS文件或定义全局样式。

使用 :global 伪类，你可以确保选择器不会与当前组件或作用域内的任何本地选择器冲突。这对于使用CSS预处理器或模块化CSS时非常有用，因为它可以帮助避免命名空间的冲突。

下面是一个使用 :global 伪类的例子：

/* 在组件内部使用:global来引入全局样式 */
.global-class {
  color: red;
}

/* 或者在组件外部定义全局样式 */
:global .global-class {
  color: blue;
}

//局部作用
.bankenName{
  :global{
    .ant-divider-horizontal{
    font-size:16px !important;
    }
  }
}

在这个例子中，.global-class 是一个全局定义的类，它不会与组件内部定义的相同类名产生冲突。.global-class 会选择文档中的所有具有该类名的元素，并应用蓝色文字样式。

请注意，:global 伪类在不同的CSS处理器和预处理器中可能有不同的支持程度。在Sass中，你可以使用 @global 指令来实现相同的功能。

在 CSS Modules 中，通常情况下，样式是局部作用域的，即只应用于特定的组件或模块。但有时你可能需要定义一些全局样式，例如重置默认样式或设置全局主题。这时，可以使用 :global{ } 来定义全局样式规则。

3.自定义函数方法

在一个页面定义多个函数方法，在另一个页面调用。

//自定义组件的页面，可以定义多个组件，灵活调用
export const skipToElement = (elementId) => {
  const element = document.getElementById(elementId);
  if (element) {
    element.scrollIntoView({ block: 'start', behavior: 'smooth' });
  }
};

export const routes = {
  homePage: {
    label: <div>首页</div>,
    key: 1,
    neme: 'home',
    Children: [{ key: value }, { key: value }],
  },
  snowball: {
    label: "snow",
    key: 2,
    neme: 'snow',
    Children: [{ key: value }, { key: value }],
  },
};


//另一个页面调用函数
import {routes , skipToElement} from '../../../../../base';

const onclick=(values)=>{
  if(values){
    skipToElement(values);
  }
}

4.Modal.confirm( )

antd中的Modal弹窗，进行交互的操作。

  Modal.confirm({
    title: '标题',
    icon: <Excalmation />,
    okText: '确定',
    cancelText: '取消',
    onOk: () => {},
    onCancel: () => {},
  });

5.`includes()`

includes() 方法用于判断数组是否包含某个指定的值，并返回一个布尔值。该方法是Array.prototype的实例方法，因此可以在任何数组对象上调用它。

const arr = [1, 2, 3, 4, 5];

console.log(arr.includes(2)); // 输出：true
console.log(arr.includes(6)); // 输出：false

includes() 方法可以接受两个参数：

searchElement（必选）：要搜索的元素。
fromIndex（可选）：从该索引处开始搜索 searchElement。默认值为 0，表示从数组的开始位置搜索。

const arr = [1, 2, 3, 4, 5];

console.log(arr.includes(2, 2)); // 输出：false
console.log(arr.includes(3, 3)); // 输出：true

includes() 方法是区分大小写的，也就是说，它使用的是全等比较（===）。如果你想进行不区分大小写的搜索，可以先将数组中的元素或要搜索的元素转换为相同的大小写形式，然后再使用 includes() 方法进行搜索。

const arr = ['apple', 'Banana', 'orange'];

console.log(arr.includes('banana')); // 输出：false
console.log(arr.includes('Banana'.toLowerCase())); // 输出：true

在这个例子中，arr.includes('banana') 的结果是 false，因为 'banana' 和 'Banana' 是区分大小写的。而 arr.includes('Banana'.toLowerCase()) 将 'Banana' 转换为小写，然后再进行搜索，因此结果是 true。

6.`filter( )`

filter 方法创建了一个由通过测试的元素组成的新数组。

const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // 输出：[2, 4, 6]


const newData=data?.filter((e)=>lowData?.include(x))||[];

在这个例子中，filter 方法接收一个回调函数作为参数，该函数对数组中的每个元素执行，并返回一个布尔值。如果返回 true，则该元素会被包含在新数组中。

filter 方法不会改变原始数组，而是返回一个新的数组。这是与 map 方法的一个重要区别，map 方法会返回一个由回调函数结果组成的新数组，但不会去除不符合条件的元素。

filter 方法也可以接受第二个参数，即 thisValue，用于指定回调函数中的 this 绑定。如果提供了 thisValue，回调函数中的 this 将指向 thisValue。

const numbers = [1, 2, 3, 4, 5, 6];

// 使用 thisValue 绑定 numbers 数组到回调函数中的 this
const evenNumbers = numbers.filter(function(number, index, arr) {
  // 在回调函数中使用 this.numbers 来引用原始数组
  return this.numbers[index] % 2 === 0;
}, { numbers: numbers });

console.log(evenNumbers); // 输出：[2, 4, 6]

在这个例子中，我们通过对象 { numbers: numbers } 作为 thisValue 传递给了 filter 方法。这样，回调函数中的 this 就指向了这个对象，而在回调函数内部，我们可以使用 this.numbers 来引用原始的 numbers 数组。

如果你不提供 thisValue，回调函数中的 this 将默认为 undefined。因此，在没有 thisValue 的情况下，我们不能直接引用原始数组或其他对象。

需要注意的是，thisValue 并不是 filter 方法的一个常用参数。通常，我们不需要在 filter 方法中改变 this 的绑定，因为 filter 方法本身就会返回一个新数组，而且我们通常会在回调函数中直接使用参数。然而，thisValue 在其他一些数组方法中，如 map 和 reduce，也是可以使用的。

7.toString( )

toString 是一个内置的方法，用于将对象转换为其字符串表示形式。对于大多数对象，toString 方法会被调用时，如果没有显式定义该方法，则会调用其原型链上的 toString 方法。

const obj = { name: 'John', age: 30 };

console.log(obj.toString()); // 输出：[object Object]

value?.toString()

在这个例子中，obj 是一个对象，它没有显式定义 toString 方法。因此，当尝试调用 obj.toString() 时，JavaScript 会查找 obj 的原型链上的 toString 方法。大多数内置对象都有这个方法，因此会输出 [object Object]。

如果你想要自定义对象的 toString 方法，你可以像这样定义它：

const obj = {
  name: 'John',
  age: 30,
  toString: function() {
    return `Name: ${this.name}, Age: ${this.age}`;
  }
};

console.log(obj.toString()); // 输出：Name: John, Age: 30

在这个例子中，我们为 obj 定义了一个 toString 方法，它返回一个包含对象 name 和 age 属性的字符串。

toString 方法在需要将对象转换为字符串的地方非常有用，例如在控制台打印对象、将对象作为字符串传递给函数或与其他字符串操作时。

需要注意的是，toString 方法不应该被用来修改对象，它仅仅是为了对象的打印和表示。如果你想要克隆或序列化对象，应该使用其他方法，如 JSON.stringify。

8.Object.fromEntries()

Object.fromEntries() 是一个静态方法，用于将一个键值对数组转换为一个对象。

const entries = [['name', 'John'], ['age', 30], ['city', 'New York']];

const obj = Object.fromEntries(entries);

console.log(obj); // 输出：{ name: 'John', age: 30, city: 'New York' }

在这个例子中，Object.fromEntries(entries) 接受一个键值对数组作为参数，并返回一个新对象，该对象的属性由数组中的键和值组成。

Object.fromEntries() 方法在处理来自不同来源的数据时非常有用，例如从 URL 查询字符串中提取键值对，或者从其他编程语言的 API 返回的数据结构中提取键值对。

这个方法也可以接受第二个可选参数，这是一个函数，用于对键值对进行处理或转换。

const entries = [['name', 'John'], ['age', 30], ['city', 'New York']];

const obj = Object.fromEntries(entries, (value, key) => [key, value.toUpperCase()]);

console.log(obj); // 输出：{ name: 'JOHN', age: '30', city: 'NEW YORK' }

在这个例子中，我们传递了一个函数作为第二个参数，该函数将键值对中的值转换为大写。这样，新对象中的属性值也将是大写的。

Tip:

Object?.entries( ) 是这个的反操作！React项目知识积累（一）博客中有解释https://blog.csdn.net/weixin_45133582/article/details/139140450?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171677637916800185878591%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171677637916800185878591&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-139140450-null-null.nonecase&utm_term=Object.entries&spm=1018.2226.3001.4450

9.`getItem()`

getItem() 方法通常与 SessionStorage 和 LocalStorage 对象相关联。这些对象允许你在网页会话期间或长期存储数据。

SessionStorage 用于存储在当前会话中持久化的数据，即使页面刷新或关闭也会丢失。
LocalStorage 用于存储长期的数据，除非明确删除，否则数据会一直存在。

// 对于 SessionStorage
sessionStorage.setItem('key', 'value');
const value = sessionStorage.getItem('key');
console.log(value); // 输出：value

// 对于 LocalStorage
localStorage.setItem('key', 'value');
const value = localStorage.getItem('key');
console.log(value); // 输出：value

在这个例子中，我们首先使用 setItem() 方法向 SessionStorage 或 LocalStorage 存储了一些数据，然后使用 getItem() 方法检索了相同键的数据。

getItem() 方法的参数是一个字符串，表示你想要检索的数据的键。如果存储中存在该键，则 getItem() 方法将返回与该键关联的值；如果不存在，则返回 null。

请注意，getItem() 方法检索的数据类型始终是字符串。如果原始数据类型不是字符串，存储时会自动转换为字符串，检索时也会返回字符串形式的数据。如果需要转换回原始数据类型，你可能需要在获取数据后进行手动转换。

10.Object.keys( )和Object.values( )

在JavaScript中，Object.keys() 和 Object.values() 方法用于遍历对象（Object）的属性和值。

`Object.keys()`

Object.keys() 方法返回一个由指定对象自身的所有可枚举属性（包括其原型链上的可枚举属性）组成的数组。

const obj = {
  name: 'John',
  age: 30,
  isStudent: false
};

const keys = Object.keys(obj);
console.log(keys); // 输出：['name', 'age', 'isStudent']

`Object.values()`

Object.values() 方法返回一个由指定对象自身的所有可枚举属性值组成的数组。

const obj = {
  name: 'John',
  age: 30,
  isStudent: false
};

const values = Object.values(obj);
console.log(values); // 输出：['John', 30, false]

区别

Object.keys() 返回的是键名的数组。
Object.values() 返回的是键值的数组。

使用 `forEach` 遍历

你也可以使用 forEach 方法遍历这些数组。

const obj = {
  name: 'John',
  age: 30,
  isStudent: false
};

Object.keys(obj).forEach(key => {
  console.log(`${key}: ${obj[key]}`);
});

// 输出：
// name: John
// age: 30
// isStudent: false

或者，对于 Object.values()：

const obj = {
  name: 'John',
  age: 30,
  isStudent: false
};

Object.values(obj).forEach(value => {
  console.log(value);
});

// 输出：
// John
// 30
// false

这些方法在处理对象时非常有用，特别是在需要获取对象的属性或值，然后进行进一步操作时。