1.img标签问题

img标签既是行内元素，也具有行内块元素的特性，原因是因为它是替换元素

2.react-dev-inspector

是一款react调试工具，可以通过点击页面上的组件直接跳转到vscode对应的代码区域

3.Js单线程问题

javascript是单线程的，只要这个单线程阻塞，就会影响页面渲染，导致页面的卡顿，如果将比较重的计算工作放到单线程中，无论是用Promise还是其他方法，都会卡顿，因为它最终还是在这个线程中执行，如下代码：

const obj = {};
for (let i = 0; i < 10000000; i++ ) {
    obj = {
    ...obj		// 每次渲染都展开，当obj元素特别多的时候会生成很多gc
    [i]: ii
    };
}

以上这段代码看似没什么问题，但是每次循环都会生成一个新的对象，导致许多gc，即使是放到promise中还是会有问题，会阻塞页面。
目前的优化方法： 1.优化算法。 2.将大量的计算放到webWorker里面去执行

4.Promise.all问题

使用Promise.all的时候，在每一个方法里面必须返回promise，不返回的话，在执行完方法后就认为是resolve了，所以在promise.all的子actio里面必须返回一个promise。这个问题是在做hsbc-web的新建用户的之后的操作问题引发的。

    // 当promises执行完毕之后然后readFundManagers，但是实际情况下promises还没执行就到了then里面
    Promise.all(promises).then(() => {
        readFundManagers();
        message.success(formatMessage('saveSuccess'));
    });
    // promises中有两个方法
    const promises = [
        updateFundPermission(), // 主要是这个方法
        updateManager({  // 这是一个dispatch的action，所以是一个promise
          userId,
          type: 'info',
          profile: {
            nickname,
            functions: compactFunctions,
            role: fastProp('role')(manager),
            functionTypes: fastProp('functionTypes')(manager),
          },
          baseUrl: getApiBaseUrl(prefix),
        }),
    ];
    
    updateFundPermission: ({ updateUserFundPermission, manager }) => () => {
      const fundPermission = fastProp('fundPermission')(manager);
      if (isNil(fundPermission)) return Promise.resolve();
      // 这里没有return的话会导致updateUserFundPermission这个请求在请求中Promise.all已经完成了，所以出错了。
      return updateUserFundPermission({
        funds: fastProp('fundPermission')(manager),
        userId: fastProp('id')(manager),
      });
    },

4.redux-form中field组件的component问题

redux-form中field的component，组件不要直接用一个函数生成，这样的话每次页面有任意一个props改变都会重新渲染，造成性能问题不说，而且每次输入的时候都会出现失去焦点的情况，所以要把component写到外面并且阻止非相关props更新渲染。目前公司系统中这样的写法很多，有优化的必要。可以将component封装一下，然后用memo优化。

  <Field
    name="description"
    component={({ input, ...custom }) => (
      <Input
        {...custom}
        value={input.value}
        onChange={input.onChange}
        placeholder={formatMessage('enterPortfolioDescription')}
        disabled={loading}
      />
    )}
  />

5.对于有小数点参与的计算的问题

在计算进行小数计算精确到小数点后若干位，并且允许几位误差的情况下，这种时候正确的做法是乘以多少位相减，然后判断是否小于几位，比如说多因子合成功能，权重加起来必须等于百分之百，允许误差在万分之二，这时候应该把权重乘以一万，然后用一万减去乘以的权重，判断是否小于等于二。以后遇到精确到小数点后几位，的运算，都应该乘以一个系数转换成整数来计算，使用小数计算会造成不精确。并且对于任何的小数计算都应该转换成整数计算的思维。

工作中遇到的问题记录