在之前的文章中,react代码的书写有很多冗余,所以接下来对代码进行一下优化。
首先优化的是关于this指向这一块的代码,我们不必在每次的绑定后面加bind(this)语句,只需在构造函数里做处理就可以,如图:
其次就是在渲染的时候,代码量有点大,我们可以定一个函数来实现,如图:
最后是关于定义组件时候的写法:
a、我们在定义组件的时候要写组件继承自Component,此时我们可以按照下图所示写代码:
默认写法:
修改后的写法:
b、除此之外,我们在定义组件返回的时候,所有的内容必须包含在一个大的<div>中,不然就会报错,如下图:
这样一来,整个组件的DOM树里面就会有一层空的<div>,这样可能会对我们后续的操作造成影响,如下:
为了避免这一层空<div>的出现,我们可以这样做:
由此可见,那一层空的<div>是取消了的。