React项目知识积累（三）

1.@primary-color 公共样式

less文件中的@primary-color，会在config.js中的theme中统一写,方便统一更改。

config.js:
theme{
  "primary-color":"#f0f0f0"，
  "font-size":"16px",
}

less:
.classname{
   color:@primary-color;
   font-size:@font-size;
}

2.组件传参的时候，如果是布尔类型的，并且有默认值的，可以直接这样来写：

//父组件
<TableMyself explanatoryText /> //默认是false，这样传的话，传的值就是true。

//TableMyself 子组件,默认值是false
const TableMyself=({ explanatoryText = false, })=>{ 
 const rules= [{ required:true,message:"这是必填的" }];
  return (<div> </div>);
 };

export default TableMyself;

3.js中组件的导出

export { default as input } from './input';

这行代码的作用是导出 ./input 模块中的默认出口，并将其重命名为 input。这样，在其他文件中，您可以使用 import input from './input' 来导入这个重命名后的默认出口。

请注意，default 关键字是用来指示模块中的默认导出项的。如果一个模块中有多个导出项，您需要为它们指定名称，或者使用 export default 来导出其中一个作为默认导出项。在一个模块中，默认导出项只能有一个。

在其他文件中，您可以使用 import input from './input' 语法来导入这个重命名后的默认导出项。

请注意，一个模块中只能有一个默认导出项。如果您想要导出多个不同的项，您需要为每个导出项指定一个名称，如下所示：

export const someConstant = 'value';
export function someFunction() {
  // function body
}
export class SomeClass {}

我们导出了一个常量、一个函数和一个类，每个导出项都有明确的名称。

as 是用来在导出（export）或导入（import）时重命名项的关键字。当你导出（export）一个模块时，你可以使用 as 关键字来改变导出项的名称，使其与原始模块中的名称不同。同样，在导入（import）模块时，你也可以使用 as 来给导入的项指定一个新的名称。

// components.js
export const Button = /* ... */;
export const Input = /* ... */;

// main.js
import { Button as CustomButton, Input as CustomInput } from './components.js';

// 现在我们可以使用 CustomButton 和 CustomInput 而不是 Button 和 Input

我们使用 as 来将 Button 和 Input 重命名为 CustomButton 和 CustomInput。这样，在 main.js 文件中，我们可以使用 CustomButton 和 CustomInput 来引用从 components.js 导入的组件。

4.Array.isArray()

Array.isArray() 是 JavaScript 中的一个静态方法，用于检查传递给它的参数是否是一个 Array 对象。这个方法不会检查对象的原型链，也不会依赖于它所附加的 Array 构造函数。如果参数是一个数组，Array.isArray() 返回 true，否则返回 false。

console.log(Array.isArray([1, 2, 3])); // 输出：true
console.log(Array.isArray({ foo: 123 })); // 输出：false
console.log(Array.isArray('hello')); // 输出：false
console.log(Array.isArray(undefined)); // 输出：false

在这个例子中，Array.isArray([1, 2, 3]) 返回 true，因为 [1, 2, 3] 是一个数组。而 Array.isArray({ foo: 123 })、Array.isArray('hello') 和 Array.isArray(undefined) 都返回 false，因为它们都不是数组。

这个方法通常用于检查变量是否应该被当作数组处理，或者在处理数组时进行类型检查。

5.join( )

join 方法用于将数组中的所有元素连接成一个字符串。该方法接受一个可选参数，即一个分隔符字符串，用于在数组的每个元素之间插入。如果没有提供分隔符，则默认使用逗号。

var array = ['apple', 'banana', 'cherry'];
var string = array.join();// 输出: "apple,banana,cherry"


var array = ['apple', 'banana', 'cherry'];
var string = array.join(' | ');
console.log(string); // 输出: "apple | banana | cherry"

text?.join(" \n ");

6.async   await 

async 和 await 是 JavaScript 中用于处理异步编程的关键词。

async 关键字用于声明一个异步函数。一个异步函数返回一个 Promise 对象，这意味着你可以使用 then 和 catch 方法来处理异步函数的结果。

async function myAsyncFunction() {
  // 异步操作...
  return "Hello, World!";
}

myAsyncFunction().then(result => {
  console.log(result); // "Hello, World!"
});

await 关键字用于等待一个 Promise 解决。在异步函数内部，你可以使用 await 来暂停代码的执行，直到 Promise 解决为止。

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}

fetchData();

在上面的例子中，fetch 是一个异步操作，它会返回一个 Promise。使用 await 等待 fetch 操作完成后，再解析 JSON 数据。

await 只能在异步函数内部使用。如果在同步函数或代码块中使用 await，将会抛出一个错误。

