React（一）react概述、组件、事件

可以看出，JSX语法最大区别在于省去了创建虚拟DON对象的步骤，而是直接创建一个标签对象，在该标签对象中直接按照HTML格式书写代码即可，其余两步则不变。

二、组件

---

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。React 定义组件有两种方式：

函数方式，rfc react function component；某些不能使用；

类方式，rcc react class component；功能更为强大；

1.函数方式定义组件

2.函数组件传参

3.类方式定义组件

4.类组件传参

三、事件

---

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：React 事件的命名采用小驼峰式（camelCase），而不是纯小写。使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

事件绑定使用的是JS原生写法：

**事件中this的指向：**严格模式下指向window，非严格模式下为undefined；

解决方式：

（1）定义普通函数，调用时 bind 替换 this 并不触发执行；

{this.add.bind(this)}

（2）也使用箭头函数来定义方法，这样正常进行调用;

//定义

add=()=>{}

//调用

{this.add}

（3）定义普通函数，调用时先调用箭头函数，再由箭头函数调用普通函数。

{()=>this.add}

如下：使用bind函数替换this指向、使用箭头函数触发