【JavaScript】滑块验证码

2.react的封装

封装react共有三步：

（1）创建虚拟DOM对象；创建对象包含有3个参数，标签名、属性(对象格式)、标签内的内容；

（2）获取挂载点；

（3）渲染页面。

格式如下：

此封装过程也可用JSX语法来写：

可以看出，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原生写法：