小编Dim*_*nis的帖子

我得到了通用的要点,即CommonsChunkPlugin查看所有入口点,检查它们之间是否存在共同的包/依赖关系,并将它们分成自己的包.

所以,我们假设我有以下配置:

...
enrty : {
    entry1 : 'entry1.js', //which has 'jquery' as a dependency
    entry2 : 'entry2.js', //which has 'jquery as a dependency
    vendors : [
        'jquery',
        'some_jquery_plugin' //which has 'jquery' as a dependency
    ]
},
output: {
    path: PATHS.build,
    filename: '[name].bundle.js'
}
...

如果我不使用捆绑 CommonsChunkPlugin

我最终会得到3个新的捆绑文件:

• entry1.bundle.js它包含来自entry1.js和的完整代码,jquery并包含自己的运行时
• entry2.bundle.js它包含来自entry2.js和的完整代码,jquery并包含自己的运行时
• vendors.bundle.js它包含来自jquery和的完整代码,some_jquery_plugin并包含自己的运行时

这显然很糟糕,因为我可能会jquery在页面中加载3次,所以我们不希望这样.

如果我捆绑使用 CommonsChunkPlugin

根据我传递给CommonsChunkPlugin任何以下任何参数的参数将发生:

• 情况1:如果我通过,{ name …

我正在使用React实现可过滤列表.列表的结构如下图所示.

前提

以下是它应该如何工作的描述:

• 状态位于最高级别组件即Search组件中.
• 该州描述如下:

{
    visible : boolean,
    files : array,
    filtered : array,
    query : string,
    currentlySelectedIndex : integer
}

• files 是一个可能非常大的数组,包含文件路径(10000个条目是一个合理的数字).
• filtered是用户键入至少2个字符后的过滤数组.我知道它是衍生数据,因此可以将其存储在状态中,但需要它

• currentlySelectedIndex 这是筛选列表中当前所选元素的索引.

• 用户在Input组件中键入2个以上的字母,对数组进行过滤,对于过滤后的数组中的每个条目,Result都会呈现一个组件

• 每个Result组件都显示部分匹配查询的完整路径,并突出显示路径的部分匹配部分.例如,Result组件的DOM,如果用户键入'le',则类似于:

  <li>this/is/a/fi<strong>le</strong>/path</li>

• 如果用户在Input组件聚焦时按下向上或向下键,则currentlySelectedIndex基于filtered阵列进行更改.这会导致Result与索引匹配的组件被标记为选中,从而导致重新呈现

问题

最初我用一个足够小的数组测试了这个files,使用了React的开发版本,并且一切正常.

当我不得不处理一个files大到10000个条目的数组时,问题出现了.在输入中键入2个字母会生成一个大列表,当我按下向上和向下键进行导航时,它会非常滞后.

起初我没有为Result元素定义组件,我只是在Search组件的每个渲染上动态制作列表,如下:

results  = this.state.filtered.map(function(file, index) {
    var start, end, matchIndex, match = this.state.query;

     matchIndex = file.indexOf(match);
     start = file.slice(0, matchIndex);
     end …

事件(DOM事件或系统事件)与操作有1:1的关系吗？即单击事件应该只触发一个动作？

例如,假设我们有一个显示10行2列表的页面.每行都有一个Product字段和Amount字段.Amount字段的范围输入范围为[0,10].用户可以单独设置每个产品的数量.

通过使用2个按钮,用户还可以选择2个选项.

• 按第二个按钮将禁用表格中除第一个产品外的所有产品(有效地将其金额设置为0,用户无法再与它们交互以设置其金额).我们称之为Option B
• 按第一个按钮可在第一个按钮之后启用所有产品(默认情况下,将每个产品的金额设置为1),用户可以再次与它们进行交互,以单独设置其金额.我们称之为Option A.

Option A selected:

    | PRODUCT          | AMOUNT    |
    |------------------|-----------|
    | Product A        |   - 4 +   |
    | Product B        |   - 0 +   |
    | Product C        |   - 4 +   |
    ````````````````````````````````

 _________
| Option A|  OPTION B
 `````````

Option B selected:

    | PRODUCT          | AMOUNT    |
    |------------------|-----------|
    | Product A        |   - 4 +   |
    | Product B        |  Disabled | (Amount == 0)
    | Product C …

我的问题很简单.

我只想让VS Code的调试器与webpack-dev-server一起工作而不忽略我的断点.

现在,webpack-dev-server从内存中提供捆绑的文件,而如果我理解正确的话,VS Code调试器会在磁盘上搜索它们(...或不？？)

因此,每当我设置断点时,我都会感到害怕

Breakpoint ignored because generated code not found (source map problem?)

现在,我可以找到的每个相关问题主要与打字稿有关,而不是webpack-dev-server从内存中提供的事实.我没有使用打字稿.似乎人们要么没有使用webpack-dev-server,要么我错过了一些明显的东西,后者用我的钱.

这是我的VS代码 launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}",
      "sourceMaps": true,
      "trace": true
    }
  ]
}

这些是我的相关内容 webpack.config.js

  devtool: 'cheap-module-source-map',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },

我尝试了各种修改 …

我是react-router的新手,我刚开始使用react-router V4编写应用程序.我想将道具传递给所呈现的组件<Match />,我想知道什么是"最佳"或"正确"的方式.

这是做这样的事吗？

<Match pattern="/" render={
    (defaultProps) => <MyComponent myProp = {myProp} {...defaultProps} />
}/>

这是(通过道具将组件传递给组件<Match />)甚至是使用react-router这样做的好习惯,还是反模式或其他东西; 如果是这样,为什么？

我试图在实践中理解Chrome的布局→绘图→复合管道是如何工作的.在我的测试中,我对Chrome在以下情况下的行为感到困惑.(Codepen)

var button = document.querySelector('button');
var red = document.querySelector('.red');
var blue = document.querySelector('.blue');
button.addEventListener('click', function() {
  red.classList.toggle('test');
})

.wrapper {
  height: 100%;
  width: 100%;
  background-color: teal;
  position: static;
}

.square {
  height: 200px;
  width: 200px;
  position: static;
  transition: transform 0.3s ease,
    opacity 0.3s ease,
    width 0.3s ease,
    height 0.3s ease,
    box-shadow 0.3s ease;
}

.red {
  /* position: absolute; */
  background-color: red;
  top: 100px;
  left: 100px;
  /* will-change: transform; */
  opacity: 1;
}

.blue {
  background-color: blue;
  z-index: 3; …

根据我的理解和迄今为止我在各种答案中所阅读的内容,并非所有生命周期方法都应该使用浅渲染来运行.特别componentDidMount

但是,当我这样做时,我注意到了

  beforeEach(function () {
    fakeComponentDidMount = sinon.stub(Component.prototype, 'componentDidMount');
    fakeComponentDidMount.callsFake(function () {});
    wrapper = shallow(<Component {...props} />);
  });

  afterEach(function () {
    fakeComponentDidMount.restore();
  });

  it('calls componentDidMount', function () {
    expect(fakeComponentDidMount.called).to.equal(true);
  });

测试通过.

那么,我在这里做错了还是我明白了什么？

以供参考

现在，在我的团队中，我们正在使用 Storybook v6 和该@storybook/addon-docs包来生成组件文档。

为了保持.stories.mdx文件较小，我们单独编写故事“展示”组件，然后将它们导入到文件中.stories.mdx。

例如

// showcase/HugeComponentShowcase.jsx

import SomeComponent from 'components/SomeComponent';

export default function HugeComponentShowcase() {
  return <div>
    <p>This is a huge component showcase using SomeComponent</p>
    <SomeComponent propA propB propC/>
    <SomeComponent propB />
  </div>
}

// SomeComponent.stories.mdx

import { Meta, Story, Preview, Props } from '@storybook/addon-docs';
import HugeComponentShowcase from 'showcase/HugeComponentShowcase'; 

<Preview >
  <Story name="Generic component" >
    <HugeComponentShowcase />
  </Story>
</Preview>

当你想显示展示的代码时，这将导致这种情况：

然而我希望能够看到的是：

<div>
  <p>This is a huge component showcase using SomeComponent</p>
  <SomeComponent propA …

我正在开发一个由以下"实体"组成的项目:

• 静态网站的几页
• 一个应用程序
• 管理仪表板

在我最初webpack.config的设置中,我将每个实体作为不同entry点处理.例如,我会有类似的东西

entry: {
    vendor: [
        'jquery',
        'bootstrap',
        'bootstrap/dist/css/bootstrap.css'
    ],
    admin: [
        'admin.js',
        'admin.css'
    ],
    websitePageA: [
        'analytics.js',
        'websitePageA.js',
        'websitePageA.css'
    ],
    websitePageB: [
        'analytics.js',
        'websitePageB.js',
        'websitePageB.css'
    ],
    websitePageC: [
        'analytics.js',
        'websitePageC.js',
        'websitePageC.css'
    ],
    app: [
        'analytics.js',
        'app.js',
        'app.css'
    ]
}

当我申请时,CommonsChunkPlugin我会以这样的方式尝试将我自己的公共文件(例如analytics.js上面的文件)分离到他们自己的common包和供应商公共文件(例如jquery)到他们自己的vendor包中.

然而,这在语义上起作用,我对结果不满意,因为当我制作一个vendor据说应该包含每个供应商文件的包时,我并没有这样做.并非每个页面都需要各个页面所需的每个供应商文件,因此我的优化方式是我的vendor包只包含这些入口点之间的公共供应商文件.

经过考虑,我认为最好的做法是将我的配置分为3个,一个用于app实体,一个用于管理仪表板实体,一个用于整个网站.

所以我现在有4个config文件,一个用于上述3个实体中的每一个,另一个用于webpack.config.js导入其他3个实体并导出包含它们的数组.

我webpack.config.js看起来像这样

'use strict';

const appConfig …

我已经广泛阅读了文档，但是，仍有一些部分不完全清楚，大多数与演员/服务有关

我对生成的演员生命周期的细节有点模糊。

• 调用.stop()带有生成的演员的服务也会.stop()是生成的演员还是他们被悬着？
• 我应该如何从机器上清除生成的演员？有没有办法children从服务本身内部访问生成的演员？（就像从一个动作内部）

假设我有一台带有添加文件操作的机器。添加文件时，会spawn()为其调用新文件，并将引用存储到context. 现在，当机器完成不管它在做什么，我想重置context并清除children后，.stop()荷兰国际集团各一台。

这里要完全具体地说明我是如何对实现上述行为的上传系统进行建模的。

在这个实现中，每当机器返回到idle状态时，我都会重置context并手动.stop()调用每个生成的 actor。但是，actor 服务仍然在 中徘徊.children，我无法从机器操作内部访问它们（将第三个参数添加meta到resetContext不会导致任何可以访问当前的children）。

关于.stop()ing 演员并清除children和重置context，理想情况下，我希望为每个演员单独采取行动，在idle进入状态时运行，但是由于我似乎无法找到一种访问方式children，因此通过一个动作完成所有操作这context是我能想到的唯一解决方案。

另外，请注意，在官方示例中，当 todo 被删除时，其生成的 actor 不是.stop()ed，这让我想知道这是疏忽还是有原因？

下面，为方便起见，是实现上传系统和文件的代码。完整的实现，其中还包括可视化器，可以在这里找到：

// upload system machine

const uploadSystemMachine = Machine(
  {
    id: 'upload-system',
    initial: …