前端笔记（react-dva-umi）---前期

一、package.json依赖说明：
1、例子："react-ace": "^8（7、8的api都不兼容）.0（feature版本）.0（bugfix版本）",
2、说明：
^:8及以上版本、
~：特定的bugfix版本
无：制定版本

 

二、jsx没有子元素要自动关闭（JSX elements with no children must be self-closing）

1、 例如：

<Row className="default-row-gutter" gutter={16}>
   <Col span={12} offset={12}/>
</Row>

 

三、述职ppt

写ppt过程：写出ppt内容--->根据内容写ppt--->写出ppt所讲的话，和想想要提问的问题--->加到ppt的备注中--->模拟读ppt的时间，根据时间调整要将的话--->背下所讲的话--->做好准备，提高自信。

 

 

四、umi代理域名使用场景（没啥、瞎记）：

1、.env中  PORT=80

2、本地hosts  127.0.0.1 forcebot-client.jd.com

3、.umirc.local.ts

const config: IConfig = {
  "define": {
    'FORCEBOT_API_DOMAIN': '',
  },

  "proxy": {
    "/api": {
      "target": "http://fbot.jd.com",
      "changeOrigin": true,
    }
  }
}

说明：${FORCEBOT_API_DOMAIN}/api/testcase --->/api/testcase--->请求本地mock--->mock没有--->请求http://fbot.jd.com/api/testcase

 

五、数据放在index中的state还是 放在modal中的state中

1、主页的list和add页的item放到modal中的state中，<Modal>组件的visible属性放到index的state中。。其实放到哪要看情况

 

六、render（）中调用变量或调用函数

例：<Dropdown.Button type="primary" overlay={this.menu}

变量：menu=（this.props.data）       当数据发生变化时，menu中的内容不会被渲染，this.props.data不会变化

函数：menu = （）=> {this.props.data }    当数据发生变化时，menu中的内容会被渲染，this.props.data会变化

 

七、jd术语

sku:商品的最小单元
spu:一个商品（最小单元的集合）

 

八、react的className与style有什么区别

都是css，用来渲染页面的，只是级别不一样。

 

九、react的组件中mount时   或  unmount变为mount时，组件中的state会置为初始态

list文件夹结构：

     $id$.tsx   页面中调用index.tsx  。

     index.tsx

路由变化：http://ip:port/forcebot/script/list(mount)--->http://ip:port/forcebot/script/list/60600(unmount--->mount)

--->http://ip:port/forcebot/script/list/60622--->http://ip:port/forcebot/script/list(unmount--->mount)

index.tsx中的加载情况变化：mount--->unmount--->mount--->unmount--->mount

 

十、react的组件中要放子组件，不能放表达式

如：

不正确：
<Row >
    {
        Array.sort(function (a, b) {
          var order = ["successes", "avg", 'errors', 'tp99','currentTheads'];
          return order.indexOf(a.index) - order.indexOf(b.index);
        })
    }
</Row>


正确：
<Row gutter={[16, 16]}>
    {
      Array.map(data => (
         <LineChart
            key={data.index} data={data}
            handlePlotClick={this.props.handlePlotClick}
         />
      ))
   }
</Row>

map与foreach的区别：map有返回值，foreach没有返回值。

 

 

十一、js中代表false的值

1、undefined（未定义，找不到值时出现）
2、null（代表空值）
3、false（布尔值的false，字符串"false"布尔值为true）
4、0（数字0，字符串"0"布尔值为true）
5、NaN（无法计算结果时出现，表示"非数值"；但是typeof NaN==="number"）
6、""（双引号）或''（单引号） （空字符串，中间有空格时也是true）

例：

Array.filter()过滤false的内容：Array.filter(item => !!item)

注：!item  就是将item转为boolean类型的数据

 

十二、react特殊字符转义

{ 
      title: '描述', 
      // dataIndex: 'description', 
      key: 'description', 
      ellipsis: true, 
      render: (row) => { 
        return ( 
          <div dangerouslySetInnerHTML = {{ __html: row.description }}></div> 
        ) 
      } 
},

 

十三、通过给非受控组件加key（key改变时会重新实例化该组件）

1、key发生变化的时候会重新实例化组件
2、props只赋值给state一次（state = {}只执行一次），后续props在变化的时候，state不会跟着变化（state = {}不会再执行）
3、受控组件，组件中没有state。
4、不受控组件，组件有自己的state，页面的渲染依靠state的变化，但是想让该组件随着props变化而变化，就要加key（key变化了就会重新实例化该组件）

5、a组件从b组件中获取值，b组件中的值需要加rule，并用this.props.form.validateFields做验证，所以当a从b中获取值时，要通过callback来同步的获取，因为验证是异步的。

https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

https://www.jianshu.com/p/514fe21b9914

 

十四、getFieldDecorator中的<Select>不能用defaultValue，应该用initialValue

用defaultValue时，报

应该用initialValue