react conText Using API React.createContext returns a component object that can use the structure the first way Components wrapped with Provider can get the provider’s value Context. Consumer The function is used in the component. The function returns a component. The parameter of the function is the parameter initialized by Context the second way Wrap […]
Tag: React
React level linkage, city cascade selection, multi-level linkage components
Implement custom multi-level hierarchical components based on antd, mainly using react + antd + typescript to achieve specific content: Component display effect: data json format: [{<!– –> text: ‘Zhejiang Province’, value: ‘330000’, children: [{<!– –> text: ‘Hangzhou City’, value: ‘330100’, children: [{<!– –> text: ‘Uptown’, value: ‘330102’, }, {<!– –> text: ‘Downtown’, value: ‘330103’, }, […]
rollup packs react components
This time, the main simple implementation is to use rollup to package react components. For components, simply write a pop-up window component. The effect is as follows: Click to open the pop-up box, click the close button to close the pop-up box First create a react project, here is still created with mfex-project scaffolding mfex-project […]
WebGL carousel animation using React Three Fiber and GSAP
Reference: Building a WebGL Carousel with React Three Fiber and GSAP online demo github source code The effect is derived from the website alcre.co.kr created by Eum Ray. It is visually captivating and interactive, with a draggable or scrollable carousel and an interesting display of images. This article will use WebGL, React Three Fiber and […]
React-redux (functional components)
Next, a case of adding and subtracting numbers will be used to illustrate the use of React-redux Install library Install redux library, react-redux library, redux-thunk library yarn add redux yarn add react-redux yarn add redux-thunk Redux Definition: redux is a JS library dedicated to state management (not a react plugin library) The core is store […]
Haike List – Level 1 and Level 2 Permission Increase – react-mongoose-react-redux
//backend const mongoose = require(‘mongoose’) mongoose.set(‘strictQuery’,true) mongoose.connect(‘mongodb://127.0.0.1:27017/db_zg4yk’) conn=mongoose.connection conn.on(‘open’,()=>{<!– –> console.log(‘Database connection succeeded’) }) conn.on(‘error’,err=>{<!– –> console.log(‘Database connection failed’) }) module.exports=mongoose //model.js const mongoose = require(‘./db’) const Schema = mongoose.Schema const listScheam=new Schema({<!– –> name: String, form:Array, browse:Number, sort:Number, isshow: Boolean, date: Date, children: Array, },{<!– –>versionKey:false}) let listModel = mongoose. model(‘list’, listScheam, ‘list’) module.exports={<!– […]
Analysis of Linux network IO model (five) reactor model analysis and implementation method
reactor model analysis and implementation method Network Model for Highly Concurrent Network Programming Reactor Reactor Introduction and Composition Advantages of reactors Analysis of the implementation part of reactor Reactor related definitions Reactor part module introduction reactor initialization (multiplexer initialization) Event Registration (Registration of Handlers) Iterations of processing, event turn calls (dispatchers & triggers) Test Results […]
jianshu-react-mongoose/Addition and deletion of first-level authority and second-level authority
//backend //db.js const mongoose = require(‘mongoose’) mongoose.set(‘strictQuery’,true) mongoose.connect(‘mongodb://127.0.0.1:27017/db_jianshu’) conn=mongoose.connection conn.on(‘open’,()=>{<!– –> console.log(‘Database connection succeeded’) }) conn.on(‘error’,err=>{<!– –> console.log(‘Database connection failed’) }) module.exports=mongoose //model.js const mongoose = require(‘./db’) const Schema = mongoose.Schema const jianshuSchema=new Schema({<!– –> title: String, content: String, checked: Boolean, level:Number, pid:{<!– –> type:Schema.Types.ObjectId, ref:’jianshu’ } },{<!– –>versionKey:false}) let jianshuModel=mongoose.model(‘jianshu’,jianshuSchema,’jianshu’) // jianshuModel.create({<!– –> // […]
react+ts introduces Gaode map to realize search site selection
1. Introduce the mapUtils.ts file of AutoNavi js // make the map js API const gdApi = “https://webapi.amap.com/maps?v=2.0 & amp;key=Geocode key configured by yourself & amp;plugin=AMap.Geocoder”; export function initMap() {<!– –> return new Promise((resolve, reject) => {<!– –> loadScripts(gdApi, () => {<!– –> resolve(false); }); }); } export function loadScripts(srcArr: any, callback: any) {<!– –> […]
React, Vue file download progress bar
1. Demand scenario The download of large file resources on the server is too slow, the page does not display anything, and the experience is too poor. Therefore, it is necessary to increase the progress bar to optimize the display 2. Implementation principle Send an asynchronous HTTP request, listen to the onprogress event, read the […]