react
予倾
这个作者很懒,什么都没留下…
展开
-
vite + react 基本项目搭建
在上面我们已经集成好了我们代码校验工具,但是需要每次手动的去执行命令才会格式化我们的代码。如果有人没有格式化就提交了远程仓库中,那这个规范就没什么用。要做到这件事情,就需要利用husky在代码提交之前触发git hook(git在客户端的钩子),然后执行。团队开发项目的时候,需要统一包管理器工具,因为不同包管理器工具下载同一个依赖,可能版本不一样,导致项目出现bug问题,因此包管理器工具需要统一管理!如果存在index.css,建议删除该文件以及文件引入。来自动的格式化我们的代码。文件,添加下面的内容。原创 2023-09-24 13:11:17 · 703 阅读 · 0 评论 -
React从零开始搭建项目
const {override , fixBabelImports } = require('customize-cra') module . exports = override(// 针对antd实现按需打包:根据import进行打包(使用babel-plugin-import) fixBabelImports('import' , {libraryName : 'antd' , libraryDirectory : 'es' , style : 'css' // 自动打包相关的样式 }))原创 2022-09-03 16:39:12 · 423 阅读 · 0 评论 -
react类式组件与函数式组件
react类式组件与函数式组件原创 2022-06-17 09:12:05 · 134 阅读 · 0 评论 -
类相关的知识
总结:1.类中的构造器不是必须写的,要对实例进行一些初始化的操作,如添加指定属性时才写。2.如果A类继承了B类,且A类中写了构造器,那么A类构造器中的super是必须要调用的,并且写在第一行调用。3.类中所定义的方法,都是放在了类的原型对象上,供实例去使用...原创 2022-06-16 22:18:05 · 98 阅读 · 0 评论 -
react基础
1、表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方下面这些都是表达式:2、语句(代码):下面这些都是语句(代码):原创 2022-06-16 19:25:53 · 119 阅读 · 0 评论 -
react解决跨域
let { createProxyMiddleware } = require("http-proxy-middleware")module.exports = function(app){ app.use( createProxyMiddleware("/api",{ target: 'http://localhost:5000', changeOrigin: true }) )}原创 2021-01-20 14:50:43 · 116 阅读 · 0 评论 -
React HOOK2
React HOOK规则:Hook只能出现在最顶层不要在循环,条件或者嵌套函数中调用hookPureComponet和memoPureComponet用法:memo用法userCallbackuseReduceruseContextReact Hooks 不足尽管我们通过上面的例子看到 React Hooks 的强大之处,似乎类组件完全都可以使用 React Hooks 重写。但是当下 v16.8 的版本中,还无法实现 getSnapshotBeforeUpdate 和原创 2021-01-19 13:55:56 · 121 阅读 · 0 评论 -
React HOOK1
高阶组件本质是一个函数,接收一个组件,返回一个新组件类组件中也可以写状态和更新状态的方法HOOKS写法:1、useState2、class式组件实现效果3、useEffect(实现效果如上图)4、useEffect的第二个参数5、从DOM中卸载组件ReactDOM.unmountComponentAtNode()6、发起ajax请求...原创 2021-01-18 21:25:55 · 108 阅读 · 10 评论 -
react的生命周期函数
1.constructor(props)React组件的构造函数在挂载之前被调用。在实现React.Component构造函数时,需要先在添加其他内容前,调用super(props),用来将父组件传来的props绑定到这个类中,使用this.props将会得到。官方建议不要在constructor引入任何具有副作用和订阅功能的代码,这些应当使用componentDidMount()。constructor中应当做些初始化的动作,如:初始化state,将事件处理函数绑定到类实例上,但也不要使用se...原创 2021-01-18 19:57:34 · 226 阅读 · 0 评论 -
context
01-Context的基本使用创建一个上下文(js文件):import React from "react"const MyContext = React.createContext({ name:"wc"//共享数据});export default MyContext;使用:import React, { Component } from 'react'//先导入import MyContext from "./MyContext"export default cla原创 2021-01-15 18:01:02 · 159 阅读 · 0 评论 -
refs and the dom
ref的使用:ref使用方式一: 已废弃了<input type="text" ref="item" />获取DOM元素:this.refs.item.valueimport React, { Component } from 'react'export default class App extends Component { constructor() { super(); this.state = { } }原创 2021-01-11 14:31:30 · 113 阅读 · 0 评论 -
react-redux的使用
react-redux:这是一个独立的模块,这个模块,可以让我们非常方便的在react中使用redux安装:npm i react-redux在react-redux中提供了两个东西:Provider组件:可以给所有的组件提供仓库。connect方法:可以把方法和状态映射到组件的属性上。在页面级组件(counter)中import { connect } from "react-redux" 使用:在入口(index.js)引入import { Provider } from "r原创 2021-01-08 15:37:13 · 226 阅读 · 1 评论 -
Redux如何处理异步action
action分类1)同步action本质就是一个JS对象 这个对象中必须要包含一个属性叫type{type:“INCREMENT”}刚才写的加1减1案例,派发的都是同步action。2)异步action本质是一个函数,redux默认是处理不了异步action异步action中第1个参数叫dispatch,第2个参数是getState在异步action中就可以写异步代码在异步代码,还需要派发一个同步的action// 使用action creator创建一个异步actionexport原创 2021-01-08 15:01:05 · 1331 阅读 · 1 评论 -
Redux小结
redux中的核心是store:1)store中的初始化状态是如何创建的?答:通过reducer创建 createStore中调用了dispatch({}),dispatch内部调用了reducer。reducer内部需要返回一个初始化状态。2)在一个组件上,如何获取仓库中的状态?答:通过store.getState获取仓库中的状态。3)如何产生一个action?答:用户的行为会产生action 需要dispath这个action,为了传了,我们通常使用action creator4)仓库原创 2021-01-08 14:18:23 · 74 阅读 · 0 评论 -
redux详细介绍
基本概念:1)redux中的核心中store,store中的放有state,单一数据源,状态只能来源于仓库。2)state是只读的,你只能获取状态,你不能暴力地去修改仓库中的状态3)store state reducer action4)dispatch subscrbe getState 创建仓库: <script src="./js/redux.js"></script> 相当于在页面中引入Redux。 在Redux这个对象上,有一原创 2021-01-07 14:14:34 · 360 阅读 · 0 评论 -
react仓库
定义一个仓库并且使用: const createStore = (state, changeState)=>{ return { // 返回的对象就可以称为一个仓库 } } // 使用之 let store = createStore(); // 创建一个仓库获取并且初始化状态: const createStore = (state, changeState)=>{ c原创 2021-01-06 19:48:54 · 480 阅读 · 0 评论 -
react的路由
react中的路由:react-router React中的路由的核心模块react-router-dom React中的路由在浏览器端使用的模块 react-router-dom里面包含了react-routerreact-router-native 在RN时,使用的路由模块 React-Native用来做原生APP安装:npm i react-router-dom -S是一个第三方的模块,不是react官方提供的。参考网站:https://reactrouter.com/web原创 2021-01-06 14:21:12 · 169 阅读 · 0 评论 -
react中的事件处理
DOM中的事件绑定有三种方式:方式1:DOM0级别的事件绑定 <body> <button id="btn">点我</button> <script> // DOM0级别的事件绑定 let btn = document.getElementById("btn"); btn.onclick = function(){ console原创 2021-01-04 21:46:09 · 118 阅读 · 1 评论 -
react脚手架的基本使用
创建项目的方式:方式一:安装react脚手架:npm i create-react-app -g 全局安装创建一个react项目:create-react-app myapp myapp是项目的名字方式二:如果不想全局安装create-react-app,那么可以使用npxnpx create-react-app myapp使用脚手架创建的项目,默认有这几个库:1)react raect顶级库(核心库)2)react-dom react代码要在web上运行,就需要使用reac原创 2021-01-04 21:17:55 · 460 阅读 · 0 评论 -
react的基本使用
react的基本使用:1)下载react.js,并引用react.js。2)还需要引入react-dom.js3)通过React.createElement创建虚拟DOM4)把虚拟DOM挂载到真实的DOM上js压缩包链接:链接: https://pan.baidu.com/s/1bOug2U1rxNPLFnR6EgDBEA 提取码: 43ij创建虚拟元素(虚拟DOM)的两种方式:1)React.createElement 现在基本上不用<div id="app"></原创 2021-01-04 14:01:15 · 160 阅读 · 0 评论