React项目知识积累（一）

吃蛋糕的居居

已于 2024-05-23 17:59:47 修改

阅读量983

点赞数 38

文章标签： javascript reactjs 前端 html es6 html5 json

于 2024-05-23 17:21:36 首次发布

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

版权

1.useRequest 请求函数

import { useRequest } from 'ahooks';

export default {
  setup() {
    // 使用 useRequest 钩子
    const {
      loading: reviewerLoading,
      data: reviewerData,
      run: getReviewer, //refresh,
    } = useRequest((data) => {
      request('/api/most/postindex', {
        method: 'post',
        data: {
          id: 'indexId',
          // 确保在这里正确传递了 date 参数
          date: data,
        },
      });
    }, {
      manual: true,
      defaultParams: [new Date()], // 使用当前日期作为默认参数
      debounceWait: 1000,
      onError: (e) => message.error('获取数据失败'),
    });

    // 你可以在组件的方法中调用 getReviewer 函数
    // 例如，在 componentDidMount 中
    getReviewer();

    return {
      reviewerLoading,
      reviewerData,
    };
  },
};





const date = new Date(); // 假设这是你要传递的日期
getReviewer(date); // 调用函数并传递日期

下面是代码片段的说明：

reviewerLoading：表示加载状态，当请求正在进行时，它将为 true。
reviewerData：表示请求成功后的数据，当请求成功且没有错误时，它将包含数据。
getReviewer：一个函数，用于重新运行请求。

使用 useRequest 的配置：

manual：设置为 true，意味着你需要手动调用 getReviewer 函数来触发请求。
defaultParams：默认参数数组，这里似乎是想传递一个 date 参数，但代码中没有提供具体的 date 值。
debounceWait：防抖等待时间，设置为 1000 毫秒（1秒），意味着在连续的请求之间会有 1 秒的延迟。
onError：错误处理函数，如果请求失败，将调用此函数，并使用 message.error 显示错误消息。

你需要确保 date 参数被正确传递给请求。如果 date 是一个变量，你应该在调用 getReviewer 时传递它。

2.`scrollIntoView 移动到指定位置`

将一个元素平滑地滚动到浏览器视窗的可见区域。

function scrollToElement(element) {
  element.scrollIntoView({ block: "start", behavior: "smooth" });
}

// 使用示例
let myElement = document.getElementById("myElement");
scrollToElement(myElement);

//定位对应classname的元素位置
const listItems = document.querySelectorAll("#classname");
listItems[0]?.scrollIntoView({ block:"start",behavior:"smooth", });

block：这个选项定义了元素如何被滚动到视窗中。"start"值意味着元素将被放置在视窗的开始位置。如果您将其设置为"end"，元素将被放置在视窗的结束位置。
behavior：这个选项定义了滚动的行为。"smooth"值意味着滚动将会是平滑的，而不是瞬间完成。

这个函数接受一个Element对象作为参数，并将其平滑地滚动到视窗的顶部。

请记住，要使这个方法生效，您尝试滚动的元素必须是DOM的一部分，而且scrollIntoView方法必须在DOM完全加载后调用。否则，可能找不到元素，滚动也不会发生。

此外，scrollIntoView的行为可能会受到元素和视窗的CSS样式的影响。例如，如果元素被设置为display: none;，它将不可见，调用scrollIntoView将不会有任何效果，除非您将它的显示样式更改为display: block;或其他可见的显示类型。

<h1> scrollIntoView 示例 </h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>这是第三个段落。</p>

<script>
// 获取要滚动的元素
var element = document.querySelector('h1');

// 滚动到元素
element.scrollIntoView({ block: 'start', behavior: 'smooth' });
</script>

我们有一个带有标题和三个段落的简单页面。JavaScript 代码获取了标题元素（<h1>），并使用 scrollIntoView 方法将其滚动到视图的开头，并使用了平滑的滚动行为。

如果你的页面是响应式的，确保在移动设备上测试滚动效果，因为移动浏览器的滚动行为可能与桌面浏览器不同。

3.new Clipboard 复制到剪切板

创建了一个新的 Clipboard 实例，该实例绑定到了具有 copytem-btn 类名的元素上。

