正文

react学习阶段性总结(代码片段)

老张在线敲代码  老张在线敲代码  2022-12-05  599

关键词：

React简介

React 是一个用于构建用户界面的 JAVASCRIPT 库，主要用于构建UI。

React由美国的公司Facebook在2013年发布
在这里插入图片描述

特点：

1.声明式设计 −React采用声明范式，可以轻松描述应用。

2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

3.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

4.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

5.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单
在这里插入图片描述

react中共有俩种组件类型：

class类组件

在 class 类组件中 React 元素的位置是在 render() 函数中，也就是说，类组件中必须有一个 render() 函数，在 render() 函数中必须有 return 的值，这个值必须是虚拟 DOM（React 元素）。

class View extends React.Component 
  render() 
    return <h1>Hello, this.props.name</h1>;
  

export default View

函数组件（其中包含react新特性hook）

1. 组件名字首字母一定是大写的
2. 函数组件又叫无状态组件，没有生命周期 （hook出现后使得函数组件也有了自己的生命周期）
3. 函数组件只有当展示视图的时候才用。做复杂的数据处理、需要有自己的状态的时候，需要用类组件。

function View(props) 
  return <h1>Hello, props.name</h1>;

总结：

无论是函数组件还是类组件，return 的 React 元素的语法必须是由一个标签包裹起来的所有虚拟 DOM 内容，可以直接通过一个div对元素进行包裹或者是使用react中的<React.Fragment>进行包裹，这个标签的缩写为<></>

Jsx语法：

在使用react框架开发后发现里面用jsx语法代替了javascript
jsx语法是一个类似于XML的js语法扩展

优点：
1.JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
2.它是类型安全的，在编译过程中就能发现错误。
3.使用 JSX 编写模板更加简单快速。

State：

state在react中是可读可写的，只不过不能直接对state值进行修改

修改方式：

一种是直接正常修改使用setState修改a：12改成a：44
setState是异步的

	this.setState(
        name: "小明",
     );

另一种是改变自身的值例如i++则使用函数进行修改

this.setState((state, props) => (
      age: state.age + 3,
      test: state.test + 4,
    ));

Props:

在react中props是以一个只读的属性存在的

使用场景：
1.父传子：props.children 接收父组件(闭合组件)传入的数据

2.子传父：子组件通过调用父组件传递到子组件的方法向父组件传递消息的。

3.同级互传：通过父级中介实现兄弟a组件的数据给到兄弟b组件

具体流程：组件A – 传值 --> 父组件 – 传值 --> 组件B

4.跨级通信：context，mobx，redux

React生命周期：

在这里插入图片描述
上图仅供参考

上图部分钩子函数已经废弃，下面总结的都是目前可用的没被废弃掉的

如上图所示主要分为三大阶段：

挂载阶段：

constructor：初始化数据，挂载前（只在页面加载时执行一次）

render： 渲染数据/dom片段到页面（非一次性，可多次触发）

componentDidmount 挂载后（一次性，一般用于发起ajax请求）

更新阶段：

render 渲染数据/dom片段到页面（非一次性，可多次触发）

componentDidUpdate 更新完成（可以多次执行）

卸载阶段：

componentWillUnmount 卸载完成（在页面关闭或者更换组件时触发，一般用于清除定时器或者终止axios请求）

在这里插入图片描述

具体使用中React跟Vue的对比

Vue和React两个JavaScript框架都是当下比较受欢迎的框架下面说一下他们俩大框架的区别

共同点：

都鼓励支持组件化开发且都允许使用props

区别：
Vue主要是一个以数据驱动为视图得渐进式mvvm框架，最大的特点就是双向数据绑定
React是一个声明式，高效且灵活的用于构建用户界面的JavaScript库，与vue不同，他是单向数据流

react学习笔记总结(代码片段)

文章目录1.React嵌套路由(多级路由)2.params参数与query参数3.React路由组件传递params参数数据4.React路由组件传递search参数5.React路由组件传递search参数6.React路由组件特殊情况:刷新页面7.React路由的push和replace8.React的编程式路由9.React路... 查看详情

第二阶段学习总结(代码片段)

第二阶段学习总结markdown-优点-纯文本内容，编辑方便-学习成本低-轻量级标记语言，不用大量关注排版，专注内容编写-缺点-没有被标准化，版本较多，目前主流版本为gfm-不支持复杂的格式-不同的版本之间不兼容问题基本问题... 查看详情

react学习笔记总结(代码片段)

