qq20004604-CSDN博客

原创 React-router（5）params 路由传参

5、参数DEMO地址参考 4.params.jsReact路由取参数，有两种：?a=1 ：这种属于 search 字符串，在 location.search 里取值；/a/123 ：这种需要从 match.params里取值；但无论哪种，路由获取到的值，是跳转后的那一刻的值，而不是实时更新的最新值。具体来说：假如 Link 标签跳转路径实时绑定输入框的一...

2018-03-04 22:19:11 31627

原创 React-router（4）props 路由信息

4、propsDEMO地址参考 3.props.jsreact-router 的路由信息，都存储在组件的 props 里。之所以是存在 props 里，是因为我们写在父组件里的，是 Route 标签，我们需要显示的组件，是作为 Route 标签的属性而传进去的。显然，而我们的组件，作为 Route 标签的子组件而存在，因此，路由数据通过 props 传给我们的组件，这也...

2018-03-04 22:18:20 5187

原创 React-router（3）BrowserRouter 和 HashRouter（哈希地址和普通地址）

3、BrowserRouter 和 HashRouter前两节的DEMO，都是 HashRouter，而非 BrowserRouter ，二者有所不同。以下解释的前提是你要懂什么叫 hash 地址，hash 地址就是指 # 号后面的 url。假如有一个 Link 标签，点击后跳转到 /abc/def。BrowserRouter： http://localhost:8080/abc...

2018-03-04 22:10:04 6651 2

原创 React-router（2）路由嵌套

2、路由嵌套：参考 2.routingNested.js DEMO地址还是以上一节上面那个 DEMO 为示例。毫无疑问，我们肯定会面临路由嵌套的问题，即在顶级路由匹配到组件后，子组件里面也可能有一个次级路由。假如顶级路由的url为：/1，那么次级路由匹配后的路径一般来说是 /1/2；但是假如当前路径是 /1，然后次级路由里有这样一个标签 <Link to...

2018-03-04 22:03:49 3089

原创 React-router（1）基础用法

0、参考文献React Router 4 简易入门一个中文文档，但不确定是否是官方的，例子比较多初探 React Router 4.0 这个对标签的说明比较详细react-router v4 如何静态传值给子组件render和component的区别0.1、React-router 安装这里的版本号是 “react-router-dom”: “^4.2.2”...

2018-03-04 22:01:49 841

原创 React（17）异步组件

26、异步组件当在React里使用异步组件时，核心知识是两个：webpack 如何异步加载其他模块：通过 require(['xxx'], function(module){})来实现；React 里如何使用异步加载的这个模块：参考正常使用模块时的做法；【异步加载】关于 webpack 的异步加载，可以查看我写的这一篇异步加载实战DEMO.简单来说，就是 requir...

2018-02-12 18:21:54 4680

原创 React（16）包裹标签 React.Fragment

24、包裹标签 React.Fragment在 Vue 里，我们会用 <template></template> 标签来包裹一些不能有父容器的复数同级标签。例如在 <tbody></tbody> 标签中，我们只能放置 <tr></tr>标签，假如我们同时有多个 <tr> 标签被赋值给一个 JSX 变量，那么

2018-02-12 18:20:58 12976

原创 React（15）ref

23、ref用过 Vue 的同学，在使用 React 的 ref 时，注意不要混淆。在 Vue 中，ref 绑定的 DOM 元素，可以直接在组件实例里，通过 this.$refs.xxx 来获取。但是在 React 中，ref 的属性的值，是一个函数；函数的参数是当前 DOM 标签，或是组件实例；于是你可以在函数体内，通过 this.xxx = xxxx 来将该 DOM 赋值给...

2018-02-12 18:20:29 1192

原创 React（14）JSX 的一些语法说明

