随笔分类 - React
React的一些基础及进阶
摘要：React生命周期分为15和16两个不同的版本 React15生命周期 React15有四个不同的阶段 初始化（initialization） 挂载阶段（Mounting） 更新阶段（Updating） 卸载阶段 初始化 constructor() 组件一创建就会调用 es6 class类中的 co
阅读全文
摘要：React间组件间通信有如下几种方式： 父组件向子组件通信 子组件向父组件通信 跨级组件通信 非嵌套关系的组件通信 父组件向子组件通信 父组件直接通过props向子组件传递需要的信息 // 子组件 const Child = props => { return <p>{props.name}</p>
阅读全文
摘要：合成事件 如果DOM上绑定了过多的事件处理函数，整个页面响应以及内存占用可能都会受到影响。React为了避免这类DOM事件滥用，同时屏蔽底层不同浏览器之间的事件系统差异，实现了一个中间层——SyntheticEvent。 步骤 react事件机制执行分为如下两个步骤。 事件绑定：当用户在为onCli
阅读全文
摘要：如题，想必React大家早已不陌生，而React里面的JSX都是玩的得心应手了，但是假如说React里面没有了React那会是一种什么样的情形呢，我们来简单的看一下。 首先我们来实现一个简单的list列表。 好，现在我把他的代码贴出来，大家看一下（可复制的代码在文章最下方） 感觉是不是很清晰明了。那
阅读全文
摘要：如题，我们怎么在React或者其他的框架中实现一键复制呢，实际上实现一键复制的代码与框架无关，因为他是用的是原生的API，下面我们用React来实现一下 效果： 核心代码： 直接将红框处改为需要复制的元素类名。(获取元素时注意一下我用的是querySelector) 将该事件绑定到元素上，即可。完整
阅读全文
摘要：此题可能大家会不屑一顾，哎，错误都给你怼脸上了你还不会嘛，其实大家有没有认真思考过这其中的原因。先上一张错误图，剩余的全靠编。没兴趣看图的老铁们可以拉到最底下直接看结论 错误： 代码： 其次，我再把简化后的代码拉出来遛一遛（可以先跳过图片，去看结论） 奇怪之处： 在作者那行会抛出一开始截图上的错误，
阅读全文
摘要：我胡汉三有日子没回来写写文章了，最近一直再忙着将老项目升级，所以没时间来搞文章，今天突然感觉开了挂一样，爱因斯坦附体，把之前的bug都搞定了，在这里特意把升级中遇到的问题，记录下来，算是把这个坑填上。 场景：react-router2.2.4 > 5.0.1 主要发生了两个问题： 1.路由跳转之前用
阅读全文
摘要：最近在学习的过程中，学习了一些关于redux的一些知识，学之前用redux，虽然会用但是实现的原理就不是特别清楚，天天沉迷于搬砖 总是这木搬砖也不是个事啊，就准备开始深入了解一些原理性的东西 首先在看redux之前，我们要知道，redux和react没有关系，他想和谁玩就和谁玩，任何框架都行，red
阅读全文
摘要：今天在开发时报了以下错误，记录一下 我们不能在组件销毁后设置state，防止出现内存泄漏的情况 出现原因直接告诉你了，组件都被销毁了，还设置个锤子的state啊 解决方案： 利用生命周期钩子函数：componentWillUnmount 将报错的地方移入此钩子里进行处理 componentWillU
阅读全文
摘要：今天在项目中看到了大佬引入了classnames,之前没用过所以去搜了搜，感觉还真的是挺好用的，搜到一篇很不错的文章，跟原创作者交流了一下就转载过来了！ 下面废话不多说，我们直接来看文章吧 首先我们我们来看这个名字classnames一看就知道是跟className类名有关的，实际上也确实是这样，
阅读全文
摘要：今天遇到了一个问题，值得一记 首先在我看项目代码时发现了一个问题 有一个JS的export如下 大家可以注意一下config 这里为什么要如此写法呢？ 首先这里用的时ES6的箭头函数 ()=>{} 而此种写法()=>({})等同于()=>{return {}} 其实这里我们可以直接使用config:
阅读全文
摘要：create-react-app是Facebook官方推出的脚手架，基本可以零配置搭建基于webpack的React开发环境步骤： 打开控制台 进入你想要创建项目的目录文件下面 依次执行以下命令 npm install -g create-react-app /*搭建一个全局的脚手架*/ creat
阅读全文
摘要：今天我们来试一下如何从gitHub上拉取一个项目并且运行起来，话不多说，我们直接开搞可好 1.首先我们先获取到项目地址（此处我以自己的项目地址作为示例） 我们选择红圈处的clone or download 选择后会出现下图 这里我使用SSH，当然你也可以使用https 2.新建一个文件夹，并在里面打
阅读全文
摘要：朋友们，我想死你们了，最近这几天忙着和病魔作斗争所以没怎么写博客，今天感觉好点了，赶紧来写一波，就是这木敬业。 今天我们来讨论讨论props和state相同点和不同点 首先我来概要说明一下这两者 props： props是一个从外部传进组件的参数，由于React具有单向数据流的特性，所以他的主要作用
阅读全文
摘要：转载自:https://zhuanlan.zhihu.com/p/20295971， 今天看到这篇文章后情不自禁的转载过来了，我的天老爷，我看到后直接菊花一紧，这写的太好了，直接写进我心坎里了，我必须推荐你们看一下，太帅了 Shared mutable state is the root of al
阅读全文
摘要：今天我们来说一说如何在前端使用短信和语音验证码接口，为何要搞这个呢，因为我闲的，我膨胀了，我头铁 老规矩，先来说一下大体的思路，我使用的短信和语音验证接口是用的阿里云提供的，感觉还是比较好用的，我就拿语音验证码接口来做个示范，短信验证码接口和语音验证码接口使用起来是一样的，照着语音接口的示例改一下就
阅读全文
摘要：由于今天比较闲，就玩了玩react，然后就封装了一个地图的组件，当然功能比较简单，因为就是随手写的小东西，但是由于引用了百度API和bee-mobile，所以用起来可能要薛微麻烦一点点，但是我保证，只是一点点而已。 由于之前发了一次，说字数太少从主页移出了，作为一个铁头娃，那我肯定得重写啊。前一次发
阅读全文
摘要：今天我们来说说如何fetch发送Form Data请求并携带cookie，直接进入正题好吧，别问我今天为啥不在开始吹两句了，累到一句牛逼不想吹。。。。。。 步骤1： 设置头部，"Content-Type": "application/x-www-form-urlencoded" 步骤2： 发送请求的
阅读全文
摘要：今天我们来搞一搞如何在React中使用百度地图API好吧，最近忙的头皮发麻，感觉身体被掏空，所以很久都没来写博客了，但今天我一定要来一篇好吧 话不多说，我们直接开始好吧 特别注意：该React项目是用create react app 创建的（以下所有操作都在该基础上进行） 1.去百度地图登录 2.获
阅读全文
摘要：现在我们来搞一搞React中的路由吧，别问我为什么这木喜欢用搞这个字，因为它比较深奥。 注意下面我们使用的是React-Router-DOM React中的路由基本使用还是满简单的，零碎的小东西有点多，所以我直接把他们揉到一起做了一个小例子，代码我都写上注释了，应该挺简单易懂的 注意：以下所有操作均
阅读全文
