react学习之事件绑定与条件渲染

react

react学习之事件绑定与条件渲染

事件绑定：

对于事件绑定，其在react中的绑定方式就与js中在DOM中的绑定方式相同，但是也有区别。

区别： 1. 绑定事件的属性的命名方式是采用的小驼峰式的命名方式，因为你react是更加的接近js而不是html 2. 在绑定事件后面添加的名称不是字符串的形式，而是一个函数的方式。

在上面就是举例说明两者不同的一个典型的例子。

2.对于如何去处理默认事件的方式

在react中你需要去显示的调用preventDefault ，而不是像在html中那样去返回false，例如在下面的这个实际的例子中

在react中，你可以在你要返回的组件之中去写一个函数，去显示的调用preventDefault，然后再在你要显示的内容中去使用这个防止默认事件的函数即可。

3.使用有状态组件时，常用的模式是将该事件处理函数绑定在类组件上。

在上面的这个例子中，你写了一个时间处理的方法handleClick，然后在你的render函数中，你使用了this.handleClick，然后在你的costructor中，你就必须去绑定this在这个回调函数中。通过这个过程你就确定了这个handleClick事件是在你的这个组件中。

上面的这种方式，使用了箭头函数去处理上面这个点击事件，这样的方式不建议去使用，因为当你每次去点击时，都会重新去重新渲染，如果你将这个组件传递给更低一级的组件时，你每次调用这个组件时，就会有重新在一次的再去渲染，显然这样的方式是不可取的。因此推荐使用的方式是去采用第一种的方式去绑定。

4.参数的传递

在react中，对于在组件中传递参数的方式有两种，一种是采用箭头函数去实现参数的传递，第二种是直接在绑定的时候就采用 this.方法名.bind(this,参数)的形式去完成参数的传递。下面就是这两种参数传递的方式

条件渲染

1.可以使用变量来储存元素，这样就可以有助于去输出部分的组件，而不去输出去其他部分。

在这个例子中，采用了无组件的方式去实现了条件渲染的过程。

在上面的这个例子中，想去实现的功能就是点击后返回不同的状态，这样就需要我们前面所说的状态的改变。为了去实现这整个的过程，我们用了一下的步骤，第一设置两个函数去改变state里面的值，第二将这两个函数绑定在这个组件中，第三用了条件渲染去实现了这整个的过程。

2.采用逻辑运算符&&的方式来实现条件渲染

其工作原理是 true && 表达式，就会返回这个表达式，如果 false && 表达式，就不会返回这个表达式。

在上面的这个例子就是这样的实现过程。

3.采用内联三元运算符去实现整个的条件渲染

其核心的部分就是，根据state中值的真假来判定所要去显示的内容。

以上就是关于事件的绑定的一种方式与条件渲染所采用的三种方式，具体使用的情况可以看自己的习惯与具体的环境去实现这个过程。