React
文章平均质量分 53
React学习
舜岳
不积跬步无以至千里 v: shunyue1321
展开
-
react 是怎么运行的?
react 是怎么运行的?import React from 'react';import ReactDOM from 'react-dom';const App = <div className="title" style={{color:'red'}}>hello world</div>console.log('App', App)ReactDOM.render( App, document.getElementById('root'));react原创 2021-12-21 09:01:02 · 3340 阅读 · 0 评论 -
husky无法工作 commit 提交代码时husky不生效解决方法
husky无法工作原因:新版本 husky 中存在严重错误。https://github.com/typicode/husky/issues/326解决方法:安装低版本即可yarn remove huskyyarn add husky@4.3.8 -D更好的使用 husky 安装 eslint 对应代码检测插件:"devDependencies": { "eslint-config-prettier": "^8.3.0", // prettier 配置 "eslint-lo原创 2021-05-25 14:03:48 · 11272 阅读 · 4 评论 -
手写一个react-redux,原理一目了然
react-redux的功能如下:Provider 为后代组件提供storeconnect 为组件提供数据和变更方法数据变化时自动更新组件了解react-redux的功能移步这里下面我们开始实现react-redux的几个功能://my-react-redux.jsimport React, {useContext, useReducer, useLayoutEffect} from "react";const Context = React.createContext(); //创建全原创 2020-11-14 18:52:37 · 348 阅读 · 0 评论 -
react-redux用法以及Hooks API的使用
Hooks APIuseReducer用法:useReducer是useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer,并返回当前的 state 以及与其配套的 dispatch 方法。例子:import React, {useReducer, useLayoutEffect, useEffect} from "react"import {counterReducer} from "../store"const init原创 2020-11-14 17:57:14 · 901 阅读 · 0 评论 -
redux 配置@connect()装饰器
package.json"dependencies": { "@babel/plugin-proposal-decorators": "^7.12.1", "@craco/craco": "^5.8.0", "craco-less": "^1.17.0",}"scripts": { "start": "craco start", "build": "craco build", "test": "craco test" },craco.config.jsconst Cra原创 2020-11-12 21:56:29 · 623 阅读 · 0 评论 -
深入浅出 redux中间件
redux中间件是什么?理解redux中间件首先我们需要理解redux是什么, Redux是JavaScript应⽤的状态容器。它保证程序⾏为⼀致性且易于测试。当业务足够复杂时,我们就需要使用redux来存储我们的多页面共同数据redux的使用范例://src/store/index.jsfunction countReducer(state = 0, action) { switch (action.type) { case "ADD": return state + (action.p原创 2020-11-04 00:03:52 · 324 阅读 · 0 评论 -
react useState自定义hook函数(管理多组件公共状态)
效果图如下:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="box"></div&g...原创 2019-12-29 18:11:55 · 1733 阅读 · 0 评论 -
react非受控组件useRef方法
效果图如下:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="box"></div&g...原创 2019-12-29 16:36:46 · 1077 阅读 · 0 评论 -
【React】 小白理解react-redux组件间通讯 一目了然
react-redux组件间通讯:某组件内请求到的数据 → 上传到组件数据存储仓库 → 某组件需要数据则导入组件仓库内的数据首先在根index.js安装redux-thunk通过引入的Reducers仓库方法创建总数据仓库store将仓库store通过Provider标签传入根组件src根index.js内容:引入的Reducers仓库内index.js:下面列举它里面的两个小...原创 2019-07-31 09:19:20 · 310 阅读 · 0 评论 -
【React】 20课 解决reactn内的redux异步执行函数报错方法
redux内异步函数执行如图所示:本项目的目录结构如下:redux内实现异步方法首先我们需要安装redux-thunk:cnpm install redux-thunk --save在创建数据仓库的过程我们通过compose方法与applyMiddleware中间件来解决异步函数问题const store = createStore( reducer, compose(...原创 2019-07-20 11:19:45 · 416 阅读 · 0 评论 -
【React】19课 react组件使用redux小案例
小案例效果入下:我们来看一下文件的目录结构:redux文件内的index.js文件代码:const add_Num = '增加一条数据';const remove_Num = '删除一条数据';/* state:数据原先的状态 action:需要来进行改造的内容 action.type 决定你要处理的类型 进行判断:if,swich*/ export ...原创 2019-07-19 12:11:53 · 402 阅读 · 0 评论 -
【React】 18课 简单理解redux
本章主要讲redux的js文件内的代码原理以及使用方法:简单理解redux是干什么的:其实redux与vuex类似,是用于redux内各组件间通讯的数据存储仓库首先我们来看以下文件目录结构:在此之前我们需要给React项目安装redux插件 命令如下:npm install redux --save重点:redux文件夹内index.js代码如下:import {creat...原创 2019-07-19 10:40:34 · 345 阅读 · 0 评论 -
【React】15课 react项目打包并运行
react项目的打包:在该项目文件夹中打开终端输入:npm run build //项目打包命令打包成功后文件夹中会多出一个 build 文件,该文件就是打包好的项目!react项目打包后的启动方法:我们如何启动该项目呢!首先我们全局安装live-server插件,live-server插件可以简单创建一个本地服务npm install -g live-server //全局...原创 2019-07-11 13:32:55 · 2504 阅读 · 1 评论 -
【React】 11课 react实现任务添加功能
react实现任务添加功能效果图如下:首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件npm init -ynpm i babel-standalone -Dnpm i react react-dom -D安装配置文件教程链接:https://blog.csdn.net/qq_41614928/article/details/93771657安装完成后我们开...原创 2019-06-30 10:17:25 · 648 阅读 · 0 评论 -
【React】 10课 react实现QQ聊天框效果
react实现QQ聊天框效果如下:首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件npm init -ynpm i babel-standalone -Dnpm i react react-dom -D安装配置文件教程链接:https://blog.csdn.net/qq_41614928/article/details/93771657安装完成后我们开始编写...原创 2019-06-30 10:14:21 · 1648 阅读 · 0 评论 -
【React】9课 react父子组件传参通讯
首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件npm init -ynpm i babel-standalone -Dnpm i react react-dom -D安装配置文件教程链接:https://blog.csdn.net/qq_41614928/article/details/93771657安装完成后我们开始编写下面代码react内父子组件传参通...原创 2019-06-29 15:34:46 · 169 阅读 · 0 评论 -
【React】1课 react框架小白入门使用教程
首先创建一个文件夹在文件夹中创建index.html文件之后使用VScode打开该文件夹→点击左下角的感叹号→打开终端VScode编辑器下载地址:https://code.visualstudio.com/1.安装配制文件cnpm/npm init -y //安装配制文件, 里面的"main": "index.js"是入口文件2.安装babel.jsnpm i babel-...原创 2019-06-26 20:14:06 · 2335 阅读 · 4 评论 -
【React】 12课 react的生命周期函数执行顺序详解
1. Mounting 初始化阶段(挂载阶段)执行的函数:①构造函数(里面存放this.state组件数据)constructor (props){ //props是父组件传过来的参数super(props);this.state = {}}②组件即将被挂载componentWillMount(){}③更新渲染render(){}④组件已经渲染完成了compo...原创 2019-07-03 11:25:27 · 1731 阅读 · 0 评论 -
【React】 2课 react代码中{}内的用法 三目、遍历等
首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件npm init -ynpm i babel-standalone -Dnpm i react react-dom -D安装配置文件教程链接:https://blog.csdn.net/qq_41614928/article/details/93771657安装完成后我们开始学习下面知识1. jsx代码内{}的用...原创 2019-06-27 21:27:19 · 1424 阅读 · 0 评论 -
【React】 3课 react代码中点击事件与{}内函数的写法
首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件npm init -y //配置环境npm i babel-standalone -D //安装jsx代码解析器npm i react react-dom -D //安装react的UI框架与dom安装配置文件教程链接:https://blog.csdn.net/qq_41614928/article/details...原创 2019-06-27 22:02:15 · 2107 阅读 · 0 评论 -
【React】 4课 react初识组件
首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件npm init -ynpm i babel-standalone -Dnpm i react react-dom -D安装配置文件教程链接:https://blog.csdn.net/qq_41614928/article/details/93771657安装完成后我们开始学习下面知识react初识组件<...原创 2019-06-27 22:28:52 · 197 阅读 · 0 评论 -
【React】 5课 react组件React.Component
首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件npm init -ynpm i babel-standalone -Dnpm i react react-dom -D安装配置文件教程链接:https://blog.csdn.net/qq_41614928/article/details/93771657安装完成后我们开始学习下面知识有状态组件:状态(sta...原创 2019-06-28 08:41:32 · 572 阅读 · 0 评论 -
【React】 6课 react组件内点击事件的this的3种指向方法
react组件内点击事件的this的3种指向方法1. 通过bind改变点击事件内的this指向外部组件内thisonClick={this.handleClick1.bind( this )}2. 通过在构造函数constructor内使用bind对函数内的this重定向this.handleClick2 = this.handleClick2.bind(this)2. 通过使用...原创 2019-06-29 08:26:18 · 1389 阅读 · 0 评论 -
【React】 13课 安装react脚手架
第一步:安装脚手架之前需要电脑已安装node与npm首先按住 shift + 鼠标右键 → (按下)在此处打开命令行窗口 进入命令行窗口或者 win + R 键 输入cmd 进入命令行窗口输入 :node -v 与 npm -v 查看有无安装node与npm,没有则需要安装:以下证明已安装若没安装 以下是博友安装方法:https://blog.csdn.net/qq_333...原创 2019-07-04 16:03:21 · 596 阅读 · 0 评论 -
【React】 7课 react内ref、findDOMNode等各种操作DOM的方法
1. 通过js来操作DOMconst inp = document.querySelector(‘input’);inp.style.backgroundColor = ‘deeppink’2. 通过使用findDOMNode操作DOMconst inp = document.querySelector(‘input’);ReactDOM.findDOMNode( inp ).st...原创 2019-06-29 11:21:02 · 3221 阅读 · 0 评论 -
【React】16课 react路由Route超简单小项目
项目效果图如下:首先我们来看一下简单的项目文件目录结构:首先我们来看一下App根组件内的路由策略写法:BrowerserRouter 标签它的原理是使用HTML .5 history API (pushState, replaceState,popState)来使你的内容随着ur动态改变的,如果放在一级目录下给BrowerserRouter增加个属性Switch 标签会用来...原创 2019-07-14 09:57:45 · 732 阅读 · 0 评论 -
【React】 17课 react简单实现跳转二级路由小项目
小项目效果图如下:在新闻路由内实现二级路由跳转,右侧显示子路由组件内容!左边列表任然显示!首先我们看一下简单的项目文件目录结构:下面我们来看 App.js代码:import React from 'react';import { BrowserRouter, Route, NavLink, Switch,} from 'react-router-dom';//导...原创 2019-07-14 10:47:17 · 1990 阅读 · 0 评论 -
【React】 8课 react组件内ref绑定子组件
首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件npm init -ynpm i babel-standalone -Dnpm i react react-dom -D安装配置文件教程链接:https://blog.csdn.net/qq_41614928/article/details/93771657安装完成后我们开始编写下面代码代码如下:<!DO...原创 2019-06-29 15:25:37 · 1749 阅读 · 0 评论 -
【React】 14课 react表单控件实现双向数据绑定
效果下如图:我们通过react脚手架来实现先来看一下项目逻辑:表单控制基本元素:text、password、checkbox、radio、select、option、textareaMVVM:双向数据绑定 ( Model -> view view -> Model )Model:模型(模块)View : 视图react:数据流是单向:Model → ...原创 2019-07-07 16:23:26 · 1396 阅读 · 1 评论