实际项目中，需要权衡是直接使用Redux还是用React-Redux。React-Redux将所有组件分成两大类：UI组件（presentationalcomponent）和容器组件（containercomponent）UI组件只负责UI的呈现，不带有任何业务逻辑没有状态（即不使用this.state这个变量）所有数据都由参数（this.props）

ReactHooks提供React.useEffect来解决函数组件没有生命周期的问题React.useEffect（fn，？）第一个参数是特定实时机执行的回调函数，第二个参数是指什么时机1.模拟componentDidMount第一次渲染useEffect(()=>{console.log('');},[])//第二个参数为空时只会在第一次渲染

1:React开发中遇到React.createClassisnotfunction，换成以下写法就可以了！2:UncaughtSyntaxError:/InlineBabelscript:Unexpectedtoken,expected“;”(5:21)原因是：render函数不能写成render:function(){},必须直接用es6的写法调用才可以地方在改好以后就可

方法一：ES6模板className={`title${index===this.state.active?‘active’:’’}`}方法二：join(‘’)className={[‘title’,index===this.state.active?’active’:null].join(‘’)}方法三：引入classnames库，安装：1npminstallclassnames--saveimp

对于前端团队来说，公共组件库是必须的，紧接着就是完善组件库的文档社区里关于快速生成文档的工具有很多，如StoryBook、Docz、Gatsby在调研了几种文档工具之后，最终我选择了umi家族的另一个成员：dumi因为它集成了docz，以及打包工具 father-build，同时支持创建自己的 Markdown组

新建一个example文件夹，用来存放小demo的所有js文件开始写代码showArea.js上面的显示部分importReact,{useContext}from'react';import{ColorContext}from'./color.js'functionShowArea(){ const{color}=useContext(ColorContext) return( <divstyle=

1、前言上篇文章中，我们详细介绍了redux的相关知识和如何使用，最后使用中间件Middleware来帮助我们完成异步操作，如下图上面是很典型的一次redux的数据流的过程，在增加了middleware后，我们就可以在这途中对action进行截获，并进行改变，进行其他操作。同时，在使用middleware

1、ref获取dom元素<divref={el=>this.nodeEle=el}>====>this.nodeEle即为获取到的元素2、根据id获取dom元素document.getElementById(“idName”)3、通过类名获取dom元素document.getElementsByClassName(“className”)获取到的是一个数组集4、根据标签名获取

面经分享第一部分是我前端面试的经验总结，第二部分是我认为比较有思考空间的题目经验总结一份漂亮的简历，需要包括以下部分（排版由上而下）个人亮点（专精领域，个人博客，开源项目）教育经历（毕业院校，在校经历、荣誉）工作经历（实习）项目经历专业技能扎实的前端基础，比如你知道<met

最近在公司某项目参与了一些前端工作，作为后端抠脚大汉，改点前端细节磕磕绊绊，改点大前端、工程化、HTTP交互倒也还能做到柳暗花明。于是打算用后端程序猿的视角记录一些{大前端}的知识快闪，也算是帮助读者构建完整的全栈技能体系。快闪一：paakage.json文件知多少如果你使用了nod

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题Fiber是什么谈谈你对Fiber的了解Fiber对React的使用带来了什么影响回答关键点调度深度优先遍历Fiber是React16中采用的新协调（re

示例：1constHome:React.FC=()=>{2consttextRef=useRef<HTMLInputElement&HTMLTextAreaElement>(null);34useEffect(()=>{5console.log(textRef.current&&textRef.current.value.indexOf('\n&#

好巧不巧，工作了一年跳槽了，之前用的vue，现在用的react～嗯！工作使人进步！现在开始学react吧！切入正题～reacthooks是React16.8.0之后出现的，类组件存在的问题：this指向问题生命周期繁琐创建类的实例开销较大而函数组件函数组件没有this，没有生命周期，没有状态state，函数的执行开销比

背景react的src配置成@新建文件：config-overrides.js放在根目录下const{override}=require("customize-cra");//import{override}from"customize-cra";constpath=require("path");module.exports=override((config)=>{config.r

高阶函数_函数柯里化 高阶函数（定义）如果一个函数符合下面两个规范，就是高阶函数：如果A函数，接收的参数是一个函数，那么A就是一个高阶函数（比如数组方法arr.map()接收的就是一个处理item的函数了）如果A函数，调用的返回值依然是一个函数，那么A也称为是高阶函数（常见的高阶函数：Promi

src 新建目录  组件和页面   index.js 更换初始页面（可改可不改）    index.js代码import'./index.css';functionLogin(){ return( <divclassName="App"> <headerclassName="App-header"> <p> Edit<code&

在RN打包过程中，时而会出现一些报错，如：Executionfailedfortask':react-native-cameraroll:verifyReleaseResources'  这种情况大多是由于版本不兼容引起。这时候需要把项目里node_modules目录下的react-native-cameraroll目录，找到此目录里面的android/build.gradle做出版

1.建一个index.tsx/index.jsx构成组件的页面2.建一个index.state.ts/index.state.js文件，用来关联组件之间的状态，mobx提供oberserve监听组件中状态变化，这是，react本身自带的状态管理如：this.setstate/useState等方法建议不再使用，可能会带来数据更加难以追踪的问题3.建一个service

首先安装和配置好开发环境（这里主要介绍页面跳转，环境搭建可见官网ReactNative中文网搭建开发环境） 下载依赖npminstall react-native-gesture-handlernpminstall @react-navigationative @react-navigation/stacknpminstall--savereact-navigation react-na

使用vue开发管理类的平台，大多数选择elementui，react开发的话，大部分就离不开antd这个生态链庞大的组件库。antd4的版本在2019年下旬开始出现，之后成为稳定版本，所以前两年的老项目的话，基本上都是在使用3的版本，逐渐3的版本也更新比较少，开源库用的人比较多了，就也会暴露出各种各样的

Maximumupdatedepthexceeded.ThiscanhappenwhenacomponentrepeatedlycallssetStateins...1.render里面使用setState()2.this.xxx(xxx)改成()=>this.xxx(xxx)参考链接1参考链接2

首先安装react-redux，命令如下：yarnaddreact-redux连接List组件和Reduxstore的samplecode如下：importReactfrom"react";import{connect}from"react-redux";constList=(props)=>(<div><h1>MyList</h1>{

react项目开发记录1.antdRangePicker设置当前一年的选择时间<RangePickerstyle={{width:"100%"}}value={[this.state.startValue,this.state.endValue]}onChange={this.handlePickerchange}disabledDate={this.handleDisabledDate}format="YYYY-MM-DD

自己学习途中的笔记，如果你发现有误，欢迎指正