小编sem*_*boi的帖子

官方的React文档声明" 只是React.PureComponent浅析shouldComponentUpdate()对象",并建议如果状态是"深度"的话.

鉴于此,React.PureComponent在创建React组件时,有什么理由可以选择吗？

问题:

• React.Component我们可能考虑采用的是否会对使用产生任何性能影响React.PureComponent？
• 我猜 shouldComponentUpdate()的PureComponent执行只有浅薄的比较.如果是这种情况,不能说方法可以用于更深层次的比较吗？
• "此外,我们React.PureComponent会shouldComponentUpdate()跳过整个组件子树的道具更新" - 这是否意味着道具变更被忽略了？

问题来自于阅读这个媒体博客,如果它有帮助.

虽然通过css草案规范显示属性遇到了这个属性

display:ruby

一点点搜索说明用于显示日文字符.

• 这是唯一的用例吗？(使用它作为普通文本不会做任何特殊的事情,更进一步,chrome将其标记为无效属性)
• 它与我们通常的块容器有什么不同？

我使用了一个简单的CRUD应用程序

• 表达:4.13.4
• gulp:3.9.1
• mongodb:v3.0.6
• reactjs:15.0.2.
• 节点:4.0.0

对于服务器端代码,我听说可以通过Visual Studio Code(v1.1.1.)进行调试.

从git bash我启动应用程序gulp serve.但是我不知道如何开始调试!

我的gulp任务的片段.

gulp.task('serve',['bundle','start-server'],function(){

    browserSync.init({
        proxy:'http://localhost:3000',
        port:9001
    });

});

当我们单击VS Code上的调试按钮以启动调试界面时,我们会看到launch.json,其中有两个配置选项.

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}",
        "stopOnEntry": false,
        "args": [],
        "cwd": "${workspaceRoot}",
        "preLaunchTask": null,
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "env": {
            "NODE_ENV": "development"
        },
        "externalConsole": false,
        "sourceMaps": false,
        "outDir": null
    },
    {
        "name": "Attach",
        "type": "node",
        "request": "attach",
        "port": 3000,
        "address": "localhost",
        "restart": false,
        "sourceMaps": false, …

最近偶然发现了动态导入提案和Youtube视频.想到将它用于React中的组件按需导入是一个好主意.

遇到一个问题,当我import将字符串文字作为运行时变量传递时,我无法"解析"路径.

例如:

<div>
<button onClick={this._fetchComp.bind(this, "../component/Counter")}>
Get Asyn Comp
</button>
</div>

尝试了_fetchComp的多个选项,但传递参数似乎不起作用.尝试了不同选项的细分.

1. 模板字符串 不起作用:单击时出现以下错误

   Error Error: Cannot find module '../components/Counter'. at webpackAsyncContext (^.*$:53)

   码

   _fetchComp(res) {
   import(`${res}`).then(() => {
       console.log("Loaded")
   },(err)=>{
       console.log("Error",err)
   })}
   

   Run Code Online (Sandbox Code Playgroud)

2. Variabes 不起作用:在webpack构建过程中出现错误55:12-23 Critical dependency: the request of a dependency is an expression

   码

   _fetchComp(res) {
   import(res).then(() => {
       console.log("Loaded")
   },(err)=>{
       console.log("Error",err)
   })}
   

   Run Code Online (Sandbox Code Playgroud)

3. String literal Works:只传递纯字符串文字.点击后,我可以在开发工具网络选项卡中看到正在下载的块

   码

   _fetchComp(res) {
   import("../components/Counter").then(() => {
       console.log("Loaded")
   },(err)=>{
       console.log("Error",err)
   })}
   

   Run Code Online (Sandbox Code Playgroud)

根据规范,

import()接受任意字符串(此处显示运行时确定的模板字符串),而不仅仅是静态字符串文字. …