1.保证对象不为假的方法

运算符 || 是逻辑或（OR）运算符，它用于判断表达式的真假。当使用 || 运算符时，如果第一个表达式（在这种情况下是对象）为真，则返回第一个表达式的值；如果第一个表达式为假，则返回第二个表达式的值。这种用法常用于确保对象不为假值，同时提供一个默认的空对象作为备选。

var result = obj || {};
//等价于
var result = obj ? obj : {};

2.forwardRef

forwardRef 是 React 中的一个函数，用于在函数组件中转发（forward）ref。它是 React 提供的一种高级技术，用于在组件之间传递 ref。

在 React 中，ref 用于引用组件或 DOM 元素，允许我们访问组件的实例或 DOM 节点。通常，ref 只能在类组件中使用，并通过 React.createRef() 或回调函数的方式来创建和传递。然而，函数组件通常是无状态的，没有实例来引用，因此无法直接使用 ref。

**forwardRef 的作用就是解决函数组件中无法直接使用 ref 的问题。**通过使用 forwardRef，我们可以将 ref 传递给函数组件，并在组件内部访问 ref。——> 注意，在组件内部使用了 ref，也不一定要给 ref 绑定为dom，ref 本质上可以绑定任何值

使用 forwardRef 的示例：

import React, { forwardRef } from 'react';

const MyComponent = forwardRef((props, ref) => {
  // 在这里可以访问 ref
  return <div ref={ref}>Hello, World!</div>;
});

// 使用 MyComponent
const App = () => {
  const myRef = React.createRef(); //这里的 myRef 对应的就是子组件MyComponent的那个 helloworld 的 div 元素dom，成功取到了子组件的实例对象！

  return <MyComponent ref={myRef} />;
};

在上面的示例中，我们定义了一个函数组件 MyComponent 并使用 forwardRef 包裹它。这样就可以将 ref 参数传递给组件，并在组件内部使用 ref。

在使用 MyComponent 的地方，我们创建了一个 ref（myRef），然后将它传递给 MyComponent 的 ref 属性。MyComponent 在内部使用 ref 来引用 <div> 元素。

通过这种方式，我们可以在函数组件内部使用 ref，并将其传递给需要引用的元素或组件。这对于访问子组件的实例或 DOM 元素非常有用，以便进行操作或获取信息。

注意：返回值也可以是一个类式组件

当 forwardRef 中的 return 返回一个类式组件时，它将使函数组件在外部使用时可以接受和传递 ref。这样，你可以通过 ref 属性引用类式组件的实例。

import React, { forwardRef } from 'react';

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

const ForwardedComponent = forwardRef((props, ref) => {
  return <MyComponent ref={ref} {...props} />; //返回值是类式组件
});

// 使用 ForwardedComponent
const App = () => {
  const myRef = React.createRef(); //成功取到了子组件（类式组件MyComponent）的实例对象

  return <ForwardedComponent ref={myRef} />; 
};

3.把组件作为 props 传入容器组件中

这是 react 实现了类似插槽的功能，被传入的组件是公共的内容，模版组件（例如模态框外壳）

而传入的内容是针对不同情况有不同的代码！

定义：

使用：

4.生成随机字符串

Math.random().toString().substring(3, 10) 是一段 JavaScript 代码，用于生成一个随机的字符串。

Math.random() 是一个 JavaScript 中的内置函数，它返回一个介于 0（包含）和 1（不包含）之间的随机浮点数。例如，可能返回 0.123456789。返回的数小数点后面有很多位。

所以可以实现这个效果

5.setState回调函数

例子：

this.setState({
  remove: true
}, () => {
  this.props.$el && this.props.$el.parentNode && (this.props.$el.parentNode.removeChild(this.props.$el))
})

用于更新组件的状态，并在状态更新完成后执行一个回调函数。

this.setState({ remove: true }, () => { ... }): 这是一个 setState 方法的调用，用于更新组件的状态。它接受一个对象作为第一个参数，其中包含要更新的状态属性和对应的新值。在这个例子中，要更新的状态属性是 remove，新值是 true。同时，作为 setState 的第二个参数，传递了一个回调函数，用于在状态更新完成后执行额外的操作。

6.&&代替 if 实现条件语句

例子：

this.props.$el && this.props.$el.parentNode && (this.props.$el.parentNode.removeChild(this.props.$el))

在回调函数中，这行代码用于检查 this.props.$el 是否存在以及其父节点是否存在，并在存在的情况下移除 this.props.$el 元素

等价于代码：

if(this.props.$el && this.props.$el.parentNode){
  this.props.$el.parentNode.removeChild(this.props.$el);
}

7.vscode点击import进入文件的配置方法

在根目录中创建 jsconfig.json，进行如下配置：

{
  "compilerOptions": {
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"],
  "include": ["src/**/*"],
  "vueCompilerOptions": {
    "experimentalCompatMode": 2
  }
}

8.登录功能的基本流程

1.调用登录接口得到 token

2.根据 token 调用 getUserInfo 接口得到用户信息，并进行本地存储

9.Object.keys()和Object.values()

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

例子：Object.keys(localStorage) 返回的是一个由 localStorage 的所有键名组成的数组。

Object.values() 遍历对象的每个属性并返回相应的属性值，然后将这些属性值组成一个新的数组返回。

10.vue2不要写两个 data

不要写两个 data，否则会报错找不到！