Clipboard 是 Web API 的一部分，允许网页访问系统剪贴板。这个API在现代浏览器中得到了广泛的支持。当你点击具有 copytem-btn 类的元素时，将会触发复制事件，将指定文本复制到剪贴板。

  useEffect(() => {
    const copy = new Clipboard('.copytem-btn');
    copy.on('success', () => {
      //防止触发多次
      if (document.getElementsByClassName('ant-message-notice').length === 0) {
        message.success('复制成功', 0.5);
      }
    });
    copy.on('error', () => {
      if (document.getElementsByClassName('ant-message-notice').length === 0) {
        message.error('复制失败', 0.5);
      }
    });
    return () => {
      copy.destroy(); // 清理副作用
    };
  }, []);


  return (
    <>
      <span
        className={`${styles.copy} copytem-btn`} //className="copytem-btn"
        data-clipboard-text={`姓名：\n职务： \n是否有资格： \n获取： \n工作）:`}
      >
        复制
      </span>
    </>
  );

<button class="aaa-button">复制文本</button>


// 创建 Clipboard 实例
new Clipboard('.aaa-button', {
  text: function(trigger) {
    // 在这里返回你想要复制到剪贴板的内容
    return '这是一段文本';
  }
});

在这个例子中，text 选项是一个回调函数，它在用户点击按钮时被调用，你应该在这个函数中返回你想要复制到剪贴板的内容。

请注意，为了保护用户的安全和隐私，现代浏览器对剪贴板访问进行了严格的限制。通常，网站需要在用户明确操作（如点击按钮）后才能访问剪贴板。此外，一些浏览器扩展程序可能会阻止第三方网站访问剪贴板。

4.网络开发中常用的 HTTP 方法

POST：POST 方法用于向服务器发送数据以创建新资源。通常用于提交表单或发送将在服务器上处理并保存的数据。
GET：GET 方法用于从服务器检索数据。它是获取资源的最常见方法，它在不修改服务器上任何内容的情况下检索数据。
DELETE：DELETE 方法用于删除服务器上的指定资源。当您想要从服务器中删除特定资源时使用。

PUT：PUT 方法用于向服务器上传新数据，并替换服务器上的现有资源。它类似于 POST 方法，但是用于完全替换资源而不是创建新资源。
PATCH：PATCH 方法用于向服务器上传部分数据，并对服务器上的现有资源进行局部更新。它类似于 PUT 方法，但是只更新指定资源的部分内容。
HEAD：HEAD 方法与 GET 方法类似，但是它只返回响应头信息，而不返回实际的响应体数据。它通常用于检查资源的元数据或验证资源是否存在。
OPTIONS：OPTIONS 方法用于获取有关服务器支持的可用方法和请求头的信息。它可以用于检测服务器的功能性和配置。
TRACE：TRACE 方法用于回显服务器收到的请求，以便客户端可以查看在请求传递过程中是否有任何修改或添加。

5.JS中的可选链

在 JavaScript 中，可选链（Optional Chaining）是一种语法特性，用于简化访问对象属性或方法的过程，尤其是当对象的某些属性可能为 null 或 undefined 时。可选链的语法是使用问号（?）来表示属性或方法的访问，以避免在访问可能为 null 或 undefined 的属性或方法时出现错误。

例如，假设我们有一个对象 person，它具有一个名为address的属性，而address属性又具有一个名为city的属性。如果我们要访问person对象的city属性，传统的方式可能是这样的：

let city = person.address ? person.address.city : undefined;

而使用可选链的语法，可以简化为：

let city = person.address?.city;

这样，如果 address 属性为 null 或 undefined，整个表达式会立即返回 undefined，而不会抛出错误。可选链在处理嵌套对象属性的访问时非常有用，可以减少代码中大量的空值检查，使代码更加简洁和易读。可选链在 ES2020 中被正式引入作为 JavaScript 的新特性。

6.Object.entries()

Object.entries() 是 JavaScript 中用于获取对象自身可枚举属性的键值对的方法。它返回一个由给定对象的自身可枚举属性的 [key, value] 对组成的数组。

//举个例子，假设有一个对象 person:
const person = {
  name: 'Alice',
  age: 30,
  city: 'New York'
};

//使用 Object.entries() 方法：
const entries = Object.entries(person);
console.log(entries);

//输出结果会是一个包含 person 对象所有可枚举属性的键值对的数组：
[
  ['name', 'Alice'],
  ['age', 30],
  ['city', 'New York']
]
//这个方法通常用于遍历对象的属性，特别是在需要将对象的属性转换为数组格式时很有用。

