React
文章平均质量分 84
React学习记录
努力的小朱同学
未来很长,梦想很远。
展开
-
React学习笔记(九)--- Redux相关
一、简介 什么是Redux?官网文档是这么说的:Redux 是一个使用叫做“action”的事件来管理和更新应用状态的模式和工具库 ,它以集中式Store(centralized store)的方式对整个应用中使用的状态进行集中管理,其规则确保状态只能以可预测的方式更新。简单来说,Redux就是一个管理全局状态的JS库,把一些在项目的很多页面中都使用到的状态,集中进行管理,并且能很方便的在整个项目的任何页面使用,类似于Vue的Vuex。 Redux可以应用于React、Vue、Angular等原创 2022-02-24 11:42:37 · 815 阅读 · 0 评论 -
React学习笔记(八)--- HooK
一、简介 在之前的学习中,我们了解到只有类组件中才能使用 state,函数组件是无法使用的。但Hook的出现,改变这种情况,Hook是React 16.8 版本的新增特性,可以让我们在函数组件中使用state、生命周期以及refs、context等其他相关特性。而且Hook可以让我们在不更改组件结构的前提下复用状态逻辑,使得在组件间共享Hook变得十分便利。 简单来说,Hook就是一些React中封装好的state以及生命周期、refs等特性的方法,本质就是 JavaScript 函数。除了Re原创 2022-02-20 21:24:10 · 1275 阅读 · 0 评论 -
React学习笔记(七)--- 路由基础
一、路由概念 目前流行的前端框架大都构建的是SPA(单页面应用程序),也就是只有一个HTML页面的应用程序。前端路由的出现,就是为了实现在单页面上对多页面内容的管理。前端路由可以让用户从一个页面导航跳转到另一个页面,但HTML页面本身并没有跳转,仅仅是页面内容发生了变化。 在React中,路由是一套映射规则,是URL路径与组件的对应关系。配置路由就是配置路径和组件的对应关系。二、基本使用1、使用步骤 ① 安装路由的依赖包:npm i react-router-dom ② 导入路由原创 2022-02-13 21:32:39 · 419 阅读 · 0 评论 -
React学习笔记(五) --- 组件生命周期和组件复用
一、组件生命周期1、概念 组件的生命周期是指组件从被创建到挂载到页面中,再到组件卸载的过程。在React中,只有类组件才有生命周期,函数组件是不存在生命周期的。组件生命周期大体分为三个阶段:创建阶段、更新阶段、卸载阶段。在组件生命周期的每一个阶段,React 都给我们提供了一些方法,让我们可以在对应阶段执行某些任务,这些方法就是生命周期的钩子函数。2、创建阶段 生命周期的创建阶段常用的钩子函数有三个,执行顺序为:constructor() --> render() --> co原创 2022-01-26 18:38:38 · 1480 阅读 · 0 评论 -
React学习笔记(二)--- 组件基础
一、组件概念 组件是react最重要的概念,可以说使用react就是在使用组件。组件表示页面中的部分功能,多个组件联合就能实现一个完整的页面。多个组件可以合成一个复杂组件,我们也可以把页面理解成一个由多个小组件构成的复杂大组件。 组件的特点:可复用、独立、可组合。 react声明组件的方式有两种:① 函数创建 ② 类创建(常用) ,这两种方式创建的组件主要区别在于有无状态。二、创建组件1、利用函数创建组件 我们可以用 JS 的函数(包括箭头函数)的来创建组件,这类组件的名称一般原创 2022-01-16 19:11:33 · 457 阅读 · 0 评论 -
React学习笔记(三)--- 基本表单处理
一、表单处理1、受控组件 在React中我们可以通过将 state 与表单元素的 value 绑定的方式,来控制表单元素的值,被控制的表单元素也被称为受控组件。但是表单元素是可输入的,也就是说值是会变化的,而在React中数据存放在state中,并且只能通过 setState() 方法来修改。 此时可变的表单元素的值和不可直接改变的 state 发生了冲突,所以我们需要给表单元素绑定 change 事件,在对应的事件处理程序中,通过this.setState() 来修改表单元素绑定的state原创 2022-01-21 23:51:43 · 695 阅读 · 0 评论 -
React学习笔记(一)--- 框架基础 和 JSX
一、React基础1、概述 React是一个用于构建用户页面的JavaScript库,主要用来写HTML页面或构建Web应用。如果从MVC分层的角度来看,React 仅仅是负责视图层(V层)的渲染,由Facebook开发并开源的。2、特点① 声明式 react 在JS中通过JSX来声明HTML结构,渲染页面,并在数据变化时更新页面。② 基于组件 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。组件是react最重要的特点,组件的特点是原创 2022-01-04 21:22:44 · 432 阅读 · 0 评论 -
React学习笔记(六) --- 部分原理机制
一、setState()详解1、异步更新 我们都知道 setState() 使用来更新数据的,但你知道吗?setState() 方法更新数据的操作,是异步更新操作。 也就是调用setState()之后状态值并不会立即改变,而是等同步操作执行结束后才会进行改变。所以在连续使用该方法修改数据时,后面的setState()不能依赖于前面的setState(),因为后面的setState()在被调用时,前面的setState()还并未将状态修改,所以后面的setState()获取的值,还是状态的初始值。/原创 2022-02-09 23:47:38 · 365 阅读 · 0 评论 -
React学习笔记(四)--- 组件通讯
一、组件通讯概念 在React中,组件是独立且封闭的单元,在默认情况下,组件state中的数据是私有数据,组件只能使用自身的数据。但是在实际项目开发过程中,我们的页面是由多个组件共同组成的,而这些组件之间不可避免的要共享某些数据,这个在组件之间传递数据的过程,就称为组件通讯。二、props 基础 在React中封闭的组件想要接收外部数据应该通过 props 来实现。props是一个只读的对象,对象内的属性值就是外部传递过来的数据,属性只能被读取,无法被修改,属于单向数据流。 组件传递数据原创 2022-01-21 23:53:04 · 524 阅读 · 2 评论