小编Ben*_*ams的帖子

是否有使用任何好处useMemo（例如，对于密集的函数调用），而不是使用的组合useEffect和useState？

这是两个自定义钩子，它们的乍看效果完全相同，除了useMemo的返回值null位于第一个渲染器上：

const useCalculate = numberProp => {
  const [result, setResult] = useState<number>(null);

  useEffect(() => {
    setResult(expensiveCalculation(numberProp));
  }, [numberProp]);

  return result;
};

const useCalculateWithMemo = numberProp => {
  return useMemo(() => {
    return expensiveCalculation(numberProp);
  }, [numberProp]);
};

https://codesandbox.io/s/nkxolxwzkj

两者都计算每次“道具”更改时，useMemo踢球的“缓存” 在哪里？

现实世界中有哪些示例useMemo？

GitHub宣布了一项即将发布的功能GitHub Actions。

我对詹金斯（Jenkins）等CI工具对自动构建或测试的好处持肯定态度，GitHub Actions旨在将其用于将来。

在GitHub上拥有存储库并使用外部CI工具具有巨大的好处，即无需重写整个CI流程即可将存储库移至另一个Git存储库平台（甚至本地）。借助GitHub Actions，您或多或少与GitHub生态系统联系在一起。

我认为GitHub的Actions集成在本机环境中会更流畅，但是除此之外还有其他优点或缺点吗？

我已经尝试了一个小时来找到将Google字体导入VueJS组件的方法,但我似乎无法找到解决方案,什么都没有用,甚至还没有以前的StackOverflow问题.我发现的所有答案现在都是1.5到2岁.如果有人能提出最新的解决方案,我将非常感激.

我正在使用VueJS2 + Webpack + Vue-cli

我有一个 Recharts 用例，我渲染了超过 20,000 个数据点，这导致了阻塞渲染：

（CodeSandbox 有一个小的脉冲动画，因此在创建新图表数据时更容易看到阻塞渲染。）

在使用开发工具衡量性能时，很明显，造成这种情况的原因不是浏览器painting或rendering活动，而是 Recharts 的scripting活动：

我绝不想在这里责怪 Recharts，20k 点很多，但有没有人知道是否有办法绕过阻塞渲染？

我尝试过的事情：

1.) 增量加载

增量加载更多数据（例如 2k + 2k + 2k + ... = 20k），这只会导致更多、更小的渲染阻塞时刻。

2.) 渲染前加载动画

在渲染组件中添加了一个小的布尔状态来跟踪“挂载”状态，它至少会在图表组件挂载时显示加载动画，因此用户不会等待空白页面/路由切换：

const [showLoading, setShowLoading] = useState<boolean>(true);
const { isLoading, data } = useXY()   // remote data fetching
const [isMounted, setIsMounted] = useState(false);

useEffect(() => {
  setIsMounted(true);
}, []);

useEffect(() => {
  setShowLoading(isLoading || !isMounted);
}, [isLoading, isMounted]);

...

if (showLoading) return <LoadingAnimation />

return <div>...chart...</div>

图表 …

我希望在 VS Code 编辑器窗口中的行号和第一个意图/代码之间有一些空格：

我只想在编辑器中缩进代码而不在代码中实际添加空格。

我试过了"editor.glyphMargin"，但这只会增加行号左侧的空间，而不是行号和代码之间的空间。

我也知道“居中布局”视图，但这也减少了例如文件选择选项卡的宽度。

是否有我遗漏的设置或者我需要插件/自定义 CSS？

我想给我的图表一个渐变背景颜色，但我无法访问画布上下文，因为我的图表在我编写的包装器组件中呈现。

我想要达到的目标：

我的实际包装看起来像这样：

<script>
import { Line, mixins } from "vue-chartjs";
const { reactiveProp } = mixins;

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ["options"],
  components: {},
  mounted() {
    // this.chartData is created in the mixin
    this.renderChart(this.chartData, this.options);
  }
};
</script>

我将我的包装器用于不同的折线图，并让它的父级传递相关数据 - 有时每页多次使用包装器组件。

所有配置（选项、标签等）都在使用包装器的父组件中完成。

有没有办法将画布上下文从包装器获取到使用包装器的父组件？

要创建渐变，您需要这样的东西：

this.gradient = this.$refs.canvas
  .getContext("2d")
  .createLinearGradient(0, 0, 0, 450);

this.gradient.addColorStop(0, "rgba(255, 0,0, 0.5)");
this.gradient.addColorStop(0.5, "rgba(255, 0, 0, 0.25)");
this.gradient.addColorStop(1, "rgba(255, 0, 0, 0)");

..butthis.$refs.canvas在父组件中未定义，这会阻止我获取上下文，因此我无法创建渐变。

TL;DR React 有时呈现加载状态，有时不呈现，UI 没有变化。这可能是由于批量更新造成的。

我想知道下面的问题是否是由于批量更新造成的。如果答案是“是”，我想知道是否有首选的方式来选择退出 React 中的批量更新以获得确定性的渲染行为。如果您想跳过设置，请转到“实验”。

设置

这是设置，一个需要很长时间渲染的图表。这么长时间渲染被阻塞。这里有三种不同的方式来渲染图表：

1. 一种是正常方式
2. 一个带有“安装”渲染黑客的
3. 一个具有相同的“安装”渲染黑客，但有一个额外的 setTimeout

选项 2 和 3 都有一个useState检查它们是否已安装的小工具。我这样做是为了有条件地显示“正在加载”状态：

function ChartWithMountHack({ data }: { data: Data }) {
  // initially not mounted
  const [isMounted, setIsMounted] = useState<boolean>(false);

  useEffect(() => {
    // "Now I've been mounted!"
    setIsMounted(true);
  }, []);

  return !isMounted ? <p>Loading</p> : <Chart data={data} />;
}

我这样做是因为我想显示“正在加载”状态而不是阻塞渲染，因此例如页面切换或三元渲染（例如hasData ? <p>No data</p> : <Chart />）会立即显示，而不是阻塞。（如果有更好的方法，请告诉我！）

实验

现在，每个按钮将呈现三个选项/图表之一。同样，第二个和第三个图表有一个小技巧来检查它们是否已安装。

尝试快速来回单击第一个按钮和第二个按钮。您会看到有时“带挂载的图表”会（“正确地”）呈现“正在加载”状态，但有时它只是不呈现“正在加载”-而是阻止呈现，直到图表完成呈现（跳过“加载”状态）。

我认为这是由于渲染周期以及您是否在批处理的一个周期中获得两次更新。（第一：isMounted === false- …

我想为不同的客户使用相同的应用程序，每个客户都有不同的数据库（可能是本地的）。因此，我在构建阶段（例如在 CI/CD 中）没有可用于创建静态站点的数据。

getStaticProps我考虑过通过环境变量跳过生成站点。在构建网站时，我可以告诉 Next.js 不要使用任何数据，如下所示：

export const getStaticProps: GetStaticProps<HomePageProps> = async () => {
  const isBuildPhase = process.env.IS_BUILD;

  const data = isBuildPhase ? null : await fetchData();

  return {
    props: {
      data: data ?? null,
    },
    revalidate: 5 * 60,
  };
};

现在，我只想在运行时创建站点（使用next start），因为在运行时，构建的应用程序可以访问其数据库。在每个getStaticProps环境变量中都将进行配置，以便获取数据。当应用程序最初启动时，它将在访问时生成所有静态站点。

这种方法有很大的缺点吗？

这个问题是否有更好的解决方案？