react学习
【注意】 1、创建的组件名称首字母必须大写 2、为元素添加css的class时，要用className 3、组件的style属性的设置方式，要写成style = {{width: this.state.width}}一、state（组件的状态） state表示组件的状态，当一个状态发生变化时，会重新出发render函数。注意，请将state和props区分开，比较好...
2024-01-10
react笔记
render渲染两次，利用axios请求返回的数据，是异步方法，而第一次render渲染时候会因为没有参数而报错，对于对象数组时候使用。在使用dva中的model定义全局变量要在@connect上面；this.setState是一个异步方法，如果需要让其同步执行可以调用回调函数。timeFrom = (data) =>{ console.log(data.format()); th...
2024-01-10
react传值
1.react父传子通过props传值 ，props是只读；父组件；子组件；2.子传父子组件；父组件；ref属性通过refs 来得到dom节点this.refs.名称得到是dom这个节点this.refs.名称.value;老的字符串形式的方法，在严格模式下会报警告错误，解决方案，推荐使用refs的新方式删除React,StrictMode作者：简简单单_aed2 链接...
2024-01-10
认识react
重点：react由两部分组成：1、react.js：是React的核心库2、react-dom.js：提供与DOM相关的功能，会在windows下增加ReactDom属性，内部比较重要的方法是render,将react元素或者react组件插入到页面中...
2024-01-10
react初体验
Microsoft Windows [版本 6.1.7601]版权所有 (c) 2009 Microsoft Corporation。保留所有权利。D:\WebstormProjects\hello-react>create-react-app hello-worldCreating a new R...
2024-01-10
react常用命令
npm install -g create-react-appcreate-react-app my-appcd my-app/启动项目：npm start 安装依赖：npm install 编译：npm run build...
2024-01-10
react项目目录
yarn.lock项目文件依赖安装包的版本号package.json每个脚手架工具里面都有一个package.json文件，表示脚手架工具其实是一个node包工具，有一些项目介绍，依赖的包等gitgnore如果用git管理代码的话，有些文件不想传到git仓库的话，可以把这些文件定义到这里。...
2024-01-10
快速了解react
概况：通过本篇文章你可以对react的重点有个整体的认识。 关于react是什么，优点，解决什么问题等，网上一大推就不啰嗦了。 了解虚拟DOM的实现，参考这篇文章 [虚拟DOM](https://www.zhihu.com/question/29504639)简单讲，其实就是用一个轻量级的dom结构(用js模拟实现)，来模拟重量级的dom结构，通过比对轻量...
2024-01-10
react生成二维码
图片实例:简介： QRCode.js 是一个生成二维码的JS库。主要是通过获取 DOM 的节点,再通过 HTML5 Canvas 绘制而成,不依赖任何库。用法： 1. 在项目中引入qrcode.min.js文件。 js文件网盘地址: https://pan.baidu.com/s/1kHB90FpMAJUvGvDNPpMm7Q 提取码： hkz4 2. 创建ref节点： <div style={{ width, height }} ref={qrcodeRef}...
2024-01-10
mobx react
目录结构： Model/index.js'use strict';import { action, autorun, observable, computed } from "mobx";export default class TodoList { @observable todos = [{ title: "test", finished: true }]; @observable data = []; constructor(){ autorun(()=>{console.log...
2024-01-10
react学习(一)
组件和属性（props）函数式组件：function Welcome(props) { return <h1>Hello, {props.name}</h1>;}渲染一个组件：function Welcome(props) { return <h1>Hello, {props.name}</h1>;} //组件const element = <Welcome name="Sara" />;ReactDOM.render( element, document.getElementById('root'...
2024-01-10
react 源码资料
一、react 17 视频https://xiaochen1024.com/series/600a9a104bf83f002edaf53fhttps://xiaochen1024.com/article_pagehttps://xiaochen1024.com/article_page二、深入剖析 React Concurrent https://zhuanlan.zhihu.com/p/60307571 三、时间切片（Time Slicing）https://juejin.cn/post/68449038...
2024-01-10
react项目开发入门
在html头部引入react相关js文件<!-- react核心库--><script src="../static/react/react.production.min.js" charset="UTF-8"></script><!-- react dom相关功能--><script src="../static/react/react-dom.production.min.js" charset="UTF-8"></script><!-- jiangJSX语法转换为JavaScript语法--><scr...
2024-01-10
react常用模块介绍
react各个模块：1、node.js自带的模块(原生模块)：https://www.jianshu.com/p/abc72267abfc原生模块的api文档地址：http://nodejs.cn/api/怎么判断引用的模块是核心模块（自带）还是文件模块（npm另安装）？node 内核是提供了判断的方法的，比如你的例子的 crypto 模块// trueprocess.binding('natives').hasOwnProperty('crypto');// falseproc...
2024-01-10
react实现下载文件
downloadFile=(filePath, filename)=>{ axios.post(filePath, '', { headers: { 'Content-Type': 'application/x-www-form-urlencoded', //请求的数据类型为form data格式 }, 'responseType': 'blob' //设置响应的数据类型为一个包含二进制数据...
2024-01-10
react实现换肤功能
一.目标 提供几种主题色给用户选择，然后根据用户的选择改变应用的主题色；二.实现原理 1.准备不同主题色的样式文件； 2.将用户的选择记录在本地缓存中； 3.每次进入应用时，读取缓存，根据缓存的信息判断要加载哪个样式文件即可；三.具体实现思路1.准备四个对应不同主题色的样式...
2024-01-10
react项目创建流程
系统: windows1.安装 nodenode 下载地址.一路 next如果遇到 windows 没有权限安装 msi 文件.打开 cmd,运行msiexec /package 文件路径.查看是否安装成功,打开终端node -vnpm -v2.安装 vscode 编辑器vscode 下载地址.一路 next3.安装 react 项目脚手架打开终端npm install -g create-react-app4.创建 react 项目create-react-app myAppcd ...
2024-01-10
创建react失败经验
创建的项目失败Installing packages. This might take a couple of minutes.Installing react, react-dom, and react-scripts with cra-template...yarn add v1.13.0info No lockfile found.[1/4] ???? Resolving packages...warning react-scripts > workbox-webpack-plugin > work...
2024-01-10
react中常规删除功能
// 删除handleDeleteNiche = async () => {// 方法一：// let title = "删除";// let message = ( <div><p > 商机删除后列表将不可见此商机， 请谨慎操作！ </p> </div>);// let ret = await this.confirmModal(title, message);// ret && this.deleteNiche();// };// deleteNiche = async () => {// const ...
2024-01-10
react中key的作用
背景：如果为父节点添加多个相同的子节点时，不添加key属性，会报错但同时也会渲染出dom，渲染出dom其实是证明能从差异对象中渲染出真实dom，但报错的原因是因为这种写法会影响渲染的性能，不利于生层dom节点。作用：当我们生成两个不同的数组时，我们可以使用相同的 key 值：key的作用主要是...
2024-01-10
react的路由权限控制
在使用路由的时候，有的时候我们的界面只能够在登录之后才可以看的到，这个时候就需要使用路由权限控制了找了资料发现一个就是我使用的方法，一个是高阶组件。 原谅菜鸟看不太懂不会使用高阶组件…………首先在路由中做一个私有权限的限制，限制里面的path就是你的私有界面 router.js <Switc...
2024-01-10
对react 合成的理解
这是react事件机制系列文章的第二篇-对于合成的理解，今天咱们就来说说合成这个名词。刚听说合成这个词时候，感觉是特别高大上，很有深度，不是很好理解。当我大概的了解过react事件机制后，略微了解一些皮毛，我觉得合成不单单是事件的合成和处理，从广义上来说还包括： 首先就是对原生...
2024-01-10
react hook 练手
代码：App.jsimport React, { useState, useEffect, createContext, useContext, useRef } from 'react';import { Button } from 'antd-mobile';const Text = createContext(); // useContext 要和 createContext 一起使用export default function App() { const inputRef = useRef();...
2024-01-10
整理下react中常见的坑
其实有些也不能算是坑，有些是react的规定，或者是react的模式和平常的js处理的方式不同罢了1、setState()是异步的this.setState()会调用render方法，但并不会立即改变state的值，state是在render方法中赋值的。（这里我描述的不对，多谢评论区大神指点，setState只是将任务交给任务队列，本身没有执行任务）所...
2024-01-10
react技术栈实践（2）
本文来自网易云社区作者：汪洋这时候还没完，又有两个问题引出来了。 按照上面的配置，第三方库 antd 竟然也被编译了，导致样式失败。react中，一旦包裹了子组件，子组件没办法直接使用 styleName。第2个问题，还好解决，查了下 react-css-modules 资料，子组件中通过props获取 const template...
2024-01-10
