qq_35605231的博客

前言：作为前端三大流行框架Angular、Vue、React一、需要准备的环境：1、Node : Node.js是一个Javascript运行环境，不是一个js库，也不是一个框架，实质是对Chrome V8引擎进行了封装。2、Git : 用来执行命令脚本。3、VSCode : 编辑器，个人喜好，  轻量级，插件多，编辑界面颜值高。（以上内容请自行下载安装）二、项目搭建：...

React路由可以处理明确的url，也可以动态的去匹配 url中的参数路径。传参方式有三种：方式一： 通过params 1.路由表中 <Routepath=' /sort/:id ' component={Sort}></Route>　　　　　　　　　　　 2.L...

要开发一个富客户端应用，有一个东西必不可少，那就是路由（router）系统。在React生态环境中，React-Router是公认的中最优秀的路由解决方案。它提供了与React思想十分贴切的声明式的路由系统我们通过<Router>，<Route>这两个标签以及一系列的属性定义整个React应用的解决方案。一、路由的基本原理： 1、保证视图和URL的同步...

一、middleware由来： 面对多种业务场景，Redux提供了 middleware 来扩展特定场景下的功能。例如：监听每个dispatch发送的每一个action。每个middleware处理一个相对独立的业务需求，通过串联不同的middleware实现变化多样的功能。action会先经过 middleware处理，在传给reducer来处理。/** * 输入系统日...

一、Redux是什么？ Redux的核心代码可以理解为一个库，同时强调与Flux类似的架构思想。它提供若干个API让我们去调用store,并能够去更新store中的最新状态。“React应用”是指使用了redux这个npm包并结合了视图层实现（例 React），及其他前端应用必备的组件，（路由库，Ajax请求库）组成的完整的类Flux思想的前端应用。二、Redux 三个原...

前言： MVC是一种架构模式，它通过关注数据界面分离，来鼓励改进应用程序结构。MVC强制将业务数据（Modal）与用户界面（View）分离开，通过控制器（Controller）管理逻辑和用户输入。这种模式的缺点是：在你项目越来越大的时候，逻辑越来越复杂，数据流动的方式就很混乱。 在此基础上，又衍生出来了MVVM,由VM(ViewModal)q取代了C(Controller...

前言： state是React中非常重要的概念。React通过管理状态来实现对组件的管理，React通过this.state来访问state,又通过this.setState()来更新state,当this.setState()方法被调用时，React会重新调用render函数来重新渲染UI。一、setState异步更新 setState通过一个队列机制实现state更新。...

一、 Virtual DOM 实际上是在浏览器端用Javascript实现的一套DOM API ,它之于React一个虚拟空间，包括一整套Virtual DOM、生命周期的维护与管理，性能高效的diff算法和将Virtual DOM展示为原生的DOM的Patch方法等。当开发者使用React时，此时的&lt;div&gt;标签并不是原生的&lt;div&gt;标签，它其实是Reacts生...

受控组件&lt;input type="text" value={this.state.value} onChange={(e) =&gt; { this.setState({ value: e.target.value.toUpperCase(), }); }}/&gt;&lt;input&gt;...

一、 样式处理是React非常重要的一个环节。需要用到CSS Modues的概念及用法。我们会用到两种方式： 1、使用className prop来设置类名； 2、使用style设置内联样式； 内联样式的 style是以一个 json对象的形式设置的。 样式中的像素值：const style ...

一、 React基于Virtual DOM 实现了一个SyntheticEvent（合成事件）层，完全符合W3C标准，不会存在IE标准的兼容性问题。 同样支持冒泡机制，所有的事件都自动绑定到最外层上，如果需要访问原生事件对象，可以使用nativeEvent属性。在原生事件可以使用阻止冒泡行为可以阻止合成事件的冒泡，而合成事件使用阻止冒泡行为不能阻止原生事件的冒泡行为。注意： 在...

一、 refs是React中非常特殊的prop，可以附加到任何一个组件上（仅有状态组件），当组件被调用时会创建一个改组件的实例，而refs就会指向这个实例。 它可以是一个回调函数。 例:通过ref获取input的实例，调用focus()方法。import React, { Component } from 'react';class Demo extends C...

一、前言    随着前端的发展，框架的选择也越来越多，arcgis js api 在集成到React 中也是提供了良好的适配通过esri-loader。二、使用     首先要先引入 esri样式&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt;...

import fetch from 'dva/fetch';import NProgress from 'nprogress';function parseJSON(response) { return response.json();}function parseText(response) { return response.text();}function che...

在一个元素上设置样式，有一个固定的样式，然后还有一个使用三元运算符根据条件添加的样式。比如说有一个固定样式"title":&lt;div className="title"&gt;标题&lt;/div&gt;，然后还要一个点击高亮的样式:&lt;div className={index === this.state.active ? "active" : null}&gt;标题&amp

前言：    React是单向数据流，当有多个组件需要共享状态的时候，这就需要把状态放到这些组件共有的父组件中，相应地，这些组件就变成了子组件，从而涉及到父子组件之间的通信。父组件通过props 给子组件传递数据，子组件则是通过调用父组件传给它的函数给父组件传递数据。父组件 App.jsimport React, { Component } from 'react';import ...

前言      生命周期函数指某一时刻组件会自动执行的函数，用来管理组件。先来张大图便于理解各个周期函数的执行时刻：一、constructor：           constructor(props) { super(props);//此句必须在该方法首行。}用来构造组件的初始化，this的绑定。二、componentWillMount ：       1...

前言： 在做项目过程中，遇到一个需求就是支持多语言，实现国际化的功能。感谢React社区的强大，提供了umi-plugin-locale插件来实现国际化的功能。首先我们是基于 Umi 搭建的项目。umi-plugin-locale约定 在 src/locales 中引入 相应的 js，例如 en-US.js 和 zh-CN.js，注意：文件名称要和locale的值要对...