while1pass's questions

从文件中导出 SVGindex.ts

import * as upArrow from "./up-arrow.svg";
import * as downArrow from "./down-arrow.svg";

export { upArrow, downArrow };

然后我在组件中使用

import * as React from "react";
import { Icon } from "components";
import { upArrow, downArrow } from "common/assets";

const CollapseIcon = ({ condition }) => (
  <Icon alternative={upArrow} asset={downArrow} condition={condition} />
);

export default CollapseIcon;

如果很重要，我也使用属性中asset的值alternativesrc

export default styled.img.attrs<IconProps>({
  src: ({ condition, alternative, asset }: IconProps) =>
    condition ? alternative : asset,
  alt: ({ alt }: IconProps) => alt
})`
  vertical-align: middle;
 `

结果，我得到一个属性值不正确的 HTML 元素src，如果我删除多余的引号，则该元素会正确显示。我在哪里犯错？

有一个文件，其中包含类似的行

xxxxx@mail.ru id

需要拔出xxxxx@mail.ru并id

^(.+)(?:\s+)出于某种原因，接收邮件的正则表达式也会拉空格，尽管我表示它们被排除在外。我究竟做错了什么？此处的交互式示例https://regex101.com/r/hhL2d5/2/

面临从节点脚本启动外部进程的需要。假设外部进程由命令启动

 yarn install

节点模块中有child_process一个非阻塞方法exec，借助它我可以看到回调中的错误

exec('yarn install', function (error, stdout, stderr) {
  if (error) console.log(error.code)
})

但是，我需要操作同步运行，为此我使用execSync，

execSync('yarn install')

它不再向控制台打印任何消息。

如何获取输出流？

有一个 Node.js 脚本prod.js可以在特定端口上启动开发服务器。

const { execSync } = require('child_process')

process.env.NODE_ENV = 'production'

const WEBPACK_PATH = 'node_modules/.bin/webpack'
const WEBPACK_CONFIG_PATH = 'internals/webpack/configs/prod'

execSync('yarn install --production=false')
execSync('rm -rf ./build')
execSync(`"${WEBPACK_PATH}" --config "${WEBPACK_CONFIG_PATH}"/webpack.prod.client.babel.js --display-error-details`)
execSync(`"${WEBPACK_PATH}" --config "${WEBPACK_CONFIG_PATH}"/webpack.prod.server.babel.js --display-error-details`)
execSync('node ./scripts/server/start-server.babel.js')

有可能妖魔化它吗？让他做以下事情

• 在机器的物理重启时启动（非常必要）
• 响应文件更改
• 杀死指定端口上的进程

我找到了几个模块：pm2和nodemon，但是，我没有看到它们能够在系统启动时自动启动。

另外，尝试过nodemon，但是，命令是

nodemon ./prod.js

陷入永久重启，因此，进程甚至无法启动

[nodemon] restarting due to changes...
[nodemon] starting `node scripts/prod.js`
[nodemon] restarting due to changes...
[nodemon] restarting due to changes...
[nodemon] restarting due to changes...
[nodemon] restarting due to changes...
[nodemon] restarting due to changes...
[nodemon] restarting due to changes...
[nodemon] starting `node scripts/prod.js`
[nodemon] restarting due to changes...
[nodemon] restarting due to changes...
[nodemon] restarting due to changes...

谁遇到过类似的问题，请告诉我？

SPA 应用程序中的服务器端渲染是什么？除了 SEO 的目标，我无法回答这个问题。

React 在这些例子中是如何工作的？毕竟按照我的理解，真正的DOM最初是返回给我们的，然后是JS初始化，必须进行操作。

了解 Git的基础知识和合并基础知识一章中 出现的一个问题。

为什么后来的提交位于图表的“皇冠”中被视为父母，箭头指向他们，而不是来自他们？

毕竟，从逻辑上讲，它们是先前状态的“演员表”。

比如用这张图说明hotfix分支合并到master分支

我们合并的分支 (*note - hotfix) 指向一个提交，它是我们当前正在进行的提交 (**note - master) 的直接父级，Git 只是向前移动了它的指针

从这个描述可以看出，C4 是 C2 的父级，尽管情况恰恰相反（C4 包含一个指向 C2 的 parentId）

如何在二维数组中找到一个元素的邻居（8个邻居-垂直，水平，对角线），前提是邻居也可以通过数组边界搜索？

