React篇2--事件、表单数据、高阶函数、组件生命周期、DOM的Diffing算法

一、事件1.通过onXxx属性指定事件处理函数（注意大小写）。（1）React使用的是自定义（合成）事件，而不是使用的原生DOM事件。（2）React中的事件是通过事件委托方式处理的（委托给组件外层的元素）。2.React通过event.target得到发生事件的DOM元素对象。例如：如上图，触发事件的节点和输出内容的节点相同，此时不需要使用ref属性。此时绑定的方法showData2中不能通过this.myRef2.current获取节点，使用event.target获取。注意：不要过渡使用ref，可以避免则不要使用。二、表单数据有一个例子说明。目标效果：2.1 非受控组件说明，上图中使用了表单组件form,form中的按钮绑定的按钮button被点击时默认触发表单的onSubmit事件。但是有一个问题，点击弹窗的“确定”按钮后跳转到表单的action指定的地址。我们知道ajax可以实现页面无刷新获取数据，可以使用ajax将username和password信息提交给后台，页面不动，而使用表单提交会使得页面跳转。其实没有配action的值提交表单后还是会触发页面的刷新。要禁止页面刷新的方式是使用阻止默认事件。页面中所有输入类的DOM（包括input、checkbox等）现用现取就是非受控组件。2.2 受控组件可以将值维护到state中：页面中随着输入的数据的变化state中的内容也同步变化的组件是非受控组件。注意：React中没有双向数据绑定（vue中有），需要通过onChange实现。三、高阶函数注意：下面写法是错误的，绑定方法到onChange属性不要加()，加()是将**方法返回值绑定到onChange，**且初始化时就会执行该方法。