在React Material-UI中“ makeStyles”的内部实现？

Question

在React Material-UI中“ makeStyles”的内部实现？

这个问题的目的是了解幕后发生的事情。每次找到代码时，makeStyles()我都会感觉自己只是在进行纯复制粘贴，而不了解引擎盖下发生的事情。所以我想在这里发布一个问题，以便有人可以帮助我。

我已经在许多React应用程序中看到以下类型的代码。我很想知道当我们打电话给时发生了什么makeStyles()。因此，我跳入了它的定义，但我不明白它的含义。有人可以帮助我了解如何阅读/理解它。

我在这里了解的是，我正在传递一个名为的函数theme。通过该函数后，我不知道发生了什么。我也很高兴有人能帮助我解决这个问题。

// Calling makeStyles()
const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
  },
  drawer: {
    [theme.breakpoints.up('sm')]: {
      width: drawerWidth,
      flexShrink: 0,
    },
  },
  appBar: {
    marginLeft: drawerWidth,
    [theme.breakpoints.up('sm')]: {
      width: `calc(100% - ${drawerWidth}px)`,
    },
  },
  menuButton: {
    marginRight: theme.spacing(2),
    [theme.breakpoints.up('sm')]: {
      display: 'none',
    },
  },
  toolbar: theme.mixins.toolbar,
  drawerPaper: {
    width: drawerWidth,
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
  },
}));

//definition of makeStyles()
import { Theme as DefaultTheme } from './createMuiTheme';
import { Styles, WithStylesOptions } from '@material-ui/styles/withStyles';
import { StylesHook } from '@material-ui/styles/makeStyles';

export default function makeStyles<
  Theme = DefaultTheme,
  Props extends {} = {},
  ClassKey extends string = string
>(
  styles: Styles<Theme, Props, ClassKey>,
  options?: WithStylesOptions<Theme>,
): StylesHook<Styles<Theme, Props, ClassKey>>;

Run Code Online (Sandbox Code Playgroud)

Answer 1

Rya*_*ell 13

输入/输出/副作用的高级图片

制作样式

概述：此函数通常在 JavaScript 文件的顶层调用（而不是从组件/函数中调用），它返回一个函数（通常称为useStyles），该函数将在函数组件中使用。
输入：样式对象或样式对象创建器函数
- 如果输入是一个对象，则假定该对象的每个属性都定义了一个样式规则。属性名称是规则名称，属性值是具有 CSS 属性和/或嵌套规则的对象。每个样式规则稍后将用于生成 CSS 类。
- 如果输入是一个函数，则假定它是一个函数，它接收主题作为参数，然后返回一个样式对象，其结构在输入是对象的情况下描述。
- 在makeStyles 函数声明中，此输入被调用stylesOrCreator。然后由getStylesCreator 函数将其规范化为具有create指向将返回样式对象的函数的属性的对象。
输出：useStyles函数
- 该函数返回由makeStyles通常被称为useStyles是一个自定义的钩子。这意味着它只能从函数组件内部调用，并且必须无条件调用。
- 在返回此useStyles函数时，几乎没有发生任何事情。该函数知道它的stylesCreator，但尚未使用它。通过styleCreator 的 options，该useStyles函数知道index，稍后将用于确定<head>这些样式相对于其他调用makeStyles/生成的其他样式表在样式表中的位置useStyles。
副作用：增加一个全局计数器，用于确定由<head>生成的样式表中的索引makeStyles/useStyles。

使用样式

概述：这是由返回的函数makeStyles。应该从函数组件中调用它以获取classes下面描述的对象。
可选输入：props对象
- 如果通过，这通常props是使用它的函数组件的。然后这将作为参数传递给值为函数的任何样式规则。
- 您可以在以下答案中看到使用它的示例：
输出：classes对象
- 此对象将样式对象中的每个样式规则名称映射到生成的 CSS 类名称。然后classes.rulename，您可以利用组件渲染将该 CSS 类应用于元素。
副作用：在<head>每个样式规则包含一个 CSS 类的 DOM 中添加一个样式表。

主要工作发生的地方

当您调用该useStyles函数时，会发生大部分魔术。函数的开头在这里。以下是它执行的关键步骤：

通话附加。在附加功能执行以下主要步骤：
- 调用stylesCreator.create来获取您的样式对象。
- 利用JSS来创建一个样式表根据您的样式对象。JSS 也在此处生成将在classes对象中的类名。
- 将此样式表附加到 DOM 中的适当位置<head>。
返回类对象
如果发生某些事情触发重新创建 CSS 或组件卸载，则调用detach以删除先前生成的样式表。

归档时间：	6 年，7 月前
查看次数：	661 次
最近记录：	6 年，7 月前