react入门到精通（react 入门到精通）



React这个项目是facebook开源出来的一个优秀前端库。官网将React称为库（jquery库），React默认提供的只是前端的页面更新方案。并没有提供完整的前端所有核心内容。比如路由、状态机。这些都需要我们自己搭建。在2013年5月开源出来。提出了很多概念在当时都是比较前卫的思想。组件化开发、虚拟dom加载。React开发有两个分支：

学习：react.nodejs.cn/优势：

你们可以基于脚手架工具。快速搭建一个项目。

(1)创建项目

脚手架工具的文档：cra.nodejs.cn/docs/gettin…

这种方式来创建项目，本地无需安装脚手架。就可以直接创建项目

临时在本地安装一个脚手架工具，创建项目，创建完成后，删除脚手架

在本地安装好脚手架，直接用本地脚手架搭建项目。这种方式我们不推荐。

创建项目，项目名字不能出现大写字母，不能中文

安装yarn包管理器。默认提示你采用yarn启动项目

npm来启动项目

(3)改造项目

src目录下面只留

组件化思想：针对页面UI部分，进行了页面的拆分。将公共的页面模板拆分，最后在自己组合在一起。模块化思想：针对JS脚本设计，将代码进行模块拆分。减少当前脚本体积，提高复用性。比如很多的工具提取出来。

a.js

b.js

最早解决思路

采用IIFE来解决问题。

a.js

b.js

ES6这个版本，官方也推出了模块化思想

工程化思想：以前我们项目在没有脚手架搭建的时候，都是自己下载包。自己来进行代码压缩混淆。基于webpack或者vite这种打包工具。你们直接依赖这些工具完成前端项目构建，打包、部署

React中组件有两种

在目前项目开发过程中，两种组件都会接触到。在React中我们组件后缀有两种格式，在里面写jsx代码，后缀支持的一种格式安装插件

创建组件的时候

:创建一个类组件的模板

:创建一个函数组件的的模块

类组件的代码

React设计思想：将JS+HTML模板统一放在一个文件中，写完了代码后。JS 和HTML分开解析。最后html+css+js

原生JS代码

函数组件的代码

组件本身设计的一种模块，可以将代码抽取出来。再React中就是采用JSX来作为组件的语法

JSX = JavaScript + XML

JavaScript就是基于ES5ES6引入过来规范。

XML:标签语言，表示组件中所有标签模板。代码解析的时候。XML标签就是转化HTML标记了。

接下来你再组件中写的所有代码都是JSX代码。浏览器无法直接解析。

在启动项目的时候

webpack就会开始打包项目。babel这个插件，将jsx代码转化为浏览器能是被的js代码。最后才浏览器运行

每个组件都要求，必须提供根标签。否则报错

使用这个来作为根标签，最终页面不会渲染出来。解决报错问题

总结：

在JSX中动态绑定一个属性，我们需要

在JSX中支持两种样式设计

内联样式：JSX中的样式已经经过封装过了。

因为style对象可以接受多个css样式，所以我们提供的是一个对象，定义很多样式

外部样式：

在styles文件夹下面创建css文件header.css

JSX代码

不管在哪个组件中，一旦名字一致，相互影响为了解决这个问题，React提出了一个概念。模块化样式。开发步骤 styles文件夹下面创建文件名字 tabA.module.css

组件中使用

Vue中组件内部数据使用data来定义。只要放在data中，这个数据响应式变化。一旦发生数据更新，页面也会更新

在React中组件内部数据采用state来定义

语法一：在构造器中定义state变量

页面上使用这个变量的时候

为了更加优化代码，一般会在render函数里面解构，在去使用

语法二：无需再构造器中定义

(6)组件事件绑定基本语法

React标签上面事件都被封装了一次。JSX的规则

命名规范采用驼峰命名方式

Vue

事件参数传递

绑定事件，提供事件函数，如果这个函数没有加括号。将函数地址放在这个模板中。

点击li元素，找到这个函数，并执行

对于JSX来说，立即调用check这个函数。

解决这个问题方案：

给onClick这个事件绑定一个箭头函数，再这个箭头函数里面调用check函数。只有事件被触发，箭头函数调用，check才会执行。传递参数过去

如果你函数是普通函数，默认拿到this结果为undefined页面中绑定事件，节点来触发事件。React底层处理过，并不会直接返回节点。

如果函数是普通函数，绑定事件bind来改变this的指向，函数里面this指向当前组件。

总结：以后再React开发过程中，能用箭头函数就直接用箭头函数。

只要有事件绑定，那一定会有event事件对象产生。默认绑定不传递参数的时候，事件函数第一个参数就是event对象

如果你的事件函数要传递参数

遇到要传递参数的时候，外层箭头函数才是事件绑定的函数。传递给内部的函数使用

(7)组件数据更新

组件内部数据state来定义。直接修改state的值，页面并不会检测更新

当React检测到调用这个函数，将原来值进行替换。render函数重新调用一次

当我们进行数据修改的时候，setState里面传递的新的对象，修改的值和会原来state的值进行合并。不会覆盖

更新规则

setState在更新数据的时候。合并操作。并不是覆盖操作

修改的时候，指定了修改的变量。state原来的值没有变化，并不会被覆盖。

异步更新

setState这个函数，可以更新state的数据，并且调用render实现页面刷新。

但是本身是一个异步任务。无法立即获取修改的结果

为了性能考虑，设计的方案，不管是Vue还是React，我们都是异步更新

为了能获取更新过后的结果，我们提供回调函数

合并更新

setState一旦调用，数据发生更新，render就会被执行

一次性执行多个二setState，每个更新任务，都会放在队列中。

队列中任务会取出来进行合并，当发现多个任务的时候。后进入队列中将内容和前面任务合并了。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/76497.html