7.forEach()

forEach() 是 JavaScript 数组对象的一个方法，用于遍历数组的每个元素并对其执行指定的操作。它接受一个回调函数作为参数，并在数组的每个元素上调用这个回调函数。

array.forEach(function(currentValue, index, array) {
  // 执行操作的代码
});
//currentValue：当前遍历到的元素的值。
//index：当前遍历到的元素的索引。
//array：正在遍历的原始数组。

//举个例子，假设有一个数组 numbers：
const numbers = [1, 2, 3, 4, 5];

//我们可以使用 forEach() 遍历数组中的每个元素，并将它们打印到控制台：
numbers.forEach(function(number) {
  console.log(number);
});

//输出结果：
1
2
3
4
5

//回调函数也可以是箭头函数的形式：
numbers.forEach(number => console.log(number));

forEach() 方法通常用于在不需要返回新数组的情况下遍历数组并执行一些操作。如果需要返回一个新的数组，可以考虑使用 map() 方法。

8.ref.current.setFieldValue

Ref?.current?.setFieldValue(name,null)

ref.current.setFieldValue 用于使用 React 或其他表单处理库来设置表单字段的值。

在 React 中，可以使用 useRef 钩子来创建一个引用对象，并将其与表单组件相关联。通过访问引用对象的 current 属性，可以获取对表单组件实例的引用。

假设我们有一个 React 表单组件，并在表单中有一个名为 name 的字段。我们可以使用 useRef 来创建一个引用对象，并在需要时使用 setFieldValue 方法设置表单字段的值。

首先，在函数组件中使用 useRef 创建引用对象：

const formRef = useRef(null);

然后，在需要设置字段值的地方，可以使用 setFieldValue 方法：

formRef.current.setFieldValue('name', 'John');

这行代码将会将表单中 name 字段的值设置为 'John'。

在React应用程序中更新表单字段的常见模式。这个模式涉及到使用useRef钩子来获取组件的引用，然后调用该引用上的方法来设置字段的值。

下面是对代码的解析：

Ref.current：这是在React中访问ref对象当前实例的常见模式。Ref是一个指向React组件的引用，而.current用于访问组件的实例。
setFieldValue：这可能是在自定义钩子中定义的方法，用于设置表单字段的值。方法名暗示它更新表单中的字段值。

通常，setFieldValue方法会接受两个参数：字段的名称和新的值。

以下是一个自定义钩子使用这种模式的示例：

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

function useForm({ initialValues }) {
  const [formValues, setFormValues] = useState(initialValues);
  const inputRef = useRef(null);

  function setFieldValue(name, value) {
    setFormValues({ ...formValues, [name]: value });
  }

  return {
    formValues,
    setFieldValue,
    inputRef,
  };
}

// 使用示例
function MyForm() {
  const { formValues, setFieldValue, inputRef } = useForm({
    name: '',
    email: '',
  });

  const handleChange = (e) => {
    setFieldValue(e.target.name, e.target.value);
  };

  return (
    <div>
      <input
        ref={inputRef}
        type="text"
        name="name"
        value={formValues.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formValues.email}
        onChange={handleChange}
      />
    </div>
  );
}

在这个例子中，useForm是一个自定义钩子，它管理表单的状态并提供一个setFieldValue方法来更新单个表单字段。MyForm组件使用这个钩子，并通过调用setFieldValue方法来更新表单值。

9.ref.current.setFields

Ref.current.setFields([{ name, errors: " " }]);

ref.current.setFields 这种命名约定通常用于表单处理库中，用于设置表单字段的值或属性。

使用 Ant Design 的 Form 组件，可能会有一个 formRef 引用对象，我们可以通过 setFieldsValue 方法来设置表单字段的值：

formRef.current.setFields([{ name: 'John', age: 30 },{ name: 'Johns', age: 302 }]);

在上述例子中，setFields 方法接受一个对象作为参数，该对象的键值对表示要设置的字段名和对应的值。

在React中，ref.current.setFields 并不是一个标准的API。

如果setFields是一个组件的方法，它可能用于更新组件的多个字段。在这种情况下，你会在组件内部调用这个方法，而不是在自定义钩子中。

假设setFields是一个更新表单字段的方法，它可能看起来像这样：

class MyFormComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
      // ...其他字段
    };
  }

  setFields(name, value) {
    this.setState({ [name]: value });
  }

  render() {
    const { name, email, // ...其他字段 } = this.state;

    return (
      <div>
        <input
          type="text"
          value={name}
          onChange={(e) => this.setFields('name', e.target.value)}
        />
        <input
          type="email"
          value={email}
          onChange={(e) => this.setFields('email', e.target.value)}
        />
        {/* ...其他输入字段 */}
      </div>
    );
  }
}

在这个假设的例子中，setFields方法接受两个参数：字段的名称和新的值。这个方法会更新组件状态中的相应字段。

10.JSON.stringify

JSON.stringify 是一个 JavaScript 内置函数，用于将 JavaScript 对象转换为 JSON 字符串。

JSON.stringify(value, replacer, space)

value：要转换为 JSON 字符串的 JavaScript 对象或值。
replacer (可选)：用于转换结果的函数或数组。如果是函数，则只有函数返回值才会被包含在最终的 JSON 字符串中。如果是数组，则只有数组中指定的属性名才会被包含在最终的 JSON 字符串中。
space (可选)：用于控制结果字符串缩进的空格数，或者可以是一个字符串。如果是数字，则表示缩进空格数；如果是字符串，则使用该字符串作为缩进字符。

const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString);
// 输出：{"name":"John","age":30}

const obj2 = { name: "John", age: 30, city: "New York" };
const jsonString2 = JSON.stringify(obj2, ["name", "city"]);
console.log(jsonString2);
// 输出：{"name":"John","city":"New York"}

const obj3 = { name: "John", age: 30, city: "New York" };
const jsonString3 = JSON.stringify(obj3, null, 2);
console.log(jsonString3);
/* 输出：
{
  "name": "John",
  "age": 30,
  "city": "New York"
}
*/

JSON.stringify 在处理对象时会自动序列化对象的属性，但某些特殊值（如函数、undefined）会被忽略。可以通过传递 replacer 参数来自定义序列化过程，并通过 space 参数来美化输出的 JSON 字符串。

JSON.stringify 是 JavaScript 中一个非常有用的方法，它将一个 JavaScript 对象转换成一个 JSON 字符串。这个方法是 JSON 对象的一个静态方法，可以在任何地方直接调用，不需要创建 JSON 实例。

下面是 JSON.stringify 方法的基本使用示例：

// 创建一个 JavaScript 对象
var obj = {
  name: '张三',
  age: 30,
  city: '北京'
};

// 将对象转换为 JSON 字符串
var jsonString = JSON.stringify(obj);

console.log(jsonString);
// 输出将会是：
// {"name":"张三","age":30,"city":"北京"}

JSON.stringify 方法在转换对象时有一些重要的行为：

数值：所有的数值都会被转换为字符串。
布尔值：true 会被转换为 "true"，false 会被转换为 "false"。
字符串：字符串会保持原样，除非字符串中包含特殊字符，比如 \n、\t 等，这时候字符串会被转义。
对象和数组：对象和数组都会被转换为 JSON 格式的字符串。
函数、undefined 和循环引用：函数、undefined 和循环引用（循环引用指的是对象自己引用了自己）无法被转换为 JSON 字符串，JSON.stringify 会抛出错误。
空值：null 会被转换为 "null"。
日期：日期对象会被转换为字符串，通常是 ISO 8601 格式的日期字符串。
正则表达式：正则表达式对象也会被转换为字符串。

您还可以给 JSON.stringify 传递第三个参数，这是一个回调函数，用于修改转换过程中的值。这个回调函数可以用来处理对象中的特定属性或者修改数组中的元素。

var obj = {
  name: '张三',
  age: 30,
  city: '北京'
};

// 使用回调函数来修改 JSON 输出
var jsonString = JSON.stringify(obj, (key, value) => {
  if (typeof value === 'number') {
    return value.toString();
  }
  return value;
});

console.log(jsonString);
// 输出可能会是：
// {"name":"张三","age":"30","city":"北京"}

在这个例子中，回调函数用于将数值转换为字符串。

需要注意的是，JSON.stringify 并不适合转换所有类型的 JavaScript 值。对于一些复杂的对象，比如包含函数、undefined 或循环引用的对象，您可能需要使用其他方法来序列化这些数据。