React学习

React学习笔记（九）--- Redux相关

一、简介什么是Redux？官网文档是这么说的：Redux是一个使用叫做“action”的事件来管理和更新应用状态的模式和工具库，它以集中式Store（centralizedstore）的方式对整个应用中使用的状态进行集中管理，其规则确保状态只能以可预测的方式更新。简单来说，Redux就是一个管理全局状态的JS库，把一些在项目的很多页面中都使用到的状态，集中进行管理，并且能很方便的在整个项目的任何页
努力的小朱同学·2022-02-26 22:40

React 学习笔记

文章目录React学习笔记安装基础概念变量css列表组件事件处理事件对象state表单处理一个实现评论的案例高阶概念props传递数据函数传递数据constructorpropschildrenprops
肖萧然·2022-02-24 19:29

React学习笔记（六） --- 部分原理机制

一、setState()详解1、异步更新我们都知道setState()使用来更新数据的，但你知道吗？setState()方法更新数据的操作，是异步更新操作。也就是调用setState()之后状态值并不会立即改变，而是等同步操作执行结束后才会进行改变。所以在连续使用该方法修改数据时，后面的setState()不能依赖于前面的setState()，因为后面的setState()在被调用时，前面的set
努力的小朱同学·2022-02-21 10:20

React学习笔记（五） --- 组件生命周期和组件复用

一、组件生命周期1、概念组件的生命周期是指组件从被创建到挂载到页面中，再到组件卸载的过程。在React中，只有类组件才有生命周期，函数组件是不存在生命周期的。组件生命周期大体分为三个阶段：创建阶段、更新阶段、卸载阶段。在组件生命周期的每一个阶段，React都给我们提供了一些方法，让我们可以在对应阶段执行某些任务，这些方法就是生命周期的钩子函数。2、创建阶段生命周期的创建阶段常用的钩子函数有三个，执
努力的小朱同学·2022-02-21 10:19

React学习笔记（七）--- 路由基础

一、路由概念目前流行的前端框架大都构建的是SPA（单页面应用程序），也就是只有一个HTML页面的应用程序。前端路由的出现，就是为了实现在单页面上对多页面内容的管理。前端路由可以让用户从一个页面导航跳转到另一个页面，但HTML页面本身并没有跳转，仅仅是页面内容发生了变化。在React中，路由是一套映射规则，是URL路径与组件的对应关系。配置路由就是配置路径和组件的对应关系。二、基本使用1、使用步骤①
努力的小朱同学·2022-02-21 10:49

React学习笔记 —— Hook

