愚墨的博客
  • 首页
  • 前端技术
  • 面试
前端框架
React

Context 使用解析

context (上下文)个人理解就是当前环境 首先它是一个属性的有序序列, 并且可以驻留在环境里 有点像全局变量 存在于React 中 react 数据流 单项数据流 ,单纯在React 中 组件内 通过state交流。 父子组件通过props 传递 为了解决 层级传递的繁琐, 于是有了 context , Context 旨在解决组件间的数据传递(Super-->Sub 间) 版本 情况 React 16.3 之前 只有 老版context API ,之后老版和新版(createContext)都有。共存…

2019年01月25日 0条评论 3447点热度 0人点赞 阅读全文
React

webpack4升级

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。 Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。 Webpack4升级 webpack4官方已经于近…

2018年09月20日 0条评论 3017点热度 0人点赞 阅读全文
React

查漏补缺React

React.Children React.Children 是顶层API之一,为处理 this.props.children 这个封闭的数据结构提供了有用的工具,这个顶层API是我之前项目中用的比较少的一个。 this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点。操作children 使用React.Children 比较方便。 常用的一下几个: React.Children.map  使用方法: React.Childre…

2017年11月22日 0条评论 3216点热度 0人点赞 阅读全文
React

React 组件性能优化

影响网站的速度是用户的网速和网站对http请求的处理,为了提升这一点我们通常都会减少http请求,比如,js和css的合并压缩、雪碧图等等。 影响网站性能最大的因素就是浏览器的重绘和重排版了,在原生js当中,我们在遇到需要操作添加DOM的时候,一般都会使用创建文档碎片(document.createDocumentFragment)的方式来减少DOM的重绘和重排版。 React 中的React Virtual DOM 和diff 的存在实则减少网站的性能消耗,但是对于性能优化的问题,我们往往会基于一个不信任的态度,…

2017年07月28日 4条评论 7555点热度 0人点赞 阅读全文
React

react-transition-group 升级指南

这只是一篇个人记录文章。   使用react-router切换页面显得有些单调乏味。所以我们会使用react-transition-group 来进行一些动画的设置,主要是路由的进出动画,当然也可以做其他的动画展示,只是css3 的问题。 react-transition-group 用的大多是1.2.0 或者 1.1.1 的版本,现在是2.2.2的版本,API基本上都变化了。 Note:ReactTransitionGroup和ReactCSSTransitionGroup已被移动到由社区维护的reac…

2017年07月26日 0条评论 3055点热度 0人点赞 阅读全文
React

React高阶组件应用

higher-order 这个词业界老司机基本上都知道,higher-order-function(高阶函数)在函数式编程中是一种概念。描述的是一种函数:这种函数接受函数作为参数,或者输出一个参数。 常见的有map、sort、reduce higher-order-component (高阶组件HOC)类似于高阶函数,它接受一个React组件作为参数,返回一个新的React组件。 通俗点讲就是:当React组件呗包裹时(wrapped),高阶组件会返回一个加强的React组件。  高阶组件让我们的代码更具有复用性、…

2017年03月15日 0条评论 3019点热度 0人点赞 阅读全文
React

ESLint配置文件

上一篇文章介绍了ESLint的基本使用情况,这里在介绍一下ESLint配置文件中的一些细节问题。 如果我们使用ESLint的话可以: npm install -g eslint; //安装 eslint --init; //初始化项目,这会让我们回答几个问题,以自动生成初始eslint文件 eslint app.js //开始lint我们的文件 eslint app.js 只是单独lint一个文件,所以一般在项目中不会这么用,如何配合构建工具用,上一篇文章已经介绍了。这里不多说 这样我们在控制台会看到很多error…

2017年01月13日 0条评论 4203点热度 0人点赞 阅读全文
React

为何需要ESLint

总结写这篇文章是因为我已经开始意识到了规范的重要性,遵守良好的规范可以让一个人少犯错误,代码也是如此。在小的公司小的开发团队中这点意识比较薄弱,因为大家更注重的是技术,因为开发人员相对较少所以沟通起来比较方便,很少有使用eslint的。但是在大团队协作时,良好的代码规范显得格外重要,因为这是保障一个团队代码风格相同、避免低级bug的途径之一。 使用Lint工具和代码风格检测工具,可以辅助编码规范执行,有效控制代码质量。 关于ESLint的介绍,我在这就不多说了,自行GG。ESLint相比于JSLint和CSSLin…

2017年01月12日 0条评论 4576点热度 0人点赞 阅读全文
CSS3

CSS-Modules 开荒指北

实现css模块化一直是前端开发人员努力实现的目标,但是作为前端领域发展最慢的一块,css的模块化解决方案着实让人头疼。越是大型的项目最后限制的并不是JavaScript,而是css。ES6、7和各种打包工具的发展,早已把css甩出好几条街。在《深入React技术栈》中对css模块化有所描述,在此结合我本人的经验胡说几句。 书中讲到CSS模块化的解决方案有很多,但主要分为两类。 一类是彻底抛弃CSS,使用css in JS的方式使用json来写样式。比如说jsxstyle,react-style等,结合我司的项目来说…

2017年01月11日 0条评论 2880点热度 0人点赞 阅读全文
React

babel 6.0 的语法插件的作用

这里只是简单的介绍一下babel中那些语法插件的作用包括以下几个 { "presets": [ "es2015", "react", "stage-0", "stage-1", "stage-2", "stage-3" ], "plugins": [] } babel-preset-react 的作用是让其支持JSX的语法。 babel-preset-es2015 的作用是让其支持ES6的写法。 babel-preset-stage-0 的作用比较多(法力无边),因为它包含stage-1, stage-2以及sta…

2016年12月30日 0条评论 3433点热度 0人点赞 阅读全文
1234
搜搜看看
历史遗迹
  • 2023年5月
  • 2022年9月
  • 2022年3月
  • 2022年2月
  • 2021年12月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年9月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年1月
  • 2019年5月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年9月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年11月
  • 2017年7月
  • 2017年6月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年6月
  • 2015年4月

COPYRIGHT © 2020 愚墨的博客. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS