react

昨天，写了一篇关于圆环进度条的博客（请移步：<a href="https://www.cnblogs.com/tnnyang/p/11655317.html" target="_blank">Vue/React圆环进度条</a>），已经烦不胜烦，今天又遇到了需要展示类似公司的组织结构图的功能需求，要冒了！！！ 这种需求，自己用div+css也是可以实现的，但是没有什么动画效果，我的css3又很差劲，而且项目中已经使用到了折线图、饼状图、柱状图之类的图表，用的还是百度的echarts，所以这个组织结构图之类的需求也就用了百度的echarts来实现了。 以前用echarts写折线图、柱状图、饼状图的较多，它的API还算比较熟悉，但是画组织结构这样的树状图就很苦逼了，没用过啊，而且设计给的树状图的展示效果跟echarts树状图的展示效果相去甚远，我滴孩，又得一通费时费力的研究，设计图如下： 如图所示，一个树节点中可能会有两种不同的背景色，还有两种不同的文字颜色，每个节点展示的还是圆角矩形。有同学说了，echarts有设置圆角的API啊，直接设置不就完事了。我想说的是，它是提供的有这样的API，但是按照正常的套路实现不了啊。 从图上还可以看到一个几乎实现不了的效果，就是连接每个节点之间的线的拐角处都是直角而不是平滑的，而且echarts没有给出可以设置拐角处是直角的API

基于上篇的介绍，虽然有比较 esri-loader 、 @arcgis/webpack-plugin ，还是觉得有必要需要讲述一下“esri-loader”的开发模式，待大家体验后也会有更直观的感受。 本篇文章是配合react脚手架 reate-react-app 使用，无需自己配置复杂的Webpack的环境。废话不多说，直接上手。 项目搭建 安装create-react-app npm install -g create-react-app 创建react应用 create-react-app是全局命令来创建react项目 create-react-app xxx(你的项目名) 运行成功生成的文件目录 npm start 运行成功则会打开 安装esri-loader npm i esri-loader --save 代码开发 更多的详情见 ： GIS之家小专栏 文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波 来源： oschina 链接： https://my.oschina.net/u/4348174/blog/3564910

很多用过redux开发的朋友们都知道，一般兄弟组件通信可以使用redux。 redux也是近期在挤时间学习中。可能也不是很懂，说不定是有错误的理解，若有。现在虽然自己搭建了一个react+router+redux的环境，但是还不知道应该怎么用好。因为是完全自己使用webpack从头开始搭建的环境，很多搭建步骤都是网上搜的，每篇文章都不全。各种报错。然后继续百度搜错误解决办法，才把问题一个个解决。 现在的环境完成度也相对好点了。但是每个组件中都要写上2个方法也是比较蛋疼的。 mapStateToProps和mapDispatchToProps，用于将reducer转化成组件的props 这样组件就可以通过this.props.state拿到所有公用的state， this.props.方法名就能拿到mapDispatchToProps中定义的方法，如：this.props.d2_1({type:"add"}) 但是有部分公司或项目并没有使用到redux和router。 就要使用一种全局变量的事件监听的形式，最好就是做成一个公用方法来，方便后来调用。 //事件 var E={ //自定义事件集合 listeners: [], //自定义事件监听 listenner: { /** * 添加、注册 * @param ch {String} 事件（频道）名称 * @param

Transpile Modules with Babel in Jest Tests Jest automatically loads and applies our babel configuration. However, because our project takes advantage of tree shaking with webpack , our babel configuration disables transpiling modules. For Jest to work on our code, we need to make sure that our babel configuration transpiles modules during our tests. We’ll use the NODE_ENV environment variable to generate the proper configuration. For tree shaking with Webpack, need to disable transpile modules, for jest testing, we need to use commonjs const isTest = String(process.env.NODE_ENV) === 'test'

首先，这两个都属于js包管理工具，都可以安装包或者模块 yarn 是由facebook、google等联合开发推出的 区别： npm 下载包的话 比如npm install 它是按照包的排序，也就是队列挨个下载，一个下载完成后，再下载另一个 yarn是将要下载的包进行同时下载 yarn 在下载模块或包时，命令行输出的信息更加简洁 npm版本5.0 之后，会自带package.lock.json 文件，该文件主要描述了你项目中安装的包都是哪一个版本，你再进行npm install 的话，会安装指定版本的包。 yarn 一直都有lock 文件，功能和npm 的package.lock.json差不多。 命令不同 npm install == yarn npm isntall vue == yarn add vue npm uninstall vue == yarn remove vue npm update == yarn upgrade 按照以往，我的步骤都是： git clone xxx npm install npm run dev 这时，JJ给我来了下面一段 git clone xxx yarn yarn start “咦，yarn是什么鬼？难道npm更高级的替代品？为什么要替代npm？难道有什么好的地方？”，内心一连串的问题冒出来。我就默默的问了一下JJ：