什么是Hook?Hook是一些可以让你在函数组件里“钩入”Reactstate及生命周期等特性的函数。Hook不能在class组件中使用——这使得你不使用class也能使用React特性。Hook和函数组件函数组件又称为“无状态组件”constExample=(props)=>{//你可以在这使用Hookreturn;}functionExample(props){//你可以在这使用Hookret
油头周大锅·2022-02-21 10:46

react学习笔记---React扩展

React扩展1.setStatesetState更新状态的2种写法2.lazyLoad路由组件的lazyLoad3.Hooks1.ReactHook/Hooks是什么?2.三个常用的Hook3.StateHook4.EffectHook5.RefHook4.Fragment使用作用5.Context理解使用注意6.组件优化Component的2个问题效率高的做法原因解决7.renderprops
苏米素·2022-02-21 10:16

React学习笔记4-Effect Hook

EffectHooks由俭入奢易，由奢入俭难。——司马光之前通过class来编写Component，一些辅助的方法是通过componentDidMount,componentDidUpdate来实现。通过React的effecthook可以实现类似的功能。比如现在在组件显示之前需要通过网络加载一下数据，还是通过之前用的usersapi来demo:importReact,{useState,useE
W1nt3rs·2022-02-21 10:16

React学习笔记1-基础

HelloReact,HelloJavaScript!千里之行，始于足下。——老子最近体验了一下著名的前端框架React，用起来特别爽，个人很喜欢。所以准备花一点点时间深入学习一下React。在这里把学习得过程也顺便记录下来。要学习React的话，先了解一下JavaScript的基础知识是非常有帮助的。JavaScript也是是目前非常火的编程语言，在有了Node.js以后，JS终于可以从前端到后
W1nt3rs·2022-02-21 10:15

React学习笔记3-State Hook

StateHook吾生也有涯，而知也无涯。——庄子接着学习一下React的StateHook。通过Statehook，可以直接通过function来构建有状态的组件，只要引入useState方法即可。写了一个小例子，包含一个输入和列表，分别通过两个function实现。输入的数据通过一个列表展示：importReact,{useState}from'react';functionInput({ad
W1nt3rs·2022-02-21 10:15

Typescript+React学习笔记（二）- hook相关内容

1.npx的作用避免安装全局模块可直接调用项目内部安装的模块比如模块mocha，如果用npminstallmocha仅安装在局部的话，在命令行中输入mocha--version会显示找不到命令的（当然，也可以先在命令行中，手动指定目录来找到，如node_modules/.bin/mocha--version），这时可以用npxmocha--version在全局使用该命令2.函数组件的类型描述imp
德云社唠前端·2022-02-21 10:45

react学习笔记--生命周期+实例

react学习笔记–生命周期+实例下面是一张生命周期图具体使用会在实例中介绍到组件的三个生命周期状态:Mount：插入真实DOMUpdate：被重新渲染Unmount：被移出真实DOMReact为每个状态都提供了勾子
家里有只猪·2022-02-21 10:14

React学习笔记---React路由（v5带部分v6）

React路由一、SPA的理解二、路由的理解三、react-router-dom1、理解2、相关API四、路由的基本使用五、NavLink的使用（v5和v6有区别）六、对NavLink二次封装七、Switch的使用(v6已经移除switch，替换为Routes）八、解决多级路径刷新页面样式丢失的问题九、路由的严格匹配与模糊匹配十、Redirect的使用（v6版本已经废除，用Navigate代替）十
丑小鸭变黑天鹅·2022-02-21 10:42

react学习笔记---扩展知识

扩展知识一、setState二、lazyLoad三、Hooks1.ReactHook/Hooks是什么?2.三个常用的Hook3.StateHook4.EffectHook5.RefHook6、示例四、Fragment五、Context理解使用注意示例六、组件优化Component的2个问题效率高的做法原因解决示例七、renderprops如何向组件内部动态传入带内容的结构(标签)?childre
丑小鸭变黑天鹅·2022-02-21 10:42

react学习笔记之hook

摘自官网：入口目录：Hook简介Hook概览使用StateHook使用EffectHookHook规则自定义HookHookAPI索引HooksFAQHook简介Hook是React16.8的新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性。importReact,{useState}from'react';functionExample(){//声明一个新的叫
浩星·2022-02-21 10:12

React学习笔记（八）--- HooK

一、简介在之前的学习中，我们了解到只有类组件中才能使用state，函数组件是无法使用的。但Hook的出现，改变这种情况，Hook是React16.8版本的新增特性，可以让我们在函数组件中使用state、生命周期以及refs、context等其他相关特性。而且Hook可以让我们在不更改组件结构的前提下复用状态逻辑，使得在组件间共享Hook变得十分便利。简单来说，Hook就是一些React中封装好的s
努力的小朱同学·2022-02-21 10:32

React学习笔记(三）

React中的ref的使用ref是一个引用，在React中使用ref来直接获取DOM元素从而操作DOMReact生命周期函数声明周期函数生命周期函数应用场景当父组件的render函数被调用时，子组件的render函数也会被调用，但是此时子组件并不需要更新，因此这样是对性能的损耗解决方式：使用声明周期函数shouldComponentUpdate(nextProps,nextState)来解决Rea
滨滨_57b5·2022-02-20 09:22

react学习第一天笔记

webpack运行项目知识项目初始化gitinit：将本地文件夹变成git可以管理的仓库；开发过程中，要通过git工作流，把项目传到远程的github上去；git工作流npminit--y:包管理器项目初始化创建package.json文件；配置文件分析.babel:用来配置babel;babel的主要作用是用来编译；把不支持的语言，编译成支持的语言；要使用babel:必须下载工具：babel-c
果木山·2022-02-20 03:00

07-1.React学习笔记.React脚手架介绍

一.脚手架初衷##目录结构划分文件之间相互依赖如何管理第三方模块的依赖项目发布前如何压缩，打包项目CSS可能是less，sass等预处理器进行编写，需要先转成普通cssjs代码通过模块化方式被组在成百上千文件中很多第三方库的依赖，如何更好管理他们（依赖&版本升级）二.什么是脚手架##类似于建筑学中，搭建房屋前临时搭建出来的一个框架。让项目从搭建到开发，再到部署，整个流程变得快速便捷。三大脚手架：v
_生生不息_·2022-02-17 14:26

52.React学习笔记.自定义hook

自定义Hook本质上只是一种函数代码逻辑的抽取，严格意义上来说，它本身并不算React的特性。举个例子：需求：所有的组件在创建和销毁时都进行打印；组件被创建：打印，组件被创建了；组件被销毁：打印，组件被销毁了；分析：如果对每个组件都搞一个useEffect来控制，未免也太繁琐了；这时候我们需要对复用的代码逻辑进行抽取。注意：在普通function中不能使用hooks；这时候，我们自定义hook名称
_生生不息_·2022-02-14 04:48

react学习笔录（二）

一、组件通信//props通信（适用于父子组件传递）classAppextendsReact.Component{render(){return({this.props.name});}}ReactDOM.render(,document.getElementById('root'));第三方库（下载pubsub-js）https://github.com/mroderick/PubSubJS//
2a7bcf784de5·2022-02-13 19:22

React学习笔记二

React可以直接下载使用，下载包中也提供了很多学习的实例。使用React的版本为16.4.0，可以在官网https://reactjs.org/下载最新版。使用create-react-app快速构建React开发环境create-react-app是来自于Facebook，通过该命令我们无需配置就能快速构建React开发环境。create-react-app自动创建的项目是基于Webpack+
mathfriend·2022-02-13 12:19

React学习笔记（二）[组件及它的state与props]

React其中一个重要思想就是"react内一切皆组件"，一个好的应用应该有一定的原则来划分组件。我们划分组件的时候应该尽量保持一个组件只做一件事。每个小组件只关注实现单个功能，组合起来也能实现复杂的实际需求。虽然组件都是独立个体，但不同组件之间总会有通信交流。我们划分组件要满足“高内聚，低耦合”的原则。高内聚---将逻辑紧密相关的内容放在一个组件内。低耦合---不同组件之间的依赖关系要尽量弱化。
朱珠霞·2022-02-10 13:21

React学习——井字游戏（官网教程笔记）

一、安装node可以通过官网下载稳定版本并执行安装；或者通过nvm安装你需要的node版本(可以对node版本进行管理，比较推荐)。二、创建新项目打开命令终端；进入你要存放项目的路径；创建react项目"tic-tac-toe"(项目名称):npxcreate-react-apptic-tac-toe进入项目"tic-tac-toe"：cdtic-tac-toe运行项目：runstart浏览器访问
水螅洋洋·2022-02-06 15:18

react学习笔记-过渡动画（5）

4-11、React中实现css过渡动画handleToggle(){this.setState({show:this.state.show?false:true})}helloworldtogglestyle.css.show{opacity:1;transition:all1sease-in;}.hide{opacity:0;transition:all1sease-in;}4-12、Reac
wayne1125·2022-02-04 19:47

超硬核 Web 前端学霸笔记，学完就去找工作！

文章和教程Vue学习笔记Node学习笔记React学习笔记Angular学习笔记RequireJS学习笔记Webpack学习笔记Gulp学习笔记Python学习笔记Egret引擎学习笔记流处理，TCP和
·2022-01-10 08:35

ApacheCN NodeJS 译文集 20211204 更新

ReactTypeScriptNode全栈开发零、序言第一部分：理解TypeScript及其如何改进JavaScript一、理解TypeScript二、探索TypeScript三、使用ES6+特性构建更好的应用第二部分：使用React
·2021-12-08 21:57

超硬核 Web 前端学霸笔记，学完就去找工作！

文章和教程Vue学习笔记Node学习笔记React学习笔记Angular学习笔记RequireJS学习笔记Webpack学习笔记Gulp学习笔记Python学习笔记Egret引擎学习笔记流处理，TCP和
·2021-11-29 08:50

入门React学习——01

一、React是什么正常视图流程：1.发送请求获取数据2.处理数据（过滤、整理格式等）3.操纵DOM呈现页面[react只负责这部分]React是一个将数据渲染为HTML视图的开源JavaScript二、谁开发的由Facebook开发，且开源。1.起初由Facebook的软件工程师JordanWalke创建。2.于2011年部署Facebook的newsfeed。3.随后在2012年部署于Inst
·2021-11-18 12:13

react学习

react框架库react-router路由pubsub消息管理redux状态管理ant-designUI库要点jsx最后翻译过来就是React.createElement方法createElement(element,options,content)elment元素名称options属性对象content属性里面的内容demo:createElement('h1',{id:'test'},'he
·2021-11-02 11:45

freeCodeCamp--React学习笔记

目录1渲染HTML元素为DOM树2了解JSX的自动闭合3创建组件3.1JS函数创建组件----无状态组件3.2class创建组件3.3用组合的方式创建一个React组件3.4创建一个有状态的组件3.4.1用this.setState设置状态3.4.2将this绑定到Class方法上3.4.3使用State切换元素4将class组件渲染到DOM树5传参5.1将Props传递给无状态函数组件5.2传递
Lily的秋天·2021-10-28 17:00

React学习笔记 -- 组件通信之路由传参（react-router-dom）

最近在学习react，现在的工作中使用的是vue，在学习的过程中对两者进行比较，加深理解。以下是react中的一小部分知识点，我个人觉得也是比较常用的知识点，react组件通信的其中一种方式--路由传参（react组件通信的方式有多种，如props、事件回调、context、router、redux、缓存等等）。现在单页面SPA应用的比较广泛，在不刷新整个页面进行部分页面的跳转，使用路由跳转便在所
前端不释卷leo·2021-10-24 13:30

新手入门react，学习引导

React学习文档作者：Sunny一、学习轴1、阅读react官网文档阅读顺序：核心概念hooksAPIreference高级指引边学边练，跟着官网文档里面的例子创建一个react项目首先全局安装npminstall-gcreate-react-app
·2021-10-10 17:32

React学习笔记——组件间通信

适用于刚开始接触react直接上手的同学，建议还是打好JS和ES6基础。基础父传子子传父兄弟组件传递进阶（待完成）不太相关组件之间传递reduxrefcontextobserverpattern全局变量基础内容（1）父传子：可以通过props将父组件数据传给子组件functionParent(){return()}functionChild(props){return{props.name}}Re
·2021-09-15 10:01

React学习笔记之Hooks

1.useStatestate只在组件首次渲染的时候被创建useStateHook:允许我们在函数组件中存储内部state。const[fruit,setFruit]=useState('banana');//结构语法2.useEffectuseEffectHook可看做componentDidMount，componentDidUpdate和componentWillUnmount这三个函数的组
·2021-09-15 10:29

React学习--发送请求的方式(axios与fetch)

前端项目发送请求的方式（1）jQuery—$.get容易回调地狱（2）axios----axios.getPromise风格以上俩种需要xhr，没有xhr就不能发，本质上是ajax请求（3）fetch：系统自带的，直接发送，不需要xhr，也是Promise风格axios发送请求search=async()=>{const{value}=this.keyWordNode//http://api.gi
Recyclable brother·2021-09-01 21:07

React学习笔记——状态管理工具redux的基础介绍和使用（从基础概念到具体使用，全网最全）

1、前言聊起React，就不得不提redux，虽然并不是每个项目中必须使用redux，但是作为一个新生代农民工（国家认证），必须对相关概念了解，这样使用的时候才能立马上手，最近的项目中我们没怎么使用redux，为了防止遗忘，就琢磨写下一些学习心得，做到温故知新。2、传统MVC框架先看张图MVC的全名是ModelViewController，是模型(model)－视图(view)－控制器(contr
前端老Chen先生·2021-08-31 17:36

React学习笔记——Hooks中useStore、useDispatch和useSelector的基础介绍和使用,以及两者替代connect

在React的世界中，有容器组件和UI组件之分，在ReactHooks出现之前，UI组件我们可以使用函数，无状态组件来展示UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给UI组件进行渲染。使用ReactHooks相比于从前的类组件有以下几点好处：代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，
前端老Chen先生·2021-08-24 11:28

【React】React学习笔记三：React 请求处理

学习视频链接一、理解1.常用的ajax请求库（1）jQuery:比较重,如果需要另外引入不建议使用（2）axios:轻量级,建议使用-封装XmlHttpRequest对象的ajax-promise风格-可以用在浏览器端和node服务器端2.axioshttps://github.com/axios/axiosGET请求axios.get('/user?ID=12345').then(functio
enchantedovo·2021-08-12 18:17

「HearLing」React学习之路-redux、react-redux

前言这篇文章零基础也可以看，我尽量写得简单易懂了，如果觉得理解起来有点费力，也可以先去官网入门。目前我还只是初学React，只能算入门，如果有哪里说的不对的，欢迎评论区指正，万分感激～一、Redux因何产生？首先说它为什么出现1.趋势所致：JavaScript单页应用开发日趋复杂，「JavaScript需要管理比任何时候都要多的state（状态）。」2.管理不断变化的state非常困难：如果一个m
frontend_frank·2021-08-03 08:00

React学习笔记

1：在React中有一个命名规范，通常会将代表事件的监听prop命名为on[Event]将处理事件的监听方法命名为handle[Event]这样的格式2：ReactDOM使用camelCase小驼峰命名来定义属性的名称，例如，JSX里的class变成了className，而tabindex则变为tabIndex。3：ReactDom会将元素和他的子元素与他们之前的状态进行比较，只更新他需要更新的部
·2021-07-28 15:58

React学习笔记——Hooks中useState的基础介绍和使用

在React的世界中，有容器组件和UI组件之分，在ReactHooks出现之前，UI组件我们可以使用函数，无状态组件来展示UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给UI组件进行渲染。使用ReactHooks相比于从前的类组件有以下几点好处：代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，
前端老Chen先生·2021-07-14 16:04

react学习

学习react路径：https://jspang.com/posts/2019/05/04/new-react-base.html#%E7%AC%AC01%E8%8A%82%EF%BC%9Areact%E8%AF%BE%E7%A8%8B%E5%89%8D%E8%A8%80记录一下学习的内容：一、react的三大体系：1、reactJs用于web开发和组件的编写2、reactNative用于移动端的
胖婶·2021-06-26 20:00

2019-04-02/react学习笔记-1

1.受控组件vs非受控组件受控组件（表单数据由React组件处理。=>onChange的事件处理器）非受控组件(让表单数据由DOM处理时===使用ref从DOM获取表单值，为非受控组件)区别受控组件的状态由开发者维护，非受控组件的状态由组件自身维护（不受开发者控制）2.生命周期image.pngStarts=>**componentWillMount()=>render()=>componentD
阿九_beta·2021-06-26 17:19

react学习第二天笔记

箭头函数箭头函数基础知识varfn=()=>333;执行函数fn()的结果是333;varfn=(n,m)=>n+m;执行函数fn(2,3)的结果是5;varfn=(n,m)=>(n+m);执行函数fn(2,3)的结果是5；varfn=(n,m)=>{n+m};执行函数fn(2,3)的结果是undefined;因为大括号内没有设置return返回值；varfn=(n,m)=>{returnn+m}
果木山·2021-06-24 16:24

react学习资料九-reflux

RefluxReflux,flux,redux都是处理React数据层面的一个框架（插件、库），定义了action,store来传递数据的;作用都一样，唯一的不同是提供的api不同，因此会使用一个，其他都会了；项目实例React项目目录结构：css目录，是网站样式目录bootstrap.css框架index.less页面样式data目录，模拟异步请求的假数据fonts目录，里面的文件是bootst
九泰修行·2021-06-14 11:15

React学习篇-JSX（手写一个JSX的插件）

学习和阅读vue源码有段时间了，最近在尝试去学习react，由于眼前项目使用不上react，并不想一股脑的学习它的API（长时间不用还是会忘），所以此次的学习过程打算换种方式，对于react涉及到的每个点尝试逐个深入，了解其解析过程及整个框架的思路。对于每个点的学习和深入，将以文章的形式产出，主要是对于学习的内容的记录（所以看来内容有点多），方便自己以后是用时查阅和回顾。从demo开始在此之前，曾
小鱼儿_61f5·2021-06-07 18:50

react学习第四天笔记之简历项目

项目架构src文件夹：开发时的源代码assets：静态资源文件夹；fonts：引入的icon字体图标文件；css,js等静态资源文件containers:容器型组件AboutContactHomeProjectSkilllayouts:布局APP：总布局index.js:总布局文件，用于设置页面的总布局结构；index.css：用于设置自己的css样式；Menu:导航栏布局index.js:导航栏
果木山·2021-06-07 10:11

React学习笔记四

React使用JSX来替代常规的JavaScript。JSX是一个看起来很像XML的JavaScript语法扩展。我们不需要一定使用JSX，但它有以下优点：JSX执行更快，因为它在编译为JavaScript代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。使用JSX编写模板更加简单快速。先看下以下代码：constelement=Hello,world!;这种看起来可能有些奇怪的标签语法既
mathfriend·2021-06-05 03:33

react学习：react-router路由

如果你都有了答案，可以忽略本文章，或去react学习地图寻找更多答案简单使用第一步：安装react-router-domyarnaddreact-router-dom第二步：从react-router-dom
大神乔伊·2021-05-28 21:13
上一页 3 4 5 6 7 8 9 10 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他