我有一个像这样的二维数组

在数组中查找元素的邻居很简单。我们将当前元素的坐标与单位以及它们之间结合起来data[x +/- 1][y +/- 1]得到这张图片

对于数组边界上的元素，其邻居如下

对于角落里的元素

总的来说，当元素位于数组内时，我们有 1 个一般情况和 8 个私有元素（4 个在边界上，4 个在角落上）

当然，你可以使用case-operator，迭代这些找邻居的case，正面解决这个问题，但是有没有更优雅的解决方法呢？

如何用指定填充百分比的数据填充二维数组？

例如，有一个数组 10 * 10，需要填充其中 30% 的单元格，因此，30 个单元格包含数据，70 个单元格为空。

该任务是解决另一个更大任务的结果，因此我在下面发布了所有代码。数组生成器方法 -generateData

我有三个解决方案。

第一种解决方案是递归调用遍历数组并逐渐用数据填充空单元格的函数。我们从数组的第零个元素开始，如果还没有达到填充数，就重新调用函数。缺点是递归方法本身不是很好，填充的单元格在一侧误入歧途。一个可能的解决方案是当到达数组的末尾时开始向相反的方向遍历

const getStyle = style => Object.assign({}, style);

const universeStyle = length => ({
  position: "relative",
  width: `${length * 10}px`,
  height: `${length * 10}px`,
  fontSize: "0",
  border: "1px solid #222"
});

const cellStyle = item => ({
  background: `${item.color}`,
  display: "inline-block",
  boxSizing: "border-box",
  width: "10px",
  height: "10px"
  //border: "1px solid grey"
});

const settingsStyle = () => ({
  margin: "10px 0 0 0"
});

const Cell = ({ item }) => (
  <div x={item.x} y={item.y} style={getStyle(cellStyle(item))} />
);

class Universe extends React.Component {
  render() {
    return (
      <div style={getStyle(universeStyle(this.props.width))}>
        {this.props.data.map(item => item.map(item => <Cell item={item} />))}
      </div>
    );
  }
}

class Settings extends React.Component {  
  render() {
    const {fill} = this.props;
    
    return (
      <div style={getStyle(settingsStyle())}>
        <button onClick={() => this.props.generateUniverse()}>Generate</button>
        <div>
          <input
            onChange={event => this.props.setFill(event)}
            type="range"
            value={fill} />
          <span>{fill}</span>
        </div>
      </div>
      )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      fill: 30
    };
  }
  
  componentDidMount() {
    this.generateUniverse()
  }
  
  getColor(colors = ['white', 'black']) {
    return colors[Math.floor(Math.random() * colors.length)];
  }

  generateData(width, fill) {
    const count = (width * width * fill) / 100;
    const getColor = this.getColor;
    let current = 0;
    const spaceData = Array.from({ length: width }).map((item, y) =>
        Array.from({ length: width }).map((item, x) => 
          ({y: y, x: x, color: 'white'})
      ))
    
    function fillData(data) {
      if (current < count) {
        data.forEach((line, y, data) => 
          line.forEach((obj, x, line) => {
            if (current < count) {
              obj.color = getColor();
              obj.color === 'black' ? current++ : null;
            } else { return data }
          })
        )        
        
        return fillData(data)
      }      
      
      return data
    }
    
    return fillData(spaceData)
  }
  
  generateUniverse() {
    this.setState({
        data: this.generateData(this.props.width, this.state.fill)
      });
  }
  
  redrawUniverse() {
    const idRedraw = setTimeout(() => {
      this.setState({
        data: this.generateData(this.props.width)
      }, this.redrawUniverse);
    }, 500);
    
    this.idRedraw = idRedraw;
  }
  
  stopRedraw() {
    clearTimeout(this.idRedraw)
  }
  
  setFill(event) {
    console.log(event.target.value)
    this.setState({fill: event.target.value})
  }
  
  render() {
    const [{width}, {data, fill}] = [this.props, this.state];
    
    return (
      <div>
        <Universe
          width={width}
          data={data}
        />
        <Settings
          fill={fill}
          setFill={(event) => this.setFill(event)}
          stopRedraw={() => this.stopRedraw()}
          startRedraw={() => this.redrawUniverse()}
          generateUniverse={() => this.generateUniverse()}
        />
      </div>
      )
  }
}

