React方向：元素添加事件以及react组件

方法一：外部定义函数

方法二：使用箭头函数添加

react中的组件在概念上来说是类似于JavaScript函数（即"props"）,并返回用于页面展示的内容React元素

所谓的无状态组件，是指的其定义的值，无法被react监听到。

此处ele只是一个普通的变量，是没有状态的，区分组件的一个标准就是判断组件是否有状态的加入，状态即是数据，在Vue中状态管理器Vuex即被称为状态管理器，实际上就是对数据的一个存储器，React中的状态也等同于数据的 *** 纵，让数据驱动视图的响应。

在react中定义组件最简单的方式就是去使用js的函数。

当react为用户自定义组件时，它会将JSX所接收的属性以及子组件(children)转换为单个对象传递给组件，这个对象就被称之为“props”

基于类并且继承父类React组件，子类就能使用react所提供的特性。

construct中使用super()调用父类构造函数来初始化子类实例，super之前只是不能使用this，因为当前实例的父类构造函数没有执行，不具有父类的能力。

第一种方式：在事件上使用bind(this)

第二种方式：在构造函数中改变this指向

第三种方式：使用=()=>

JavaScript函数中的this不是在函数声明的时候定义的，而是在函数调用(即运行)的时候定义的。在react中也遵循这个原则，this指向该function的调用方，所以“调用者”不同会导致this的不同，这里的“调用者”指的是函数执行时的当前对象。

箭头函数或是bind会改变this的指向。上面的this.state，之所以能够访问到state就是改变了this的指向，不然getData里的this就是指向这个function，这是的this是undefined。

一般来说：

    1、谁调用的this就指向谁。

    2、箭头函数，bind改变后的指向父层。

在react中我们使用setState来更新数据：

但是console打印出来的值是：原数据。

这里就要提到react里setState的异步了，在react里setState这个方法是异步的，不会按顺序执行，它可能会等待一组state一起进行更新，来提高性能。下面提供一个解决办法，setState的回调setState(updater[, callback])，相当于componentDidUpdate函数：

因为在事件中使用onClick={this.setData()}时方法直接执行，直接写成this.setData(data)这样会报错，所以需要使用bind():

下面看如何传递：

事件对象：在出发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。

给标签添加ref属性，在事件里通过this.refs.[属性].value来获取值

双向数据绑定在vue中有，在react中是没有的，双向数据绑定就是双方的数据改变相互影响，下面只是模拟双向数据绑定：

上面的的value需要事件监听，这里面有一个react的知识点： 约束性组件和非约束性组件 。

约束性组件，简单说就是react管理了它的value，而非约束性组件的value是由原生DOM管理的。

约束性组件是这样写的：

这里的value属性不再是一个写死的值，它是this.state.data,而this.state.data是由this.inputDataChange这个监听事件负责管理的。

这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后，由 this.setState 导致了一次重新渲染。不过React会优化这个渲染过程，实际它依然是通过设置input的value来实现的。

非约束性组件是这样写的：

这个defaultValue就是原生DOM中的value属性，其value值就是用户输入的内容，react不管理输入的过程。

对比约束性组件和非约束性组件的输入流程：

*约束性组件： 用户输入A ->触发onChange事件 ->inputDataChange 中设置 state.name = “A” ->渲染input使他的value变成A

*非约束性组件： 用户输入A ->input 中显示A

这里介绍form表单里的几种常用的子标签：

一般表单都是需要用form标签包起来：

1、react的组件从概念上看就是一个函数，可以接受一个参数最为输入值，这个参数就是props，可以把props理解为从外部传入组件内部的数据。

2、props经常被用作渲染组件和初始化状态，当一个组件被实例化之后，它的props是只读的，不可改变的。如果props在渲染过程中可以被改变，会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的props传入组件中。

3、在组件中，我们最好为props中的参数设置一个defaultProps，并且制定它的类型。

一个组件的显示形态可以由数据状态和外部参数所决定，外部参数也就是props，而数据状态就是state

state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染。

写在最后：

添加事件。在react项目中，想要让前端捕捉资源管理器按钮事件，需要为一个按钮等添加一个事件才可以，比较麻烦。React起源于Facebook的内部项目，因为该公司对市场上所有JavaScriptMVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。

---