![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
ygman
这个作者很懒,什么都没留下…
展开
-
React的项目创建
从零开始创建一个React项目 默认电脑已经安装了npm和nodejs使用create-react-app构建react应用程序create-react-app是Facebook官方推出的脚手架,基本可以零配置搭建基于webpack的React开发环境,内置了热更新等功能。 快速开发步骤: 打开控制台 进入你想要创建项目的目录文件下面(用cd进行目录切换)npm ins原创 2018-01-23 14:40:18 · 12473 阅读 · 0 评论 -
非常简单易懂的DOM Diff算法简析
文章整理自阿里云栖视频 DIFF算法在执行时有三个维度,分别是Tree DIFF、Component DIFF和Element DIFF,执行时按顺序依次执行,它们的差异仅仅因为DIFF粒度不同、执行先后顺序不同。 Tree DIFF是对树的每一层进行遍历,如果某组件不存在了,则会直接销毁。如图所示,左边是旧属,右边是新属,第一层是R组件,一模一样,不会发生变化;第二层进入Compon...原创 2018-07-17 18:31:32 · 24919 阅读 · 2 评论 -
最简单的安装React Devtools调试工具
在运行一个react项目的时候浏览器控制台会提醒你去安装react devtools调试工具Download the React DevTools for a better development experience: https://fb.me/react-devtools但是上面的链接我基本上没打开过记录下我安装React Devtools调试工具的步骤: 1、去git上下载r...原创 2018-07-04 17:40:05 · 52736 阅读 · 22 评论 -
react+antd项目在IE下报对象不支持startsWith属性或方法
出问题的startsWith在antd模块里,所以跟自己写的代码无关,是antd的兼容性问题。 出问题的浏览器是IE,上网查了些资料发现IE浏览器不支持该属性浏览器支持情况: 看了网上的好多种解决方案,他们跟我的项目都不完全一致所以没法直接拿来用,记录下自己的解决办法。 需要引用babel-polyfill来解决兼容问题 我的项目是react+antd+webpack安装:ba...原创 2018-04-10 16:49:55 · 2716 阅读 · 0 评论 -
关于react对于不同浏览器的两个小bug
正在做的一个react项目,某些页面在某些浏览器打不开的问题。查看了所有代码都没有问题,最后复现bug的时候发现了两个小问题竟然导致整个页面乃至整个网站瘫痪。 1、Object.values这个方法本来是把对象转化成数组详记 我本地调试是用Mac电脑chrome和safari浏览器都没有问题,但同事的chrome和safari就有问题 后来把Object.values 用for循环来遍历就好...原创 2018-03-20 10:31:13 · 1521 阅读 · 0 评论 -
Object.values把对像的值转化成数组
Object.values把对像的值转化成数组 举个栗子formList: { userName: 'zhenzhen', zhiWei: '前端开发', companyName: '安安娱乐', age: 23}let values = Object.values(formList)console.log(values) //["zhenzhen"...原创 2018-03-13 11:01:38 · 2674 阅读 · 1 评论 -
JSON函数JSON.stringify和JSON.parse的用法
JSON的概念:JSON是一种格式,基于文本,优于轻量,用于交换数据第一个函数JSON.stringify能帮你把不符合JSON格式的JS对象处理成符合JSON格式的字符串 JSON.stringify(value[, replacer [, space]]) 语法: value:必选字段。就是你输入的对象,比如数组、类等。 JSON.stringify({‘name’:’G...原创 2018-02-24 11:47:19 · 743 阅读 · 0 评论 -
WEB安全实战--防止浏览器记住用户名和密码
转载地址:http://blog.csdn.net/happylee6688/article/details/42082313问题 做过 Web 开发的童鞋们都知道,打开网站之后,一般都是需要输入用户名、密码的。然而,就是这简单的操作,在提交的时候,就可能会暴露一些问题,当然,这些问题是会被安全漏洞测试软件检测出来的。如果没有做过相关的处理,那么表单、页面或者本地的 Cookie 中...转载 2018-02-27 20:03:50 · 3534 阅读 · 0 评论 -
React异步请求数据出现setState(...): Can only update a mounted or mounting component...
Warning: setState(…): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the XXX compone...原创 2018-02-26 10:41:04 · 1704 阅读 · 0 评论 -
React生命周期
React component通过其定义的几个函数来控制组件在生命周期各个阶段的动作。 先看一张经典的图片: 与生命周期相关的函数:1~constructor(props,context) 构造函数 在创建组件的时候调用一次2~void componentWillmount() 在组件挂载之前调用一次。如果在这个函数里面调用setState,本次的render函数可以看到更新后原创 2018-01-29 14:23:33 · 352 阅读 · 0 评论 -
react之setRouteLeaveHook
setRouteLeaveHook是react Router离开页面的钩子函数 具体使用如下:componentDidMount () { this.props.router.setRouteLeaveHook( this.props.route, this.routerWillLeave )},routerWillLeave () {...原创 2018-08-17 09:34:57 · 2055 阅读 · 0 评论