此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分，给大家介绍 React Native 源码学习方法及其他资源。 最后的章节给大家介绍 React Native 源码的查阅方法，以便你进行更加高阶的开发与研究时参阅，并分享了开发过程中可能遇到的众多问题的解决方案，以及与 React Native 开发相关、本书相关的一些线上资源。 15.6 React Native 源码剖析 我们在学习了 React Native 开发的方方面面之后，我们再次回到 React Native 的本质，给大家简要介绍 React Native 源码的学习方法，对 React Native 源码的整体框架做一个简单介绍，后续如果大家想深入阅读 React Native 框架的源码，希望这部分对你有所帮助，并且能从源码中学习到复杂框架的设计思想，希望大家也能“造出复杂的轮子”。 React Native 项目的 GitHub 地址为： https://github.com/facebook/react-native ，源码的基本结构如图 A-1 所示。 图 A-1 React Native 源码结构 根目录中主要包含了项目的一些配置文件和一些描述性文档； 初始化项目的 React Native CLI 定义在 react-native-cli 文件夹下；

参考： https://blog.csdn.net/qq_39471200/article/details/92655322 问题1： 最近使用react官方脚手架create-react-app建立项目的时候发现在ie浏览器打开时显示空白，在主流的chrome、fireFox等浏览器显示是正常的。 打开控制台显示如下 既然提示了语法错误，那么猜想应该是兼容性的问题，看了下浏览器的版本号是ie11。首先我翻了下create-react-app的文档，从中看到了正好有对ie9、ie10、ie11的兼容性问题解决的一个方案。这时需要用到create-react-app这个插件。 文档地址: https://facebook.github.io/create-react-app/docs/supported-browsers-features create-react-app github地址： https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill 那么下面首先下载这个插件 npm install react-app-polyfill 然后在src下的index.js也就是js入口文件中写入 import "react-app-polyfill/ie9"; import

使用create-react-app时遇到Module not found问题 转 https://blog.csdn.net/wkq_1212/article/details/90291558 本来项目跑的好好地，然后install了一个axios，然后项目就挂了。 各种Module not found，路径不对。 期初以为是可能丢包了，又重新install还是不行，根据错误提示一个个删一个个重新install。 最后干脆重新建了个项目，但仍然不行。 这时候意识到了问题应该是出在create-react-app上： 根据这个猜想，清空了packge卸载了全部model，重新install才解决问题。原因我现在也还不知道什么情况会触发这个bug，欢迎指教。 上代码： npm install rimraf -g //安装删除指令 rimraf node_modules //卸载node库 npm install //重装 npm WARN deprecated fsevents windows 更新下 使用yarn貌似会帮助跳过这个问题： info fsevents@2.1.2: The platform "win32" is incompatible with this module. info "fsevents@2.1.2" is an optional dependency

1、React组件化概念 1.1、组件的概念 React 应用都是构建在组件之上。 组件作为React的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是React应用程序的基石。在React的组件构成中，按照状态来分可以分为有状态组件和无状态组件。 1.2、组件的特点 组件化的概念在后端早已存在多年，只不过近几年随着前端的发展，这个概念在前端开始被频繁提及，特别是在MV*的框架中。 前端中的“组件化”这个词，在UI这一层通常指“标签化”，也就是把大块的业务界面，拆分成若干小块，然后进行组装。 狭义的组件化一般是指标签化，也就是以自定义标签（自定义属性）为核心的机制。 广义的组件化包括对数据逻辑层业务梳理，形成不同层级的能力封装。 标准性 任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。 组合性 组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合，而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示，肯定是要依赖不同组件之间的组合，嵌套以及通信。 重用性 任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。 可维护性 任何一个组件应该都具有一套自己的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解

如今前端框架都流行组件化，页面元素都可以使用组件进行高度概括，那么处理组件之间的关系就如同处理页面架构一样重要。正确理解组件之间的关系，才能让代码按照我们与预料方式工作。最近参与了一个Vue.js的项目，在处理父子嵌套组件之间关系时遇到了较大的阻力，虽然问题最后解决了，但是以花费大量时间为代价的，记录在这里，希望下次不踩同样的坑，能更高效的处理此类问题。 0 问题描述 同react，vue组件也有一套完整的生命周期，不同阶段有不同的分工。总体来讲经常会用的生命周期钩子有以下几种： created mounted destroy 通常会在这些钩子中处理一些异步请求，最常见的就是发起网络请求调用api获取数据。 这里有个问题：在单一组件中，钩子的执行顺序是 created -> mounted -> destroyed ，但当父子组件嵌套时，父组件和子组件各拥有各自独立的钩子函数，这些父子组件的这些钩子是如何交融执行，且执行顺序又是怎样的呢? 最近开发中遇到的一个“诡异”的问题，就是由于对父子组件生命周期钩子执行顺序理解不透彻引起的。问题是这样的：有一个组件有由一系列子组件组成，子组件又被分解成组件，这样下来就构成了三级组件。需求是在组件显示在页面上之后，再将数据初始化进行回显。父组件获取数据后传递到子组件，要求子组件根据这个值将内部元数据进行过滤和加工