React
Cao_Mary
这个作者很懒,什么都没留下…
展开
-
Hooks的基本介绍
1 什么是HooksHook 是 React 16.8 的新增特性,它可以让函数式组件拥有类组件特性【如:保存自己的状态,有自己的生命周期方法】基础的Hook:useState、useEffect、useContext额外的Hook:useReducer、useCallback、useMemo、useRef、useImperativeHandle、useLayoutEffect、useDebugValue2.为什么需要Hook?在Hook出现之前, 如果我们想在组件中保存自己的状态,如果原创 2021-06-17 12:51:57 · 2242 阅读 · 0 评论 -
Redux DevTools的安装与使用
Redux DevTools的安装与使用1.什么是Redux DevTools?2.如何使用Redux DevTools2.1在浏览器中安装Redux DevTools2.2 添加Redux DevTools中间件配置1.什么是Redux DevTools?Redux DevTools是一款Redux官方提供的浏览器调试工具,可以让我们很方便的对Redux保存的状态进行追踪调试完整项目地址chrome扩展程序地址(用于下载工具压缩包)2.如何使用Redux DevTools注意:我使用原创 2021-05-28 13:28:32 · 5797 阅读 · 2 评论 -
ReferenceError: primordials is not defined
问题:使用npm打包Redux DevTools工具,报错:ReferenceError: primordials is not defined解决办法:将node版本降级为11.15.0【也可升级gulp】。说明:报错的原因,很多解释是说打包的时候node和gulp版本冲突,建议使用node12以上(>12)且gulp3以上(>3)版本打包。或者node不大于12(<=12)且gulp不大于3(<=3)进行打包。个人因担心gulp升级4以上,语法有变化造成不能成功打.原创 2021-05-28 12:53:15 · 1096 阅读 · 0 评论 -
Redux基本介绍【状态管理器】
本文每节之间有一定关联关系,建议小白阅读全文。大神们找对应章节内容即可。Redux基本介绍【React状态管理器】1 基本概念1.1 什么是Redux?1.2.什么是可预测的状态管理?1.3.为什么要使用Redux?1.4.Redux核心理念2 三大原则3 基本使用3.1 单独使用Redux4 React使用Redux5 React子组件中使用Redux1 基本概念1.1 什么是Redux?Redux是一个管理状态(数据)的容器,提供了可预测的状态管理1.2.什么是可预测的状态管理?数据 在什么原创 2021-05-03 11:01:15 · 307 阅读 · 0 评论 -
React中使用React-Redux
安装:npm i react-redux在祖先组件【index.js】中,导入Redux。使用Provider包裹祖先组件的内容。并在Provider中传递store属性。// index.jsimport ReactDOM from 'react-dom'; // 虚拟DOM转换为真实DOMimport React from 'react'; // 将JSX转换为createElementimport App from "./App";import {Provider} from "reac.原创 2021-04-29 12:47:34 · 207 阅读 · 0 评论 -
React子组件中使用Redux
App.jsimport React from 'react'; // 生成虚拟DOMimport store from "./store/store";import {addAction, subAction} from "./store/action";import Son from "./Components/Son";import Son2 from "./Components/Son2";import './App.css'class App extends React.PureC原创 2021-04-29 12:43:21 · 318 阅读 · 0 评论 -
编写利于维护的Redux
1 项目文件夹/src文件夹中新建store文件夹,新增store.js文件、reducer.js文件、constants.js文件、action.js文件store.js文件import {createStore} from "redux";import reducer from "./reducer";// 利用store来保存状态(state)const store = createStore(reducer)export default store // 暴露出来reducer..原创 2021-04-27 16:42:59 · 103 阅读 · 0 评论 -
React-路由跳转报错:Error: Invariant failed: You should not use <withRouter(App) /> outside a <Router>
报错:Error: Invariant failed: You should not use <withRouter(App) /> outside a 问题描述:使用history的push方法手动跳转路由。结果报错问题原因:如果一个组件要使用路由创建, 那么这个组件必须包裹在BrowserRouter, HashRouter中解决办法:将组件包裹在BrowserRouter,或HashRouter中即可...原创 2021-04-21 17:42:45 · 6751 阅读 · 0 评论 -
React-路由跳转-Cannot read property ‘push‘ of undefined
报错:Cannot read property ‘push’ of undefined问题描述:使用history的push方法手动跳转路由。结果报错push方法undefined了this.props.history.push('地址')问题原因:如果一个组件是通过路由创建的, 那么系统就会自动给这个组件传递一个history对象。但是如果一个组件不是通过路由创建的, 那么系统就不会给这个组件传递一个history对象,history对象都找不到了,那push方法自然就报错undefined解原创 2021-04-21 17:40:20 · 1075 阅读 · 0 评论 -
如何搭建一个React项目
1.自行手动配置详见:手动创建一个React项目https://zh-hans.reactjs.org/docs/add-react-to-a-website.htmlhttps://reactjs.org/docs/add-react-to-a-website.html2. 通过脚手架自动配置详见:脚手架自动创建React项目https://zh-hans.reactjs.org/docs/create-a-new-react-app.html...原创 2021-04-05 16:16:35 · 142 阅读 · 0 评论 -
脚手架自动创建React项目
1.什么是脚手架?脚手架是一种能快速帮助我们生成项目结构和依赖的工具每个项目完成的效果不同,但是它们的基本工程化结构是相似的。既然相似,就没有必要每次都从零开始搭建,完全可以使用一些工具,帮助我们生成基本的项目模板。那么这个帮助我们生成项目模板的工具我们就称之为’脚手架’2.什么是create-react-app?create-react-app就是React的脚手架工具,它可以快速的帮我们生成一套利用webpack管理React的项目模板3.如何安装和使用create-react-app?原创 2021-04-05 16:15:56 · 242 阅读 · 0 评论 -
手动创建一个React项目
手动创建一个React项目1.创建一个DOM容器2.添加两个script标签,导入文件react.js和react-dom.js3. 通过react.js创建虚拟DOM4.通过react-dom.js渲染虚拟DOM完整代码需求:给一个div绑定带内容的div1.创建一个DOM容器<div id="app"></div>2.添加两个script标签,导入文件react.js和react-dom.js <script src="https://unpkg.com原创 2021-04-05 16:09:08 · 306 阅读 · 0 评论 -
React项目查看webpack【报错:Remove untracked files, stash or commit any changes, and try again.】
在React项目中,,webpack的相关文件默认被隐藏,如果想查看webpack文件,就在项目目录下输入:npm run eject如果报错Remove untracked files, stash or commit any changes, and try again,是因为使用脚手架新建的项目中,有文件被删除。因此五大执行该命令。...原创 2021-04-05 15:21:19 · 306 阅读 · 0 评论 -
安装React developer tool避坑
安装React developer tool避坑问题1.This is probably not a problem with npm. There is likely additional logging output above.问题2.npm ERR! code EUNSUPPORTEDPROTOCOL npm ERR! Unsupported URL Type "link:": link:./scripts/eslint-rules3.总结时间有限的童鞋直接看标题3 总结即可问题1.This i原创 2021-03-28 15:52:58 · 866 阅读 · 0 评论