使用 async 和 await 可以使得异步代码更加清晰、易读和易维护，因为它允许你使用同步代码的写法来处理异步操作。

const onFish = async ()={
try{ await myRequest(); }catch{ }
}

7.try  catch

try 和 catch 语句用于捕获和处理代码块中的错误。这是处理异步编程中潜在错误的一种方式。

try 语句块用于包围可能会抛出错误的代码。如果在这个块中的代码抛出了一个错误，执行将立即跳到 catch 语句块（如果有的话）。

try {
  // 可能会抛出错误的代码
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
} catch (error) {
  // 处理错误的代码
  console.error('发生错误:', error);
}

在上述代码中，fetch 操作可能会因为多种原因失败（例如，网络问题或服务器错误），导致一个错误被抛出。try 块中的代码试图执行这个潜在的异步操作，而 catch 块则用于捕获任何抛出的错误。

catch 语句块接收一个参数，通常命名为 error，它包含了被抛出的错误对象。在 catch 块中，你可以添加代码来处理错误，例如记录错误、显示错误消息或进行其他错误处理操作。

如果你想在无论是否有错误抛出的情况下执行某些代码，可以使用一个可选的 finally 语句块。finally 块会在 try 和 catch 块之后执行，通常用于执行清理工作或释放资源。

try {
  // 可能会抛出错误的代码
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
} catch (error) {
  // 处理错误的代码
  console.error('发生错误:', error);
} finally {
  // 这段代码无论是否抛出错误都会执行
  console.log('尝试完成，进行清理工作');
}

在上述代码中，无论 try 块中的代码是否抛出错误，finally 块中的代码都会执行。这可以用来确保资源被正确释放或文件被关闭等。

8.Object.keys()

Object.keys()是一个内置函数，用于返回一个由给定对象自身的所有可枚举属性名称组成的数组。

const obj = {
  name: '张三',
  age: 25,
  gender: '男'
};

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

在这个例子中，Object.keys(obj)返回了一个数组 ['name', 'age', 'gender']，包含了对象 obj 的所有可枚举属性名。

Object.keys()的参数可以是任何对象，包括函数、数组和日期对象。对于数组和日期对象，它会返回索引数组。

const arr = ['a', 'b', 'c'];
const keysArr = Object.keys(arr);
console.log(keysArr); // 输出: ['0', '1', '2']

在这个例子中，Object.keys(arr)返回了数组 arr 的索引数组 ['0', '1', '2']。

对于函数对象，Object.keys()会返回所有可枚举属性，包括函数本身：

function sayHello() {
  console.log('你好');
}

const keysFunc = Object.keys(sayHello);
console.log(keysFunc); // 输出: ['name', 'length', 'prototype', 'sayHello']

在这个例子中，Object.keys(sayHello)返回了函数 sayHello 的所有可枚举属性，包括函数名、长度、原型和函数本身。

Object.keys()是一个非常有用的工具，用于探索对象的属性和遍历对象的属性名。

9.formRef.current.value

如果你想要更新 ref 对象引用的 DOM 元素的属性，你可以直接使用 ref.current.props.attributeName 来访问或设置属性。

例如，如果你想更新一个 <input> 元素的值，你可以这样做：

useEffect(() => {
  if (formRef.current) {
    formRef.current.value = '新的值';
  }
}, []);

在这个例子中，formRef.current.value 访问了 <input> 元素的 value 属性，并将其设置为字符串 '新的值'。

10.formRef.current.resetFields( )

在 React 中，如果你想要重置一个表单的所有字段，你通常会使用 reset 方法。

如果你有一个 formRef 引用了一个表单元素，并且该表单元素有一个 resetFields 方法，你可以直接调用它来重置表单的字段。例如，如果你使用的是 react-hook-form 这样的表单库，你可以这样调用 resetFields 方法：

import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, reset } = useForm();

  // ...

  const resetForm = () => {
    reset(); // 这将重置所有字段
  };

  return (
    <form>
      {/* 表单元素 */}
      <button type="button" onClick={resetForm}>重置表单</button>
    </form>
  );
}

在这个例子中，reset() 方法重置了所有表单字段。

如果你是在自定义表单组件中，并且定义了一个 resetFields 方法，你可以这样调用它：

function MyFormComponent() {
  const formRef = useRef();

  const resetFields = () => {
    formRef.current.resetFields(); // 调用自定义的 resetFields 方法
  };

  return (
    <form ref={formRef}>
      {/* 表单元素 */}
      <button type="button" onClick={resetFields}>重置表单</button>
    </form>
  );
}

在这个例子中，我们假设 MyFormComponent 组件有一个 resetFields 方法来重置表单字段。