<blockquote> 讯享网
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
一、React入门介绍
1.React是什么
2.React特点
3.React 高效的原因
二、配置环境
1.安装react.js(npm)
2.搭建react框架
3.用vsCode打开react项目
4.下载插件（个人喜好）
三、基本使用
1.hello react
2.State响应式
3.State的特点
4.循环渲染
5.条件渲染
6.事件绑定
7.综合制作列表效果
8.样式操作
9.生命周期
总结
本文为react学习笔记，自用。
React是用于构建用户界面的 JavaScript 库；是一个将数据渲染为HTML视图的开源 JavaScript 库。
声明式编码、组件化编码、React Native编写原生应用、高效(优秀的 Diffing 算法)。
（1）使用了虚拟(virtual)DOM,不总是直接操作页面真实 DOM。（而且在操作真是dom之前，会比较两个不同的虚拟dom，比较出有差异的那一部分再去更新页面）
（2）DOM Diffing 算法,最小化页面重绘。
（1）国内使用 npm 速度很慢，菜鸟建议我们使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
打开“命令提示符”，输入 ：
讯享网
这样是安装成功。
（2）接下来切换到镜像：
切换成功。
（1）安装 create-react-app
Create React App是React 提供的一个官方工具，用于快速搭建 React 项目；create-react-app 自动创建的项目是基于 Webpack + ES6。
打开“命令提示符”，输入 ：
讯享网
这样create-react-app就安装成功了。
（2）新建react项目
在你喜欢的位置新建一个文件夹，我的文件夹名字叫react_start，在文件夹内右键，以管理员身份运行，输入：
创建成功。
打开刚刚创建好的项目：
讯享网
打开成功。
运行项目：
是否要在另一个端口上运行应用程序？ 选-y
运行成功。
找到项目所在的文件夹，右键点击“通过Code打开”。（前提是电脑要有vsCode）
Code Spell Checker：检查是否有拼写错误
Fitten Code ： AI 编程助手，它可以自动生成代码，提升开发效率，调试 Bug。
Simple React Snippets：可以通过缩写来触发代码片段，该插件会自动帮你补全，用于快速生成React组件结构。
插件根据自己需要进行安装，网上也有很多好用便捷的。
打开文件，App.js是主组件文件，定义了一个基础的 React 组件。
在App.js写入下面代码：
讯享网
查看刚刚在浏览器运行的页面：
State即组件要用的数据，react和vue的这类框架的核心就是把请求的来的数据展示在页面上，数据更新后也需要响应式的展示新数据。
React中的state就类似于vue的data，用来做响应式的数据。
新建在 目录中新建一个文件夹components，在components文件夹里新建test1.jsx和test2.jsx文件。（写js的话 .js文件也没问题）
test1:
test2:
讯享网
App.js：
页面展示：
test1 修改方式：
讯享网
test2 修改方式：（修改单个数据、数组、对象）
3秒后页面变化： 修改成功
（1）forEach： 全部在 test2中修改
讯享网
（2）map:
（3）函数:
讯享网
页面展示：
在test1中修改：（这样写是整个<div>板块被换掉）
页面展示：
其实上面带了一个click事件了，就是click={ }，注意一定要写花括号。
事件传参的话用.bind(this， ）; 传参的过程中会把事件本身带回去，也就是下面代码中的“e”。
讯享网
页面展示：
我这里遇到了一些问题，我想查看输出内容时，浏览器显示Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools。
我用的谷歌，查了一下是需要下载react-devtools调试工具。
下载方法：点击链接React Developer Tools - Chrome 应用商店-Chrome插件下载-收藏猫插件 (pictureknow.com)
点击“下载插件手动安装”。下载好后解压，按照下图步骤添加扩展。
这样点击按钮后就能在控制台看到传过去的参数和打印出来的e
代码如下：综合上述所学。在components文件夹下新建tableList.jsx
（1）在标签中加className = “ ” ，可以直接在App.css里面写样式。
（2）外联样式，一经加载将全局有效，所以类名在命名的时候要特别注意，避免全局污染，在components文件夹下新建tableList.css：
tableList.jsx:
讯享网
tableList.css:
页面展示：
（3）CSS Modules模块化
这种方式是webpack的方案，所有css只作用于当前组件，不会影响当前组件的后代组件，样式之间不会有冲突。
如果要用这个方式，那么tableList.css的命名要写成tableList.module.css，且.css文件要与对应的.js文件放在同一个文件夹里。tableList.js修改的代码如下：
讯享网
引用一下B站大佬的图：
（1）Mounting(挂载)：已插入真实 DOM
（2）Updating(更新)：正在被重新渲染
（3）Unmounting(卸载)：已移出真实 DOM
未完待续，持续更新
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/202296.html