React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。
react创建项目报错errorF:\专班\react\beijing-normal-university\node_modules\core-js:Commandfailed.Exitcode:1Command:node-e"try{require('./postinstall')}catch(e){}"Arguments:Directory:F:\专班\react\beijing-normal-university\
做的小案例下方的加粗字是Conitem主键,leftform组件是加粗字上方主要实现在Conitem中点击+1,和显示leftform点击提交后的内容redux其实还是不去说太详细我的项目了,直接点就是说当action的type是相同的时候会报错
1.父传子//父组件向子组件传值,通过props,将父组件的state传递给了子组件。/**父组件*/exportdefaultclassParentextendsComponent{constructor(props){super(props)this.state={message:"中秋节快乐呀"}}render(){return(
虚拟DOM和真实DOM关于虚拟DOM1.本质是Object类型的对象(一般对象)2.虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部再用,无需真实DOM上那么多的属性。3.虚拟DOM最终会被React转化为真实DOM,呈现在页面上
项目采用electron跟react项目开发目前最烦的事情就是,一个命令框需要启动react一个则需要启动electron。能不能将两个命令进行合并呢?答案是:能!!!怎么做呢?首先,我们需要新增一个插件concurrently使用命令 npminstallconcurrently--save-dev进行安装其次,我们需要修改pac
1.virtualDOM传统页面开发模式中,都是对真实的dom进行操作,耗费大量的性能。而react将真实dom树转换成虚拟dom,每一次更新都与原来的虚拟dom进行diff比对来进行更新,对于改变的部分来进行批量更新,节约了性能。通过虚拟dom转换成真实dom,方便和其他平台的集成,react组件可以映射为对
目录一、生命周期一、生命周期函数组件无生命周期,生命周期只有类组件才拥有 。生命周期函数指在某一时刻组件会自动调用并执行的函数。React每个类组件都包含生命周期方法,以便于在运行过程中特定的阶段执行这些方法。例如:我们希望在第一次将其呈现到DOM时设置一
//子组件letComponent=(props)=>{const{refInstance}=props;//只要是实例都行useForm和useRef创建的都可以const[form]=Form.useForm();useImperativeHandle(refInstance,()=>({submit:()=>{form.submit();}
关于react_antd_desgin的学习这两天也是获取到的知识零零散散,大多在网上也能获取的到,所以隔了很长的时间,没有编写关于react相关的文章。今天之所以写也是因为公司中秋节放假,在郑州,窗外的秋雨淅淅沥沥,再加上一点带有凉意的秋风,打消了外出的念头。在家也是无所事事,,,好了,言归正传
由于此时的history需要父组件提供,因此在调用子组件时,父组件需进行传参:<FlexBarnavs={navs}history={this.props.history}/>同时子组件通过props.history.push(path)即可实现跳转:<FlexclassName="nav">{props.navs.map(item=>(<Flex.Itemkey
react中异步action的使用      Count组件  效果图: 
Example4.jsximportReact,{useState,createContext,useContext}from'react'constCountContext=createContext();functionCounter(){letcount=useContext(CountContext)return(<h2>{count}</h2>)}fun
react中编程式路由 详情页    
在最新版的antd中,.ant-table-pagination**是flex,.ant-table-pagination-right**设置的justify-content:flex-end,所以分页默认在右边展示,如下:我们想要分页居中,首先要把flex给成display:block;然后在给.ant-table-pagination-right设置居中text-align:center;上代
一、引入antd产生的黄色报错Youareusingawholepackageofantd-mobile,pleaseusehttps://www.npmjs.com/package/babel-plugin-importtoreduceappbundlesize.原因是antd希望按需引入,但以import { TabBar } from "antd-mobile";形式引入时实际上会在底层将所
React中路由基本&高级使用 一、基本使用下载路由插件react-router-domnpminstallreact-router-dom 路由前言:在原生的html中,靠<a/>跳转不同的页面在React中靠路由链接实现切换组件 react-router-dom的理解react-router给web开发人员、native原生开发人员
1.创建storeimport { createStore } from 'redux';import reducers from '..educers/index';export default createStore(reducers);2.reducer(接受state和action并返回新的state) import { combineReducers } from "redux";import { tod
1,store保存数据的地方,管理全局的状态import{createStore}from'redux';conststore=createStore(reducter);store.getState();store.dispatch(action);store.subscribe(liatener);2,stateconststate=store.getState();一个state对应一个view所有的state都以一个对
React数据共享插件-PubSub 下载pubsub-js插件npminstallpubsub-js  如果要修改一个变量值的话PubSub.publish('state',{isLoading:true})  如果有人修改了这个变量,就触发下面的回调函数PubSub.subscribe('state',(msg,stateObj)=>{this.setState
引言基于该文仿写:web完整轮播图——带只拖鞋去流浪https://zhuanlan.zhihu.com/p/138232728组件源码:https://gitee.com/leftstanotation.git组件效果:https://www.jianguoyun.com/p/Dd81zscQzLDdCRiKuo4E   创建项目创建一个umi2.x的项目选择项目类型为app,不使用t
React简介一、react是什么是用于构建用户界面的JavaScript库是一个将数据渲染为HTml视图的开源JavaScript库二、react开发者国外FaceBook开发,并且开源近十年正在被腾讯阿里等一线大厂广泛使用三、学React原因原生JS命令式编码操作DOM繁琐、效率低,比如说:js的docu
整理了一些待学习的前端技术1、大屏技术,没有实际经历2、flutter,想学习,但没有机会3、node.js后台开发,没有实际机会4、chrome浏览器插件,没有实际开发5、vscode插件开发,没有实际机会6、npm包开发,没有实际的包7、vue3没有实际开发,8、reacthook,在知否项目里用了,但不多,说不出个
importReactfrom'react'importaxiosfrom'axios'import*asechartsfrom'echarts';import'../css/EchartsTest.css'exportdefaultclassEchartsTestextendsReact.Component{ constructor(){ super()
基本操作#★★★前提条件(可以运行create-react-app和yarn)★★★#创建项目(后面的操作记住进入项目根目录)create-react-app项目名--templatetypescript#添加antd和axiosyarnaddantd@3.22.0axios@0.21.1#配置mobx(在TS中使用注解需要根据提示配置)#安
一、如何批量更新在【Hooks】中如果单独的进行状态的更新可能会导致页面的多次渲染:import{useState}from'react';import{unstable_batchedUpdates}from'react-dom';//批量更新状态时使用importReactfrom'react';constExample=()=>{const[count,s
记录一下react-router的学习1:安装react-routercnpminstallreact-router-dom--save2:定义一个AppRouter.js,导入需要的包importReactfrom'react';import{BrowserRouterasRouter,Route,Link}from'react-router-dom';3:定义组件//首页functionIndex(){r
React组件通信1.父子组件通信1.1父传子采用props的格式1.2子传父2.兄弟组件通信3.祖孙组件传值总结搭配方式1.父子组件通信1.1父传子采用props的格式父组件中exportdefaultclassFatherextendsComponent{ //数据状态 state={todos:[ {id:'001'
React中代理的配置主要是解决同源策略的问题何为同源策略?因为我们React在3000端口,Vue在8080端口,而后台接口往往在5000,这种不同的端口之间就是一种跨域的问题了axios发送跨域请求的时候,实际上是有访问后台,并且从后台拿到了数据,只是这些数据回不了,因为ajax疫情拦截了 
自己学习途中的笔记,如果你发现有误,欢迎指正
React(用于构建用户界面的JavaScript库)React是一个将数据渲染为HTML视图的开源JavaScript库。React的特点:采用组件化开发模式,使用声明式编程,而不是命令式编程,提高了开发效率以及组件的复用率。在ReactNative中可以使用React进行移动端Android和ios应用的开发。使用虚