qq_40816649的博客

平时我们在写react代码的时候经常会在div标签上面加上ref这样的参数来获取div的实例，但是我们自己封装的组件如果直接传ref是获取不到我们封装的组件的实例的。这里我们就需要用到react.forwordRef来封装组件这样就可以直接通过在标签上直接传递ref来获取组件的实例了。forwordRef组件这里我加入了ts类型规范并将ts的规范暴露出来这样在我们要是用组件的时候将ts也一起拿到来规范代码。import React, {useImperativeHandle} from 'reac

公司的项目太多了有小半年没有写博客了。今天准备更新这篇干货。背景：这段时间经历了公司，项目的洗礼让我对于项目的自主搭建有了更深刻的认识。当我们使用别人的东西开始就注定要受制于人，例如create-react-app这样的脚手架一切的东西都帮你配置好了。当你遇到想要自定义端口、打包路径、入口文件、或者引入新的wenpack插件的时候，这个时候你就需要在脚手架的基础上执行npm run eject来开启该脚手架的自定义功能；这个时候如果你已经开发到了一半那么这样的操作可能会给你带来意想不到的麻烦，当然虽然有提供

在react hook中使用定时器的时候遇到了一个这样的问题这样使用计时器的话会出现一个结果，n永远是2，因为定时器中的上下文指向的一直是定义n初始值为1的时刻。const [n, setN] = useState(1)<button onClick={() => { setN(1) time = setInterval(() => {...

先看一下目录，很多博客上都是直接将父子组件全部写到同一个文件上，但是在项目中大部分需要将组件抽离成各个文件。context.jsimport React from 'react'const MyContext = React.createContext()export default MyContext父组件：通过ContextApp.Provider设置共享数据i...

和class组件的写法不同，hook使用mobx需要在组件的最外层包裹一层mobx-react提供的observer，在没有包裹observer的情况下可以拿到mobx的数据也可以改变mobx的数据，但是改变之后不会触发视图的更新。import React from 'react';import { withRouter } from 'react-router-dom'import s...

当我们create-react-app安装好了一个react的项目的时我们会找不到相关的webpack配置的文件。这里我们不能像vue-cil3.0一样直接根目录新建vue.config.js。打开package.json可以看到script下有一条eject命令这条就是webpack配置的命令，当然如果你已经执行过npm runeject的话就找不到这条命令了。npm runeje...

vue的插槽需要在组件中定义slot标签，并且在引用的时候要对应slot标签上的插槽名。react的插槽直接将dom写到组件的标签下然后子组件通过this.props.children获取到放入的dom元素，这个dom元素可以设置key属性来区分每一个元素。然后在组件中直接将dom当成组件引入到render中。对比vue和react的插槽都是实现了相同的功能但是vue的实现方式更加直观一...

在react-router-dom5取消了IndexRoute这个默认路由的组件，这样在最新的react-router-dom5中默认路由便成了必须要解决的问题，不然在某些路由结构复杂的的项目中首页地址需要类似http://localhost/admin这样写法比较不好看虽然功能可以实现。react-router-dom还有另一个组件Redirect组件<BrowserRouter&...

对于大型的react项目的首页加载速度如果没有对路由组件进行按需加载打开速度是很慢的。新建jsx文件import React from 'react';export default function (componentFactory) { class AsyncComponent extends React.Component { constructor() { ...

react的状态管理工具有redux和mobx，之前学习过redux感觉还是比较复杂的然后工作中有用到mobx于是就学习了一下mobx中间遇到了一些问题。首先是ts，mobx的文档有用到修饰器简化了大量的decorators修饰器代码。但是直接拿过来用不行的需要安装ts环境。npm install -g typescript在项目根目录下新建tsconfig.js文件配置ts（公司ta...

在学习mobx状态管理工具的时候遇到了编译过程@装饰器无法通过编译的错误Support for the experimental syntax 'decorators-legacy' isn't currently enabled试了各种方法安装修饰器依赖都没有成功，后面去修改了babel-preset-react-app这个依赖包的源码终于解决了这个问题在node_modules文件夹中找...

react组件有两种写法一种是export default直接暴露一个function，还有一种是直接定义一个class类然后继承react库的Component类这两种方式来创建react组件。对于class类创建react组件的方式来说可以直接定义组件的this.state，这样在render中return的jsx模板中就可以直接this.state调用，以及this.setState来更...

最近这个小程序项目中要求用户授权摄像头和麦克风权限，这里就要处理一下权限的问题。如果用户第一次Taro.authorize授权弹框如果拒绝之后就没有在第二次弹框的出现了会报一个error错误。这里的处理办法有两种：通过设置button按钮的opentype=openSetting然后用户去手动操作；第二种是通过Taro.openSetting这个api来主动吊起微信的权限界面代码通过Ta...

最近公司准备用做一个直播会议的小程序是用taro写的，之前没用过这个框架主要的语言是react还好之前有学过react语法上大差不差，于是直接上手了边看文档边写（当然啦有老师傅带）。注意！！！这里提一下虽然是taro框架但是很多api还是小程序的只是类似wx.showModel这样的要写成Taro.showModel，api或者方法名很多和小程序原生的api和方法名是一样的。我做的是直播组...

react-redux是之前的博客说过的redux的封装插件，使redux能完美的运用到react中。安装npm install --save react-redux引入在index.js入口文件中引入并改写index.js调用react-redux的Provider作为标签使用并绑定store属性。store属性即为之前博客已经提过的全局数据https://blog.csdn.net...

使用create-react-app安装完项目之后。执行npm install sass-loader node-sass --save-dev安装sass这两个相关的插件。写一个scss文件直接在组件中引入scss文件将工程跑起来然后查看页面好了愉快的写样式吧！！！注意：网上的一些教程都要去node_modules中找react-scripe中的文件进行配置。...

刚开始学习react，也不知道是运气好还是运气不好，一开始挑了vue作为主要的框架vue的操作还是算比较简单的在三大框架中（拿来即用）。而react相对来说会比较复杂一点涉及到的js原理性的东西也比较多包括es6等等。从vue到react会感觉有很多东西感觉比较新没有见过比如每个事件要bind(this)将定义的react对象绑定到事件上，不然默认this是指向点击的元素而获取不到constr...

和vue一样react也有在某一个时刻会对应执行的生命周期函数。这里我将react的生命周期分为三大部分初始化生命周期compionentWillMount（组件即将被挂载到页面前执行）render（组件渲染）componentDidMount（组件挂载到页面上时执行）props和state更新生命周期componentWillReceiveProps（props独有的pro...

react官方提供了React Transition Group这个动画框架供开发者使用。https://reactcommunity.org/react-transition-group/安装npm install react-transition-group --save引入import {CSSTransition,TransitionGroup} from 'react...

react的路由和vue个人感觉有很大的不同，感觉vue-router比react-router-dom简单，react-router-dom比较绕。安装npm install react-router-dom --save入口文件中做如下配置；其中react-redux是状态管理。import {BrowserRouter,Route} from 'react-router-do...

这篇文章跟https://blog.csdn.net/qq_40816649/article/details/90172681衔接在一个spa单页面应用中如果项目较小的话异步组件可能影响不大，但是如果是一个大的react单页面项目如果没有使用异步组件，页面会在第一次加载的时候加载所有项目中所有的组件严重影响页面的加载速度，异步组件可以让路由跳转到对应的路由上才去加载对应的react文件，这样页...

react的组件化开发能极大的提升开发效率，因此理解父子组件间的传值是非常重要的。直接上代码了父组件import React, { Component } from 'react'import List from '../../components/list/list'import {Link,withRouter} from 'react-router-dom'class...

最近终于闲下来有时间整博客了，因此急需个人react的学习进程。因为之前不是专门做react的所以对于react-router的关注也比较少，react-router有多个版本还衍生除了react-router-dom这些新的第三方库（老子学不动了o(╥﹏╥)o）。就拿最近的3.0和4.0来说吧，嵌套路由的方式完全不一样，这里就拿我在学习的react-router-dom来说吧。路由配置...

在react脚手架创建的项目中，类似像axios请求这样的公共方法，需要给它设定到一个全局的方法中。|对比vue，vue可以直接在main.js中直接Vue.prototype.$axios = function(){}这样的形式绑定全局的方法。这样就不用每一个vue文件都去引用axios这个文件了，也方便进行统一的管理。那么react是不是也可以类似的在index.js中react.pro...

redux和vuex一样是用于管理全局共享数据的工具。调试工具工欲善其事必先利其器，打开谷歌浏览器点击这三个点->更多工具->扩展程序点开这个打开chrome网上商店搜索Redux DevTools并安装。出现下面这个图标说明安装成功了接下来看一下目录结构吧src目录下的Store文件就是用来管理共享数据的脚本文件夹。actionTyp...