文章目录1.React(v16.8版本)生命周期2.React(v16.8版本)生命周期更新流程2.1三个更新流程2.2setState()的生命周期流程(对应上图2号线)2.3forceUpdate()的生命周期流程(对应上图3号线)2.4父组件render()渲染的生命周期流程(对应上图1号线)2.5React(v... 查看详情

react学习笔记总结(代码片段)

文章目录1.React简介2.React的核心工具库3.实现一个React的实例4.React两种创建虚拟DOM的方式5.虚拟DOM与真实DOM的对比6.jsx语法规则7.jsx实战练习8.React开发者工具安装9.React函数式组件10.js的类相关知识11.React类式组件12.组件实例对象的... 查看详情

react学习笔记总结(代码片段)

文章目录1.redux介绍2.redux工作流程3.redux的使用4.redux完整结构补充5.redux的异步action6.react-redux库与redux库7.react-redux库的实战8.react-redux的connect最精简写法9.react-redux的Provider组件作用10.react-redux整合UI组件和容器组件11.redux的combineReduce 查看详情

react学习笔记总结(代码片段)

文章目录1.React之props的使用2.React之对props进行限制3.React之props只读(知道修改在这是什么效果！)4.React之props简写方式5.类式组件中的构造器与props的注意事项6.函数式组件使用props7.类式组件字符串形式的refs属性8.React之回调形... 查看详情

react学习笔记总结(代码片段)

react学习总结(代码片段)

初始配置$1创建基本的webpack项目创建目录npminit-y创建package.jsoncnpmiwebpackwebpack-cli-D安装webpackwebpack-cli包在根目录创建webpack.config.js并写入相应代码module.exports=mode:‘development‘终端里输入webpack进行打包，之后dist文件夹里多出个main.j... 查看详情

react学习笔记总结(代码片段)

文章目录1.创建组件流程(以及脚手架环境流程)2.样式的模块化3.常用快捷生成4.通用性组件编码流程5.React脚手架配置代理5.1React引入ajax库5.2第一种配置代理方式(package.json)5.3第二种代理方式(setupProxy.js)6.ReactList列表效果实现7.React... 查看详情

react学习笔记总结(代码片段)

react-router6版本的学习笔记。文章目录一、ReactRouter6二、router6版本的安装和一级路由1.安装router6版本2.Routes组件和Route的element属性三、router6之重定向四、router6的NavLink高亮五、router6的useRoutes路由表(重要)六、router6的嵌套路由七、r... 查看详情

react源码学习-实习篇-状态更新(代码片段)

实现篇-状态更新状态更新的流程-几个关键节点先了解几个关键函数的调用，看看常见触发状态更新的方法是如何工作的。render阶段的开始之前就了解归，render阶段开始于performSyncWorkOnRoot/performConcurrentWorkOnRoot,他们会执行... 查看详情

javase视频学习阶段性总结四（继承）(代码片段)

继承1.继承的背景 1)继承的由来：Java继承是使用已存在的类的定义作为基础建立新类的技术，新类的定义可以增加新的数据或新的功能，也可以用父类的功能，但不能选择性地继承父类。这种技术使得复用以前的... 查看详情

web前端学习阶段总结-------模仿百度页面(代码片段)

以“百度”首页为模板，设计百度仿真页面，效果如：代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>模仿百度</title></head><body><palign="right">< 查看详情

react----redux学习总结(代码片段)

redux:　　redux是flux的进阶版，相较与flux更加方便，其内部封装了flux的一些方法，使可以快速的完成数据的交互1、使用场景　　大型项目　　多模块，多数据 2、安装cnpminstallredux--save-dev 3、工作流程：　　当组件需要改... 查看详情

react学习笔记总结(代码片段)

针对React拓展相关的学习。文章目录一.React项目打包二.React扩展之setState两种写法三.React扩展之lazyLoad(懒加载)四、React的stateHook五、React的EffectHook六、React的RefHook七、React的Fragment八、React的Context九、React的PureComponent1.Component组件... 查看详情

javase视频学习阶段性总结五（方法重写与方法重载的区别）(代码片段)

继承和多态都是面向对象程序设计的特点。使用继承可以在一个父类的基础上再创建一个子类，这个子类不但拥有父类已有的属性和方法，还可以创建属于自己的属性和方法。由于子类和父类之间的关系，从而引出了... 查看详情

react组件通信与生命周期(代码片段)

...挂载阶段更新阶段卸载阶段错误处理受控组件非受控组件总结state和setStatestate组件自身状态setState(updater[,callback])updater更新数据的方法/对象c 查看详情