ReactDOM.render(<App width={10} />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

第二种解决方案是随机生成每个点的 X、Y 坐标，如果数组中所需的点已经填充 - 跳过，如果没有 - 填充。重复该过程，直到阵列已满。缺点是填充率高时，空点很少，程序将花费更多时间搜索空值。

const getStyle = style => Object.assign({}, style);

const universeStyle = length => ({
  position: "relative",
  width: `${length * 10}px`,
  height: `${length * 10}px`,
  fontSize: "0",
  border: "1px solid #222"
});

const cellStyle = item => ({
  background: `${item.color}`,
  display: "inline-block",
  boxSizing: "border-box",
  width: "10px",
  height: "10px"
});

const settingsStyle = () => ({
  margin: "10px 0 0 0"
});

const Cell = ({ item }) => (
  <div x={item.x} y={item.y} style={getStyle(cellStyle(item))} />
);

class Universe extends React.Component {
  render() {
    return (
      <div style={getStyle(universeStyle(this.props.width))}>
        {this.props.data.map(item => item.map(item => <Cell item={item} />))}
      </div>
    );
  }
}

class Settings extends React.Component {  
  render() {
    const {fill} = this.props;
    
    return (
      <div style={getStyle(settingsStyle())}>
        <button onClick={() => this.props.generateUniverse()}>Generate</button>
        <div>
          <input
            onChange={event => this.props.setFill(event)}
            type="range"
            value={fill} />
          <span>{fill}</span>
        </div>
      </div>
      )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      fill: 30
    };
  }
  
  componentDidMount() {
    this.generateUniverse();
  }
  
  getRandom(data) {
    return data[Math.floor(Math.random() * data.length)];
  }

  generateData(width, fill) {
    const countFillObj = (width * width * fill) / 100;
    var currentFillObj = 0;
    const getRandom = this.getRandom;
    const arr = Array.from(Array(width).keys());
    const data = Array.from({ length: width }).map((item, y) =>
        Array.from({ length: width }).map((item, x) => 
          ({y: y, x: x, color: 'white'})
      ))
    
    if (fill === 100) {
      return Array.from({ length: width }).map((item, y) =>
        Array.from({ length: width }).map((item, x) => 
          ({y: y, x: x, color: 'black'})
      ))
    } 
    
    while (currentFillObj < countFillObj) {
      var [randomX, randomY] = [getRandom(arr), getRandom(arr)];
      var currentObj = data[randomX][randomY];
      
      if (currentObj.color === 'white') {
        currentObj.color = 'black'; 
        currentFillObj += 1
      } 
    }   
      
    return data
    
  }
  
  generateUniverse() {
    this.setState({
        data: this.generateData(this.props.width, this.state.fill)
      });
  }
  
  redrawUniverse() {
    const idRedraw = setTimeout(() => {
      this.setState({
        data: this.generateData(this.props.width)
      }, this.redrawUniverse);
    }, 500);
    
    this.idRedraw = idRedraw;
  }
  
  stopRedraw() {
    clearTimeout(this.idRedraw)
  }
  
  setFill(event) {
    this.setState({fill: event.target.value});
    this.generateUniverse();
  }
  
  render() {
    const [{width}, {data, fill}] = [this.props, this.state];
    
    return (
      <div>
        <Universe
          width={width}
          data={data}
        />
        <Settings
          fill={fill}
          setFill={(event) => this.setFill(event)}
          stopRedraw={() => this.stopRedraw()}
          startRedraw={() => this.redrawUniverse()}
          generateUniverse={() => this.generateUniverse()}
        />
      </div>
      )
  }
}

