无比流畅的React入门教程TOC
简介
- 用于构建 Web 和原生交互界面的库
- React 用组件创建用户界面
- 通俗来讲：是一个将数据渲染为HTML视图的开源JS库
其他信息
- Facebook 开发，并且开源
- 原生JS使用DOM-API修改UI代码很繁琐，效率低下，React可以解决这种问题
- 原生JS直接操作DOM，浏览器会大量重绘重排，React可以解决这种问题
- 原生JS没有组件化方案好用，代码复用率很低，
- React 采用组件化模式，React 让你可以通过组件来构建用户界面
- React 使用声明式编码
- React 使用虚拟DOM，将数据映射成虚拟DOM,再生成真实DOM,当数据变化的时候，会对原有的虚拟DOM和新的虚拟DOM进行比较,再生成真实DOM。
- React 使用DOM diffing 算法，最小化页面重绘
特点
声明式设计 −为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。
- 高效 −React采用Virtual DOM(虚拟DOM), 极大的提升了UI渲染(更新)效率。
- 灵活 −React 允许你结合其他框架或库一起使用。
- JSX − JSX 是 JavaScript 语法的扩展。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。
- 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
- 单向响应的数据流 − React 采用了单向响应的数据流，使组件状态更容易维护, 组件模块化更易于快速开发。
前置条件
- ES6
- Class
- js基础
文档
- 中文文档: https://reactjs.bootcss.com/learn
- 英文文档: https://react.dev/learn
基础知识-点击获取教程代码
基础概念了解（也可以直接跳过概念，去看下面的快速上手部分哦）
了解 Babel
- ES6转化为ES5
- JSX转化为JS
了解 模块与组件
模块
- 1、理解：向外提供特定功能的js文件；
- 2、业务逻辑增加，代码越来越多且复杂，需要拆成模块
- 3、作用：复用js，简化js的编写，提高js运行效率；
组件
- 1、理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)；
- 2、为什么要用组件： 一个界面的功能更复杂，拆分成一个一个小组件，更容易复用
- 3、作用：复用编码，简化项目编码，提高运行效率；
模块化、组件化
应用的js都以模块来编写-就是模块化
应用是以多组件的方式实现-就是组件化
React开发者工具
引入依赖库，理解基础jsx语法
注释-在花括号里
数组-JSX 允许在模板中插入数组,且自动展开
组件
- react提供两种形式创建组件，函数式组件和class形式
组件使用注意事项：
- 组件名必须是首字母大写
- 虚拟DOM元素只能有一个根元素
- 虚拟DOM元素必须有结束标签
函数式组件
class形式，这个提一下，后面就不再举例啦，之后都用函数式
组件核心属性
state
通俗理解：state就是组件的一些数据绑定，数据变了，页面就会变，这是我的理解哦
注意事项
- 1、切勿直接修改state数据，直接state会重新渲染内容；
- 2、通过setState修改后，不会立即修改DOM，react会在所有状态改变后，对比虚拟DOM，统一修改，提升性能；
关于this
-
- 组件中的 render 方法中的 this 为组件实例对象
-
- 组件自定义方法中由于开启了严格模式，this 指向 如何解决
- 通过 bind 改变 this 指向
- 推荐采用箭头函数，箭头函数的 指向
因为类式组件基本不怎么用，所以接下来只写函数式组件内容啦
props
理解
- 1、每个组件对象都会有props(properties的简写)属性；
- 2、组件属性保存在props中；
作用
- 1、通过标签属性从外向组件内传递变化的数据；
- 2、props只读
使用：
refs
组件内的标签可以定义ref属性来标识自己
有三种操作的方法，分别为：
- 字符串形式
- 回调形式 render(){return(
<input ref={c => this.input1 = c } type=“text” /> 箭头函数简写,使用时可通过 来使用
- 形式
createRef step1:给DOM元素添加ref属性
createRef step2:通过API，创建React的容器，会将DOM元素赋值给实例对象的名称为容器的属性的
事件处理
- React 使用自定义事件，非原生 DOM 事件
- React 事件通过事件委托方式处理（更高效）
- 可用 获取 DOM 减少 使用
非受控租价与受控组件
包含表单元素的组件分为非受控租价与受控组件
- 受控组件：表单组件的输入组件随着输入并将内容存储到状态中（随时更新）
- 非受控组件：表单组件的输入组件的内容在有需求的时候才存储到状态中（即用即取）
受控组件 - 1、表单元素依赖于状态，表单元素需要默认值实时映射到状态的时候，就是受控组件，这个和双向绑定相似；
- 2、元素修改实时映射状态值，可对输入内容进行校验；
- 3、只有继承React.Component才有状态；
- 4、必须使用onChange绑定
非受控组件 - 1、在虚拟DOM节点上声明ref，且将引用赋值ref
- 2、react会自动将输入的值放在实例的ref属性上
注意：官方推荐受控组件，更好的控制组件生命流程
- 1、受控组件的两个要点：
组件的value属性与React中的状态绑定
组件内声明了onChange事件处理value的变化 - 2、非受控组件更像是传统的HTML表单元素，数据存储在DOM中，而不是组件内部，获取数据的方式是通过ref引用；
- 3、尽可能使用受控组件；
- 4、受控组件是将状态交由React处理，可以是任何元素，不局限于表单元素；
- 5、大量表单元素的页面，使用受控组件会使程序变得繁琐难控，此时使用非受控组件更为明智；
1. vscode安装appworks插件(这个appworks大家反映已经不能用了，请参考我补充的其他方式，往下翻)
2. 安装成功后，我们vscode左侧会出现这个图标，点击它(这个appworks大家反映已经不能用了，请参考我补充的其他方式，往下翻)
3. 查看右侧，选择一个干净的框架，快速创建一个react 项目(这个appworks大家反映已经不能用了，请参考我补充的其他方式，往下翻)
4. 输入项目名称，创建项目(这个appworks大家反映已经不能用了，请参考我补充的其他方式，往下翻)
5. 下载依赖，运行项目
- 点击获取教程代码
- 关于此框架–More docs
- 开发前确保 node 版本是 14.x 或以上。
- 可以直接下载之前版本现成代码运行，点击获取教程代码
- 关于此框架–More docs
在你喜欢的目录下，打开黑窗口，或者是使用vscode运行命令
使用vscode打开项目目录，下载依赖，运行项目
运行成功
新版本目录
For more detail, please visit docs.
老版本目录（可以直接下载我的代码运行，目录是这样的）
- 点击获取教程代码
创建组件文件
配置路由
配置菜单
react-demo-xiaojin/src/layouts/BasicLayout/menuConfig.js
成功展示
React 应用由组件组成，React 组件是返回标签的 JavaScript 函数，就像下面这样
把它嵌套到另一个组件中
悄悄说一句：React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母
编写 JSX 语法的标签
JSX简介
- 1、全称：JavaScript XML
- 2、react定义的一种类似于XML的JS扩展语法：JS + XML本质是React.createElement(component, props, …children)方法的语法糖
- 3、作用：用来简化创建虚拟DOM
- 4、写法：
基本语法规则
- 1、定义虚拟DOM时，不要写引号；
- 2、标签中混入JS表达式时要用{}；
- 3、样式的类名指定不要用class，要用className；
- 4、内联样式，要用style={{key:value}}的形式去写；
- 5、只有一个根标签；
- 6、标签必须闭合；
- 7、标签首字母：
JSX 标签，你必须为所有最高层级的标签添加一个共同的父标签，例如使用下面的标签作为父标签
举个栗子
如果你需要将大量 HTML 代码移植到 JSX 语法，可以使用这个在线转换器
添加样式
在 React 中，通过 className 这个属性来指定 CSS 类。它和 HTML 的 class 属性的功能是一样的：
然后在一个单独的 CSS 文件中为其编写 CSS 样式：
举个栗子：以下代码将显示 user.name 的值。
举个栗子：以下代码读取 user.imageUrl 变量的值，然后将该值作为 src 的属性进行传递
举个栗子：字符串拼接
悄悄告诉你：style={{}} 是 对象被放在了 style={ } 花括号里哦
if 语句
条件运算符
更简短的 && 语法
举个栗子：处理事件代码是这样写的哦~
如何点击按钮后更新页面数据呢？
从useState获得:当前状态(count)和更新它的函数(setCount)。你可以给它们取任何名字，惯例是[something, setSomething]。第一次显示按钮时，count将为0，因为将0传递给了useState()。当要改变状态时，调用setCount()并将新值传递给它。单击此按钮将增加计数器, React会再次调用你的组件函数。这一次，count将是1 …
以use开头的函数称为Hooks。useState是React提供的一个内置钩子。你可以在React API参考中找到其他内置Hooks。您还可以通过组合现有的hook来编写自己的hook。钩子比常规函数更具限制性。你只能在组件的顶层调用Hooks(或其他Hooks)。
举个栗子
下面是一个浅显易懂的父子组件传参案例
父组件
子组件
工具函数
添加交互
- 响应事件
- State
- 更新状态中的对象、数组
管理状态
- 用状态响应输入
- 选择状态结构
- 在组件之间共享状态
- 保存和重置状态
- 将状态逻辑提取到一个reducer中
- 使用上下文深入传递数据
- 使用reducer和context进行扩展
今天就写到这里啦~
- 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
- 大家要天天开心哦
欢迎路过的小哥哥小姐姐们提出更好的意见哇~~
到此这篇reactjs教程（reactjs.net）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdreactjs/24270.html