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

目录

一、React概述

1.脚本方式创建react初始模板

2.react的封装

二、组件

1.函数方式定义组件

2.函数组件传参

3.类方式定义组件

4.类组件传参

三、事件

一、React概述

React 是一个声明式，高效且灵活的用于构建用户界面的 javaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

详细教程可参见官网：

React 官方中文文档 – 用于构建用户界面的 JavaScript 库https://react.docschina.org/

React框架的书写方式分为两种，一种是脚本方式（JavaScript标签引入，练习使用）；一种是react脚手架方式（常用）。

1.脚本方式创建react初始模板

为了能够正常使用react框架进行编程，我们创建好自己的项目之后，需要在页面中引入两个CDN链接：react库 和 react-dom库；

对于这两个远程地址也可直接在官网下载到本地之后直接用引入项目中；如下：

除此之外还应注意，React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。所以在React中使用的是JSX语法，但是浏览器不识别JSX，我们就需要引入babel（Babel 中文网 · Babel - 下一代 JavaScript 语法的编译器）来解析翻译，而且需要在script写上对应属性，格式如下：

//引入Babel

引入所需要的链接之后，就需要创建挂载点（其实就是一个带有id名的div）了，专门用于插入后续生成的内容，如下：

这样，一个完整的react初始模板就完成了，总结起来为三步：

（1）在页面中引入 react 库 和 react-dom 库；

（2）引入 Babel；

（3）创建挂载点。

完整代码如下：

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原生写法：

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

解决方式：

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

{this.add.bind(this)}

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

//定义 add=()=>{} //调用 {this.add}

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

{()=>this.add}

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

babel React

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。