ReactDOM.render(<App width={10} />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

第三种解法——写题时出现，你可以尝试在填写概率中输入一个校正因子。并且在遍历数组时，填充/跳过一个点时，填充/跳过下一个点的概率发生变化。

请分享你的想法

我在Douglas Crockford的书中遇到了语句、表达式、表达式语句的概念。JavaScript：好的部分。

比如Esprima解析器并没有allocate Statement，如果我理解正确的话，翻译成“directive，instruction”是正确的，而是使用ExpressionStatement。

请指出它们之间的关系以及如何正确翻译它们？

与代码无关的文档和支持文件存放在哪里，比如README.md的截图？

根据截图，我在enSO上找到了两个答案：

• 如何将屏幕截图添加到 github 存储库中的自述文件？
• 将图像添加到 GitHub 上的 README.md

但是这里更多地涉及到通过 Markdown 格式化 README.md 的问题。我对存储辅助数据的最佳实践很感兴趣。选择什么地方存放？单独的分支或存储库？如何使用这些支持数据？

到目前为止，我自己看到了以下解决方案。我在项目中创建了一个带有辅助数据的分支，并将屏幕截图放在那里，我已经从 README.md 文件访问它们。

对于文档，情况类似；我认为虽然项目很小，但码头可以存储在一个存储库中。

我目前正在使用 GitLab/GitHub。

请分享您的经验。

Django/REST-Framework/PostgreSQL 项目。

有主要是一对多连接的模型，以及对数据库进行查询的 API。

现在加载一些页面时大约有 700-1500 个查询到数据库，数据库正在增长并且会进一步恶化。看哪条路解决问题？

编辑现有代码/使用原始查询？据我了解，这是一个临时解决方案，我们将再次触及天花板。

键值存储 - Redis/memcached 等？但是在这里，正如我也假设的那样，数据增长存在上限，我们必须改变项目的结构。

在寻找解决方案时，我看到了另一种方法——阻止从数据库中读取。解释一下。我们可以在构建 API 时使用它吗？比如逐渐给数据，最多一条记录，传给消费者？我们可以结合使用块读取和键值存储吗？

关于这些方法还有哪些其他评论以及我没有考虑到的内容？

添加了部分代码以供理解。有两个相关模型。第一个对应表中的 120 条记录，第二个 - 超过 10000（每个元素大约 100 个 Property 对象）

class Element(models.Model):
    name = models.CharField(verbose_name="Name", max_length=255, blank=True, null=True)

    class Meta:
        verbose_name = "Element"
        verbose_name_plural = "Elements"


class Property(models.Model):
    element = ForeignKey(Element, related_name='properties')
    title = models.CharField(max_length=255)
    type = models.CharField(max_length=50, choices=TYPE)
    value = models.CharField(max_length=255, blank=True, null=True)

    class Meta:
        verbose_name = "Property"
        verbose_name_plural = "Properties"
        ordering = ('title',)

从 API 中，我得到以下结构——我需要从表格的某些行中进行选择property

[
    {
        "name": "Lithium",
        "properties": {
            "group": "1",
            "atomic_number": "3",
            "symbol": "Li",
            "period": "2",
            "atomic_weight": "6.941",
            "type": "alkali"
        }
    },
    {
        "name": "Beryllium",
        "properties": {
            "group": "2",
            "atomic_number": "4",
            "symbol": "Be",
            "period": "2",
            "atomic_weight": "9.012182",
            "type": "alkaline"
        }
    }


   ...

在我使用视图请求的方法之一中（obj 是一个 Element 模型对象）

def get_properties(self, obj):
        properties = ['Symbol', 'Group', 'Period', 'Type', 'Atomic weight', 'Atomic number']
        func = lambda property: obj.properties.get(title=property).value if obj.properties.filter(title=property).exists() else None
        data = map(func, properties)

        return dict(zip(properties, data))

这里这个函数中的检查使对数据库的请求数增加了一倍，我们删除了检查 - 请求数下降了一半，我不明白如何绕过

 func = lambda property: obj.properties.get(title=property).value if obj.properties.filter(title=property).exists() else None

componentDidMount()为什么当我尝试再次调用该组件时它可能无法在 React 容器中工作？

有一个链接列表，例如

<Link key={element.name} to={'elements/:element'}} />

我从链接中获取此元素的名称并将其传递给 props 中的 ElementDetail 容器（有条件地）

<ElementDetail name={:element} />

name从props我已经使用内部方法componentDidMount()：

@connect(
    state => ({ element: state.element }),
    dispatch => ({elementActions: bindActionCreators(elementActions, dispatch)})
)
export default class ElementDetail extends React.Component {
    componentDidMount() {
        console.log('>>> CDM')

        let { getProperties } = this.props.elementActions;
        getProperties(this.props.name)
    }

    render() {
        let { properties, isLoading } = this.props.element;
        let propertyGroups = properties['properties'];

        console.log('>>> RENDER')

        return <div />

首次安装组件时，代码按预期工作。

但是，当我尝试通过 Link 使用不同的数据再次调用 c 组件时，我只会在浏览器和props.name. 只有 render() 中的代码有效，我可以从控制台输出中看到这一点。我在哪里犯了错误？

重写SerializerMethodField的 django-rest-framework

class CustomSerializersMethodField(serializers.SerializerMethodField):
 def __init__(self, title, method_name=None, **kwargs):
   self.title = title
   super(serializers.SerializerMethodField, self).__init__(method_name=None, **kwargs)

并得到一个错误

__init__() got an unexpected keyword argument 'method_name'

是否与码头的备注有关？

method_name 参数引用的序列化程序方法应该接受单个参数（除了 self 之外）

我做错了什么？以及使用什么对象来创建带有必要参数的自定义字段？

在 React 中创建组件应该遵循什么？它的功能和可变性或应用程序的逻辑结构？

假设我们有一个主页

Block 1 和 Block 3，按照我的理解，应该明确地描述为组件，因为它们是功能块。

块 2 - 包含在导航栏中，也被描述为组件。

Block 3 - 一个单独的组件，包含涂鸦、搜索栏和搜索按钮。搜索栏和按钮是独立的组件吗？是否有必要将涂鸦分成一个单独的组件（假设它永远不会改变）？

第 4 块 - 页脚。如果它始终不变，则将其描述为一个单独的组件？或者将它包含在描述整个主页的组件中？

有一个低分辨率图像 32*32px（像素艺术），当通过potrace转换时

convert input.png temp.pnm
potrace temp.pnm -s -o output.svg

或者通过inkscape（就像他也使用 potrace），给出这样的东西。

如何在转换过程中保留原始图像的比例而不是太平滑？

有一个脚本deploy.sh，其中包含一行应该在虚拟环境中本地安装包：

echo -e "\nInstalling requirements..."
sh -c "pip install -r requirements.txt"

该脚本与命令一起运行sudo ./deploy.sh，因此安装依赖项的命令执行为

sudo pip install -r requirements.txt

并且包是全局安装的，而不是当前项目的本地安装。

我怎样才能让命令在没有的情况下运行sudo？

说明 - 该脚本包含需要超级用户权限的命令

在文档中详细描述了在 Docker 映像中创建 postgreSQL 数据库

但是当数据库位于生产服务器上时呢？启动容器时如何附加外部数据库？

据我了解，在构建图像时，它不能包含在 Dockerfile 中，因为它仅在生产服务器上使用。

请告诉我们有关数据库交互和容器的信息。在我的理解中，应该有两个基础——测试（针对开发人员、测试人员）和实战（在主站点上使用）。

这个方案可以和 Docker 容器一起使用吗？

Django 上有一个网站，在生产服务器上我使用 uWSGI / Nginx bundle 启动，本地开发是 Django virtualenv / dev-server

从一些关于 SO 的问题中：

1. 分发 Docker 镜像

2. 在生产服务器上运行 Docker 镜像

3. 从 Docker 镜像启动站点 VS 使用传统方式启动站点（uWSGI、Nginx、Apache）

又来了几个。

Docker 镜像中包含什么？

我们有一个生产版本和一个开发版本。据我了解，生产分布在存储库中。

为开发者版本（对我来说，项目代码和 virtualenv）创建一个 docker 镜像有意义吗？还是开发人员只需要存储库中的代码即可开始开发？

生产 docker 镜像是在哪里创建的？

生产服务器上有一个项目在指定的包上运行 - uwsgi/nginx/packer 具有生产设置。我应该在生产服务器上收集图像吗？

Django 上有一个网站，在生产服务器上我使用 uWSGI / Nginx bundle 启动，本地开发是 Django virtualenv / dev-server

我决定去感受一下运行应用程序的Docker技术，在阅读的过程中出现了一个问题。

从 Docker 镜像运行实时站点是否比这种方式（uWSGI/Nginx）更容易？除了启动站点，项目还在生产服务器上使用 webpack 组装，代码被缩小，一些静态被转换等。

PS 提前为“传统站点启动器”的定义道歉，每个人可能有不同的口味

Django 上有一个网站，在生产服务器上我使用 uWSGI / Nginx bundle 启动，本地开发是 Django virtualenv / dev-server

我决定去感受一下运行应用程序的Docker技术，在阅读的过程中出现了一个问题。

如果我创建项目的 Docker 镜像，我可以在通常的 uWSGI / Nginx 包上运行它吗？或者我的文件会被“隐藏”在 Docker 镜像中，就像在一个黑盒子里，并且只能通过特定命令访问？