typescript

1. 变量定义
   let、const
2. 箭头函数
   格式：（多个参数）=> expr 或者 (多个参数)=>{return xx}
   如果是单个参数，可以不写括号。如果是没有参数，只有括号即可

• 常见的表达方式
  • () => a+b
  • () =>{return a+b}

3. 三个点
   对函数而言，接收可变参数
   对变量而言，把数组变成逗号分隔的字符串，把对象展开成成员
4. import {}

• 含义：解构，把类中的函数和变量导出来
• import { xx as }，只有函数才能as

5. export default ()=>
   导出一个匿名函数，那么接收者可以是任意的名称
   导出的时候不需要加上{}
   同样import的时候也不需要{}

6. 浅拷贝
   object.assign(target,source);
   target={...source}

7. 数组遍历的方法
   let myarray=[1,2,3]

   • for (let i =0;i<myarray.length;i++ )
   • for(let i of myarray)
   • for(let i in myarray)
   • myarray.map(i=>{return i;})
   • myarray.foreach(i=>{return i;})

8. 组件嵌套
   父组件要包含子组件有两种方式：一种是在父组件的render函数中直接渲染子组件，这种方式假定子组件的类型和属性均是已知的，这也是通用的方式

image.png

然而，如果子组件类型和属性是设计时未知的或者是动态加入的，就需要用到this.props.children属性。React会自动将所有子组件的实例填入this.props.children属性中。父组件可以根据这个属性与子组件进行各种操作。下面的例子实现了与上面的例子同样的效果，但子组件是在父组件render函数之外声明的。需要注意的是，组件的父子关系并不等同于标签的父子关系。

image

比较以上两种方式，我们到底应该用哪种呢？对于固定数量和属性的子组件，我们倾向于使用前者。而对于动态的、数量不固定的子组件我们更倾向于采用后者，这样的代码结构更清晰且易于控制。对于后者，我们有时候还需要对子组件进行更进一步的控制，比如过滤其中的某些子组件或限制必须为某种类型的子组件，这就需要自行扩展。可以参看某些开源实现，如react-bootstrap的源代码。

9. visual studio react debug配置
   https://code.visualstudio.com/docs/nodejs/reactjs-tutorial