2019年08月_姜无忧

原创 react中context传递数据

在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。何时使用 Context ？Context 设计目的是为了共享那些对于一个组件树而言是...

2019-08-28 17:34:33 793

原创 React 父子组件方法调用及通信

父=>子父组件向子组件传递数据：通过传 props 的方式，向子组件进行传递数据父组件调用子组件的方法：可以给子组件，通过ref起个名字，然后在父组件的点击事件中，通过this.refs.子组件的名字.子组件的方法来实现子=>父子组件调用父组件的方法（传递参数）：通过调用父组件的方法时，通过callback回调传递数据。this.props.父组件的方法（传递的数据）...

2019-08-27 17:39:05 2520

原创常用的react生命周期的简单总结

常用的生命周期图示：挂载阶段：constructor => render => componentDidMount => 结束更新阶段：render =>componentDidUpdate => 结束卸载阶段：componentWillUnmount => 结束constructor构造函数用于以下两种情况：通过给 this.s...

2019-08-27 16:58:53 1347 1

原创 React 性能优化

1，react性能查看工具再讲性能优化之前，我们需要先来了解一下如何查看react加载组件时所耗费的时间的工具，在react 16版本之前我们可以使用React Perf来查看。在最新的React16版本中，我们可以直接在url后加上?react_pref，就可以在chrome浏览器的performance，我们可以查看User Timeing来查看组件的加载时间。2，单个rea...

2019-08-26 22:36:55 403

原创什么是Virtual Dom

什么是Virtual Dom？所谓的 virtual dom，也就是虚拟节点。它通过 JS 的 Object 对象模拟 DOM 中的节点，然后再通过特定的 render 方法将其渲染成真实的 DOM 节点。其次我们还得知道一点，那就是 virtual dom 做的一件事情到底是啥。我们知道的对于页面的重新渲染一般的做法是通过操作 dom，重置 innerHTML 去完成这样一件事情。而 v...

2019-08-23 14:32:53 4648

转载 vue3.0尝鲜 -- 摒弃Object.defineProperty，基于 Proxy 的观察者机制探索

本文转自简书：https://www.jianshu.com/p/860418f0785c写在前面： 11月16日早上，Vue.js的作者尤大大在 Vue Toronto 的主题演讲中预演了 Vue.js 3.0的一些新特性，其中一个很重要的改变就是Vue3 将使用 ES6的Proxy 作为其观察者机制，取代之前使用的Object.defineProperty。我相信许多同学深有体会，许多...

2019-08-13 16:36:58 306

原创 vuepress搭建自己的博客

第一步在github新建项目，配置域名路径在github创建blog-demo项目，点击项目的setting，配置项目域名：选择主题后，一步一步操作，等待一会可以生成自己的地址了：第二步搭建自己的vuepress博客全局安裝VuePressnpm install -g vuepress//新建一个文件夹mkdir new_project//初始...

2019-08-13 10:39:09 362

原创 vue中使用mockjs案例

1.安装npm install mockjs2.在vue-cli项目下新建mock文件夹index.jsimport Mock from 'mockjs'import { homelist } from './homelist.js'// 配置Ajax请求延时，可用来测试网络延迟大时项目中一些效果Mock.setup({ timeout: 2000})// 首页...

2019-08-11 15:58:50 1046

原创去除字符串前后空格

String.prototype.trimStart() 和 String.prototype.trimEnd()除了能从字符串两端删除空白字符的 String.prototype.trim() 之外，现在还有单独的方法，只能从每一端删除空格:const test = " hello ";test.trim(); // "hello";test.trimStart(); // "h...

2019-08-11 14:48:57 1472

原创 js嵌套数组去重

嵌套数组去重的方法let arr = [[1,2,3],[3,4,4,5,5],[6,7,8,9,[11,12,[12,13,[14]]]],10];function mapArr(arr) { let newArr = []; for(var i=0;i<arr.length;i++) { if(Array.isArray(arr[i])) { ...

2019-08-11 14:38:54 1693

原创 vue中provide/inject的使用及组件传值

inject 选项应该是：一个字符串数组，或一个对象，对象的 key 是本地的绑定名，value 是：在可用的注入内容中搜索用的 key (字符串或 Symbol)，或一个对象，该对象的： from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol) default 属性是降级情况下使用的 valueprovider/inject：简单的来说就是在父组件中通过pr...

2019-08-08 21:56:07 8126 2

原创 Vue 中 title 的动态修改

使用document.title方法通过 DOM 操作来修改 title 的值title 的传递（路由传递）路由传递的方法，即通过路由跳转传参传递 title 的值。由于业务逻辑中本身就包含大量的路由传参，为了解耦方便后续维护，推荐将 title 的值通过路由配置中的 meta 进行传递。之后，通过访问当前路由对象（$route）的 meta 属性即可获取到 title 值。...

2019-08-08 21:31:40 1493

原创发布自己的插件到NPM上

一、项目创建1、使用简洁的webapck配置模板webpack-simple初始化项目vue init webpack-simple vue-name#简洁的webapck配置模板2、编写组件代码二、发布到 npm在发布前，我们要修改我们的配置文件1.webpack.config.js// 原module.exports = { entry: '....

2019-08-08 18:43:09 528

原创 npm源切换,从淘宝源切换至npm源

从淘宝源切换至npm源npm config set registry=http://registry.npmjs.org但是老这样切来切去有点low啊，这时候nrm就派上用场了，nrm是什么？简单点说nrm就是专门用来管理和快速切换私人配置的registry的一个工具。cnpm i nrm -g安装好后使用nrm ls命令会显示如下：*号在哪个地方就说明现在的...

2019-08-08 17:35:54 15360 2

原创 v-for和v-if在同一个标签使用问题

永远不要把v-if和v-for同时用在同一个元素上。一般我们在两种常见的情况下会倾向于这样做：为了过滤一个列表中的项目 (比如v-for="user in users" v-if="user.isActive")。在这种情形下，请将users替换为一个计算属性 (比如activeUsers)，让其返回过滤后的列表。为了避免渲染本应该被隐藏的列表 (比如...

2019-08-08 13:03:34 2391

原创 vue-cli2.0 中postcss-px2rem配置

1.安装npm install postcss-px2rem -S2.webpack.base.conf.js配置 remUnit: 100意思为1rem=100pxplugins:[ new webpack.LoaderOptionsPlugin({ vue: { postcss: [require('postcss-px2rem')({'rem...

2019-08-02 15:54:52 3769 2

原创 react配置postcss-pxtorem

1.通过 eject 命令暴露出react 全部配置npm run eject2.安装npm i postcss-pxtorem -D3.配置 webpack.config.jsrequire('postcss-pxtorem')({ rootValue : 100, selectorBlackList : [], //过滤 propList : ['*']...

2019-08-02 15:49:46 4201

xiasohuai的博客