Todolist总结

古城微笑少年丶 2021-11-23 15:44 262阅读 0赞

# 一、组件类里面的函数尽可能写成箭头函数的形式，方便绑定this #

![1476644-20190522105059480-1827105772.png][]

上面的箭头函数是好的，写面的不好，他需要在用的时候绑定this，或者在constructor绑定，如下：

![1476644-20190522105252779-769145396.png][]

如上用的时候绑定this是不好的，每次render都会重新绑定，比这种好的是在constructor里面绑定，如下：

![1476644-20190522105435704-943289913.png][]

因此绑定this有两种方法，用箭头函数，或者在constructor里面绑定，推荐箭头函数

# 二、从state或者props取值赋值给变量的时候，用解构赋值、给默认值、容错处理 #

![1476644-20190522110256632-46519793.png][]

![1476644-20190522110414757-392701653.png][]

# 三、通过prop-types给组件的配置参数加上类型验证，`你也可以在任何 PropTypes 属性后面加上 ’isRequired‘``后缀，这样如果这个属性父组件没有提供时，会打印警告信息。`*虽然 `propTypes` 帮我们指定了参数类型，但是并没有说这个参数一定要传入，事实上，这些参数默认都是可选的。可选参数我们可以通过配置 `defaultProps`，让它在不传入的时候有默认值* #

![1476644-20190522155152026-1984797228.png][]

具体的Proptypes用法如下：

![1476644-20190522160019565-1565912230.png][]

# 四、在父、子、孙，三级，从父级传回调函数给孙，在每个子、孙配置PropTypes传参类型，和defaultProps之后，不要用if来判断有没有传回调函数，作为中间的子，直接将函数传下去，不要在写一个函数了，如下： #

下面这个不好：

![1476644-20190522161052582-795841441.png][]

下面这样好：

![1476644-20190522161237700-61792446.png][]

# 五、组件间的调用用下划线做函数名 #

![1476644-20190522192142308-389980777.png][]

转载于:https://www.cnblogs.com/QianDingwei/p/10907987.html

[1476644-20190522105059480-1827105772.png]: /images/20211122/7a7d10911561433d9580c8381e85758d.png
[1476644-20190522105252779-769145396.png]: /images/20211122/690761ebdbac4dd1807843de4ccc521d.png
[1476644-20190522105435704-943289913.png]: /images/20211122/76dbca36e047466996cf9c6d5dbc1d9f.png
[1476644-20190522110256632-46519793.png]: /images/20211122/649a79924dd148f3b477f5ee58a1f770.png
[1476644-20190522110414757-392701653.png]: /images/20211122/e2490ee9526e4dcd9a274b9263c8a820.png
[1476644-20190522155152026-1984797228.png]: /images/20211122/6f049af01a7b4bfc82b0ed917ea50376.png
[1476644-20190522160019565-1565912230.png]: /images/20211122/01c07e7f4e99400989b810d3ce1e6a89.png
[1476644-20190522161052582-795841441.png]: /images/20211122/edaee995f6554468beba6e4f35b1e9c1.png
[1476644-20190522161237700-61792446.png]: /images/20211122/9e47083afa6641649d67e1d51e79a1c1.png
[1476644-20190522192142308-389980777.png]: /images/20211122/58adfcc7146a4221a61da661ce1e0e1d.png