![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
TangAcrab
这个作者很懒,什么都没留下…
展开
-
react项目报错 Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` 报错解决
报错如下:解决方法。 在package.json 文件eslintConfig中添加如下。 "parserOptions": { "babelOptions": { "presets": [ ["babel-preset-react-app", false], ["babel-preset-react-app/prod"] ] } }重启vscode后,不再报错。该问题的具体描述.原创 2022-05-31 16:37:30 · 2729 阅读 · 2 评论 -
react-three-fiber学习记录
工具篇:将模型文件自动转换为jsxgltfjsxgitHub地址:https://github.com/pmndrs/gltfjsx模型库https://github.com/KhronosGroup/glTF-Sample-Models@react-three/dreihttps://github.com/pmndrs/drei原创 2021-02-21 22:29:35 · 1570 阅读 · 0 评论 -
react17
可将全局状态分为客户端全局状态和 服务端全局状态。 有api请求接口返回的全局数据则为服务端全局和状态。使用create-react-app创建一个ts项目命令npx create-react-app projectName --template typescript可在tsconfig.json中配置 baseUrl,具体文件可通过绝对路径来访问目标目录。避免../../的书写方式 "compilerOptions": { "baseUrl": "./src",项目代码规范格式.原创 2021-02-21 22:28:13 · 263 阅读 · 0 评论 -
基于create-react-app一步步实现web网易云音乐
1、使用craco代替creat-react-app的eject命令package.json scripts字段修改如下在项目根目录下创建craco.config.js,其中配置路径别名例如:2、 安装normalize.cssnpm install --save normalize.css3、安装 (redux、react-redux)、(immutable、redux-immutable)4、创建store和reducer。在组件中引入store,利用store.getState方法原创 2020-11-13 00:02:01 · 186 阅读 · 0 评论 -
服务器端的路由
服务器端运行的路由和客户端运行的路由的区别:服务器端基础路由StaticRouter客户端基础路由BrowserRouter一:使用服务器端路由1.安装路由包。npm install react-router-dom --save2.src下新建一个Routes.js文件服务器端的路由:引入StaticRouter 必需要有一个context属性,和Routescontext={...原创 2018-11-06 14:43:45 · 1244 阅读 · 0 评论 -
redux中reducer的拆分。redux中的combineReducers方法
根据业务逻辑和页面将reducer进行拆分为多个reducer。最外层reducer将各个分散的reducer进行聚合:1.引入分散的reducer。2.从redux中引入combineReducers 方法。...原创 2018-11-05 11:49:35 · 430 阅读 · 0 评论 -
异步组件与withRouter路由方法
1.将组件进行异步加载用到react-loadable第三方库https://github.com/jamiebuilds/react-loadable2.在组件中从react-router-dom引入{withRouter} 方法,使得组件可以正确获取路由间的传参...原创 2018-11-05 12:16:47 · 470 阅读 · 0 评论 -
ssr与csr的优异
一、CSR客户端渲染的模式(vue、react)页面由js渲染,js运行于浏览器端,所以称客户端渲染。基于react的csr渲染流程:浏览器下载html文档→下载js→运行react代码渲染页面→展示页面优势:1.前后端分离的架构,利于开发效率的提升缺点:1、TTFP 首屏渲染时间比较长(首屏加载速度慢)2、不能SEO (搜索引擎优化) 。大多数搜索引擎的爬虫只能识别html中的...原创 2018-11-05 17:28:25 · 6364 阅读 · 0 评论 -
immutable数组中拼接新的数组
原创 2018-12-21 18:13:36 · 1920 阅读 · 0 评论 -
react-redux的connect方法和rc-form的搭配使用
二者融合详细例子:http://react-component.github.io/form/examples/redux.html原创 2019-01-27 11:00:28 · 1385 阅读 · 0 评论 -
react hooks初理解
原创 2019-02-18 10:57:24 · 200 阅读 · 0 评论 -
md5加密依赖工具utility使用小记
常对用户注册或登录的密码进行密文存储。npm地址:https://www.npmjs.com/package/utility依赖安装:npm install utility页面引入const utils = require('utility') // utilityMD5加密存储自定义一个双重md5加严方法,形成一个合格的加密算法使用方法...原创 2019-03-04 14:49:54 · 1537 阅读 · 0 评论 -
react单页应用与app原生通信的总结
import React,{Component} from 'react'import {connect} from 'react-redux'import NavBars from '@/coms/nav_bar'import axios from 'axios'import {Toast} from 'antd-mobile'import Qs from 'qs'//需要回调f...原创 2019-06-26 13:42:22 · 492 阅读 · 0 评论 -
react服务器端中的同构
renderToString方法不会将事件的东西进行渲染,只会渲染组件的基础内容。解决办法:让服务器端先将页面进行渲染,然后让相同的代码在浏览器端像传统的react代码一样再运行一遍。 ——同构同构:一个react代码在服务器端执行一次,在客户端(浏览器)再执行一次。服务器端执行:页面进行渲染展示。客户端执行的时候:进行事件的绑定。通过express.static方法进行访问静态资源。...原创 2018-11-06 11:41:50 · 286 阅读 · 1 评论 -
UI组件和容器组件的拆分及react中的无状态组件
一:UI组件与容器组件的拆分组件的渲染部分和逻辑部分都在一个文件中,组件的维护会比较困难,所以将组件进行拆分,UI组件专门做渲染,容器组件来处理逻辑。1.UI组件:渲染2、容器组件:关注业务逻辑,功能实现。通过属性传值的方式传递给子UI组件值和方法。二:无状态组件定义:当一个组件只有一个render()函数的时候(即UI组件),可将当前class组件改造为函数组件,即无状态组件。性...原创 2018-10-30 16:44:02 · 1000 阅读 · 0 评论 -
redux中间件之redux-saga学习记录
中间件指的是action和store之间。是redux的中间件。redux-thunk是将异步代码放到action之中,便于自动化测试和代码的拆分管理。redux-saga也是异步代码拆分的中间件。redux-sage将异步的逻辑放到单独的文件里。例如sagas.js,sagas文件也可以接收action1、redux-saga的创建yarn add redux-saga或者npm in...原创 2018-10-31 11:41:51 · 694 阅读 · 0 评论 -
redux-thunk记录
1、安装redux-thunk 命令: npm install --save redux thunk 2、在stroe下inde.js中引入 import thunk from 'redux-thunk',配合redux提供的applyMiddleware方法使用。import {createStore,compose, applyMiddleware} from 'redux'//...原创 2018-09-11 12:07:09 · 297 阅读 · 1 评论 -
React 学习记录
1、创建React项目 执行命令 create-react-app project-name 2、registerServiceWorker.js和./public/manifest.json用于PWA的serviceWorker服务和快捷启动方式的图标生成,可删除。总之他们是用于PWA相关的。 3、如果出现jsx语法,必须引入React 用于转译。在jsx语法中如果出现大写的标签,则这个标...原创 2018-09-03 10:47:55 · 259 阅读 · 0 评论 -
redux的使用记录
引入redux npm instll redux --save 1、redux通过store进行数据管理,store更像是一个通信角色。 2、一开始我们需要创建store.js和reducer.js,store用来负责接收通信,读取数据给组件和告诉reducer数据需要发生改变。reducer用来存储组件中的需要的数据和默认值。 store中引入redux的createStore方法。...原创 2018-09-05 17:58:44 · 189 阅读 · 0 评论 -
react-router-dom 学习记录
1、安装npm install --save react-router dom 2、引入 react-router-dom的BrowserRouter 和Router组件,BrowserRouter下用一个元素包裹所有的Router <Provider> <div> <Header/> <BrowserRoute原创 2018-09-12 17:33:44 · 211 阅读 · 0 评论 -
react-redux学习记录
1、react-redux中的两个核心api Provider(提供器) connect(连接器)。顾名思义,Provider将store中的数据提供给它内部的组件,在组件中通过 connect 方法对store中的数据进行接收。在react项目入口文件index.js中,引入store和 react-redux中的Provider组件// index.jsimport store fr...原创 2018-09-07 10:54:31 · 314 阅读 · 0 评论 -
create-react-app中添加less支持
create-react-app中添加less支持首先先在项目中添加less-loader和less的支持,执行如下命令: yarn add less less-loader1、create-react-app创建的项目中默认不包含webpack的配置文件,而使用less要修改webpack的文件。 使用命令yarn eject 让项目曝出webpack配置文件,执行 yarn eject 后...原创 2018-09-19 15:02:55 · 946 阅读 · 0 评论 -
create-react-app 按需加载antd出错问题解决
按需引入antd报错问题1.使用create-react-app工具创建了一个项目create-react-app antd-demo2.安装babel-plugin-importnpm install babel-plugin-import --dev3.按需引用antd在App.js里面引入,import { Button } from 'antd';package.json里...原创 2018-09-19 15:59:08 · 2753 阅读 · 1 评论 -
react中的虚拟Dom与diff算法
传统:1.state 数据2.jsx模板3.数据和模板结合生成真实dom进行挂载。4.数据state发生改变5.数据 + 模板结合,重新生成dom,进行替换原有dom片段。缺陷:第一次生成了一个完整的dom片段,第二次又生成了一个完整的dom片段。第二次的dom替换第一次的dom,非常的消耗性能改进:1.state数据2.jsx模板3.数据 + 模板 结合,生成真实dom...原创 2018-10-25 12:05:28 · 189 阅读 · 0 评论 -
react中的 \ ref \
ref可以帮助我们直接获取dom元素。一般不推荐使用。1.ref={ ()=>{} } 指向当前domref传入一个箭头函数ref= { (input) => this.input = input }2.setState中的第二个参数(也是一个函数),setState异步的完全执行完成之后,才会调用第二个参数中方法。(该方法可以正确获取当前页面中dom)setState()...原创 2018-10-25 14:04:27 · 286 阅读 · 0 评论 -
react中的生命周期函数
万物皆有生命周期。生命周期函数指在某一个时刻组件会自动执行的函数。renderconstructor也可以理解为一个生命周期函数。在组件一创建的时刻,被自动的调用1、initialzation 组件初始化的时候 (constructor的调用)初始化数据 state and props2、 Mounting 挂载a. componentWillMount在组件即将被...原创 2018-10-25 15:27:57 · 1092 阅读 · 0 评论 -
redux中间件之redux-thunk学习记录
1、redux-thunk允许我们在redux工作流里的action中进行异步操作获取数据。在actionCreators文件中定一个返回函数的action。返回的函数里可接收一个dispatch参数。获取到数据后,发起 action→dispatch→store→reducer→store→component的工作流程,进行组件数据更新。2、redux-thunk 的安装 :npm ins...原创 2018-10-31 10:06:34 · 366 阅读 · 0 评论 -
react与redux之间的关系
react与reduxreact是一个视图层的框架,多个组件之间的传参十分麻烦,数据无法共享。大型项目中react常与大型的数据层框架相配合使用——redux。readux:将所有的数据放于公共的存储器——store,所有的数据由数据存储器收发。readux = reducer + flux.redux的工作流程redux安装: yarn add redux1.store的创建从re...原创 2018-10-29 16:28:22 · 736 阅读 · 0 评论 -
immutable.js和redux-immutable使用记录
在reducer中不可直接修改数据。 用immutable.js生成immutable对象。 1、安装npm install immutable 2、在reducer.js中引入immutable.js的import {fromJS} from 'immutable' fromJS方法。 3、将原有的js数据对象改变为immutable对象。const defaultState = ...原创 2018-09-11 11:34:28 · 1856 阅读 · 1 评论