22、JSX【1】标签名可以是对象的属性（前提对象属性是一个组件）这种情况下，对象和属性的首字母，可以不大写（但建议大写，以作区分）let MyDom = { my() { return <p>这是一行</p> }}class MyInput extends React.Component { render(...

2018-02-12 18:19:53 312

原创 React（13）style 和 class

20、style 写法JSX里，写 style 属性，有几点需要注意：以 k-v （对象）形式来写 style 属性（如果直接写在 html 标签里，容易以为是双大括号，事实上还是单大括号）；key 使用驼峰写法；值是字符串；如果想混合多个属性，需要先通过例如 Object.assign() 将其混合为一个对象，再使用。不能使用数组或写 2 个 style={} 来实现；...

2018-02-12 18:19:19 689

原创 React（12）组合（类似 Vue 组件的插槽）和继承

18、组合（类似 Vue 组件的插槽）在Vue中，假如我们需要让子组件的一部分内容，被父组件控制，而不是被子组件控制，那么我们会采用插槽的写法 <slot></slot> 在 React 里也有类似的写法，父组件写法是相同的，但子组件是采用 {this.props.children} 来实现。示例：class MyChild extends React....

2018-02-12 18:18:47 7269

原创 React（11）组件通信

17、组件通信这个很好理解，我们开发常面对几种情况：子组件需要使用父组件的值：通过标签传入，props取值，如：<Status temperaature={this.state.temperaature}></Status>父组件需要使用子组件的值：不能直接将父组件值传入子组件并在子组件修改（不好），应采用父组件传函数到子组件，子组件调用父组件的该函...

2018-02-12 18:18:10 450 1

原创 React（10）React表单元素应用方法大全

16、表单总结写前面值的改变，通过 onChange 事件触发（包括文字输入框、radio、checkbox）；选中与否，通过设置 HTML 元素的 checked 等于一个符合要求的 state 的值（因此表达式结果为 true，于是 checked='true' 就是选中），来实现。【form】标签：如果用 form 标签的话，在通过 submit 按钮提交时，会自动触发...

2018-02-12 18:17:41 663

原创 React（9）列表渲染（对标Vue的 v-for）

15、列表渲染（对标Vue的 v-for）【实现思路】基础：数组的元素是 JSX 语法的 DOM，该数组作为 JSX 语法的 DOM，可以自动拼起来；实现：遍历数组，然后将将数组元素变为 JSX 语法的 DOM，得到一个新的数组（元素是 JSX 的 DOM），将这个新数组作为变量插入到渲染元素中即可。如以下代码：class HelloWord extends React....

2018-02-12 18:12:41 4703

原创 React（8）条件渲染（类似 Vue 的 v-if）

14、条件渲染（类似 Vue 的 v-if）讲道理说，React 本身的条件渲染，没有 Vue.js 用起来舒服。Vue.js 只需要在标签上添加 v-if 或者 v-show 就行，但 React 就比较麻烦了。class HelloWord extends React.Component { constructor(props) { super(props)...

2018-02-12 18:12:02 20506 5

原创 React（7）异步的数据更改（setState 是异步行为）

与Vue不同，React的设置变量是异步的。13、setState 是异步行为 setState()这是一个异步操作，如：class HelloWord extends React.Component { constructor(props) { super(props); this.state = { co...

2018-02-12 18:11:21 3497

原创 React（6）生命周期（组件生命周期、state生命周期）

12、生命周期参考链接：React组件生命周期小结两个生命周期，分别是组件的生命周期，和状态变更的声明周期组件结构：父组件套用子组件初次渲染：constructor 【父组件】构造函数componentWillMount 【父组件】挂载前render 【父组件】渲染constructor 【子组件】构造函数componentWillMount 【子组件】挂载前...

2018-02-12 18:10:16 777

原创 React（5）组件复用

11、组件复用同一个组件可以同时插入多个到父组件中，并且各个组件的状态是独立的。（和Vue的组件是一个道理，用法也类似）class HelloWord extends React.Component { constructor(props) { super(props); this.state = { count: 0 ...

2018-02-12 18:09:14 505

原创 React（4）事件处理

10、事件处理事件的 this注意，事件触发的 this，默认指向的 undefined；所以请手动绑定 this 给事件相应函数。比如：this.clickCount = this.clickCount.bind(this) onChange 事件输入框获取修改后的值，通过 onChange 事件。假如事件的参数是 e，那么 e.target 获取到...

2018-02-12 18:08:27 379

原创 React（3）变量使用、变量更新、父子组件变量传递

5、变量被中括号包含。let foo = 'world'class HelloWord extends React.Component { render() { return <div className={domClass}> Hello，{foo} </div> }}6、组件...

2018-02-09 18:20:17 16507

原创 React（2）React的嵌套和组件实例

3、嵌套被嵌套的目标可以是函数或者类，需要以大写字母开头：函数是 return 的返回值，类是 render 函数的返回值；示例：// 被嵌套function Foo() { return <h3>这是一个h3标签</h3>}// 嵌套到目标ReactDOM.render( <div> <Foo...

2018-02-09 18:19:00 927

原创 React（1）安装和基本示例

0、本项目的DEMOhttps://github.com/qq20004604/react-demo1、安装推荐使用 DEMO 的 package.json 配置来安装npm install运行（HMR）：npm run dev单独安装npm install --save react react-domnpm i --save babel-preset...

2018-02-09 18:17:56 452

原创手把手教你webpack3（15）插件之雪碧图插件（WEBPACK-SPRITESMITH配置简述）

WEBPACK-SPRITESMITH配置简述前注：文档全文请查看根目录的文档说明。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里，发【Issues】。DEMO0、使用说明安装：npm install运行：// 开发模式（推荐使用这个）npm run dev// 打包到dist目录npm run build单独安

2018-01-15 00:55:47 4505

原创手把手教你webpack3（14）HMR模块热加载

前注：文档全文请查看根目录的文档说明。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里，发【Issues】。点击这里查看DEMO7、模块热加载 HMR7.0、使用说明安装：npm install如果需要单独安装，请查看6、开发环境中的 6.2、实时重新加载 webpack-dev-server运行（注意，是 dev）：

2018-01-15 00:54:40 1927

原创手把手教你webpack3（13）开发环境

前注：文档全文请查看根目录的文档说明。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里，发【Issues】。6、开发环境6.0、使用说明安装：npm install运行：npm run test有三种，依次介绍。6.1、观察模式 watch关键字：修改文件后自动编译，需要刷新浏览器后才能查看到新编译好的文件。

2018-01-15 00:53:50 555

原创手把手教你webpack3（12）VUE-LOADER配置简述

VUE-LOADER配置简述前注：文档全文请查看根目录的文档说明。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里，发【Issues】。DEMO地址0、使用说明首先你得会用 Vue.js，不然可能对本文部分内容无法理解安装：npm install运行：// 开发模式（推荐使用这个）npm run dev// 普通

2018-01-15 00:48:15 3942

原创性能信息收集（分析、代码、DEMO三合一）

知识储备浏览器加载：浏览器~加载，解析，渲染获取各种时间：Performance APIDEMO 页面http://www.jianwangsan.cn/job/#/performancegithub代码performance-timing浏览器加载过程这里指网页，而不是任何资源。时间线参考下图：【redirect】：什么时候会触发重定向呢？很简单，

2018-01-15 00:45:04 301

原创教你怎么使用 webpack3 的 HMR 模块热加载

前注：文档全文请查看根目录的文档说明。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里，发【Issues】。点击这里查看DEMO7、模块热加载 HMR7.0、使用说明安装：npm install运行（注意，是 dev）：npm run dev结论放前面，适合场景：当使用 style-loader 时，修改 css 样式；当使用 vue-loader 之类带 HMR 功

2017-12-26 09:56:03 809

原创详细分析Vuex 的应用场景

Vuex 的应用场景本文在 GitHub上的链接昨天被问了一个问题： Vuex 的应用场景有什么？什么时候适合使用 Vuex，什么时候不适合使用 Vuex？在当时，我的答案是一般人会回答的内容：涉及到非父子关系的组件，例如兄弟关系、祖孙关系，甚至更远的关系；他们之间如果有数据交互，那么应该使用Vuex来实现；如果页面复杂度比较低的话，也可以考虑使用 global-event-bus 来实

2017-12-23 16:15:32 16228 1

原创 webpack3实战（5）打包一个多页、jQuery、图片转base64、压缩混淆、异步模块加载的项目

基本需求：1. 引入jQuery（或其他类似库，之所以用 ``jQuery`` 是每个前端开发者都理应会 jQuery）；2. 使用 ``less`` 作为 ``css`` 预处理器；3. 标准模块化开发；4. 有异步加载的模块；5. 使用 es6、es7 语法；6. 写一个登录页面作为DEMO，再写一个登录后的示例页面作为跳转后页面；7. 可适用于多页项目；8. css 文件与图片文件脱离（即

2017-12-19 09:04:36 1986

原创性能测试新法宝：performance.now()

1、老方法 console.time在之前，如果我们要测试性能，通常是用console.time(str)console.timeEnd(str)可以参照你所不知道的Chrome调试技巧（上）：2、获取时间段优点在于：精度比较高（单位小于毫秒），连续两行 console.time('1') 和 ··console.timeEnd(‘1’)··，他也能计算出时间差异；例如我随便试了一次，返回值是

2017-12-16 20:08:20 878

原创手把手教你webpack3（11）PostCSS-Loader配置简述

POSTCSS-LOADER配置简述前注：文档全文请查看根目录的文档说明。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里，发【Issues】。DEMO地址1、概述postcss-loader 用于处理css代码，具有下列特点：通常由 options 和 plugins 两部分组成，plugins 虽然嵌套在 options 里，但实际上是通过其他插件生效的；配置是可

2017-12-12 20:45:16 11328

原创手把手教你webpack3（10）Less-Loader配置简述

LESS-LOADER配置简述前注：文档全文请查看根目录的文档说明。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里，发【Issues】。DEMO地址1、概述less-loader 用于处理编译 .less 文件，将其转为 css文件代码。使用 less-loader 的话，必须安装 less，单独一个 less-loader 是没办法正常使用的。安装npm in

2017-12-12 20:43:38 9532

原创手把手教你webpack3（9）File-Loader配置简述

FILE-LOADER配置简述前注：文档全文请查看根目录的文档说明。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里，发【Issues】。DEMO地址1、概述简单来说，file-loader 就是将文件（由于一般是图片文件为主，所以下面通常使用图片两字作为替代，方便理解。其他的包括字体文件等），在进行一些处理后（主要是处理文件名和路径），移动打包后的目录中。处理的内容包括

2017-12-12 20:41:56 3411

原创前端开发模块化／解耦化异步请求

前端开发模块化／解耦化异步请求1、异步请求的特点在现代web前端的开发过程中，异步请求是常见需要处理的情形之一，他具有以下几个特点：异步：因此需要依赖回调、或者Promise来接受结果；复用：同一个请求可能多次／在不同地方被调用；形式固定：通常情况，异步请求的 url、get/post 类型、数据格式等是固定的，只有数据是可变的；输入数据可变：但发起请求传输的数据通常是不固定的；过程多种状

2017-12-11 09:06:54 770

原创手把手教你webpack3（8）url-Loader配置简述

URL-LOADER配置简述前注：文档全文请查看根目录的文档说明。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里，发【Issues】。DEMO地址1、概述简单来说，url-loader的效果类似file-loader。优点：可以将css文件中的图片链接，转为base64字符串，或移动到打包后文件夹；缺点：可配置性比file-loader弱一些，但其实fi

2017-12-07 21:20:25 3622

原创手把手教你webpack3（7）style-loader详细使用说明

STYLE-LOADER详细使用说明前注：文档全文请查看根目录的文档说明。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里，发【Issues】。DEMO地址1、概述简单来说，style-loader是将css-loader打包好的css代码以<style>标签的形式插入到html文件中。对于简单项目，打包然后插入也就足够了，但是遇见复杂情况，例如：需要使用webpack

2017-12-05 17:35:23 3744

原创手把手教你webpack3（6）css-loader详细使用说明

CSS-LOADER配置详解前注：文档全文请查看根目录的文档说明。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里，发【Issues】。1、概述对于一般的css文件，我们需要动用三个loader（是不是觉得好麻烦）；1、css-loader：先附上官网文档（中文）的链接：css-loader文档。不过说实话，这个官方文档讲的很糟糕，看的人一脸懵逼。css-loader主要

2017-12-01 17:37:44 3890

原创手把手教你webpack3（5）babel-loader详细使用说明

前注：文档全文请查看根目录的文档说明。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里，发【Issues】。5.1、babel-loader这个用于将使用ES6规范的js代码，转为ES5。首先安装一大堆东西，参照下面的命令，一共是4个（包括webpack）npm install --save babel-loader babel-core babel-preset-env

2017-12-01 17:35:33 2493 1

原创 webpack3实战（4）打包带异步加载功能的模块

前注：文档全文请查看根目录的文档说明。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里，发【Issues】。实战项目示例目录1、需求列表1、有模块A、B两个；2、A组件默认加载，B组件在符合某种条件下加载（例如延迟1秒后再加载）；3、显然我需要打包其为2个文件；2、步骤安装依赖npm install执行打包命令：npm run test查看打包后效果：dist/index

2017-11-29 09:28:13 933