react

参考npm文档： https://www.npmjs.com/package/echarts-for-react 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装 第一步：npm安装echarts-for-react npm install --save echarts- for-react npm install echarts --save //如果有报错找不到echarts模块，需要在安装一下exharts' 第二步：引入模块和组件 import echarts from 'echarts' import echarts from 'echarts/lib/echarts' <ReactEcharts option={ this.getOption()} /> 第三步：参考echarts官网实例添加option参数 参考官网： https://echarts.baidu.com/examples/ 配置 option =>>> getOption = ()=> { let option = { title:{ text: '用户骑行订单' }, tooltip:{ //展示数据 trigger: 'axis' }, xAxis:{ data:[ '周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis:

AntDeign官网上没有table动态绑定显示图片的示例，baidu上搜索出来的大部分都是React语法，无法使用。 经过摸索，实现方法如下：以显示一个图片，一个按钮为例(picurl是返回的json数据，内容为图片地址)。 1、设置column，scopedslots const columns = [ { title: '图片',width: 120,dataIndex: 'picurl',fixed: 'left', key: 'pic',scopedSlots: { customRender: 'pic' }}, { title: '操作', key: 'operation', fixed: 'right', width: 100, scopedSlots: { customRender: 'action' } } ] 2、设置table slot < a-layout-content > < a-table :columns ="columns" :dataSource ="data" :rowSelection ="rowSelection" > < a slot ="action" href ="javascript:;" > 查看 </ a > < img style ="width:100px;heigth:100px" slot ="pic" slot

原文地址: medium.com/better-prog… 译文地址： github.com/xiao-T/note… 本文版权归原作者所有，翻译仅用于学习。 ⚠️译者注：ES2020 已经原生支持这种语法了。 详情 最近，我学到了一个非常有用的 TypeScript 的操作符： 非空断言操作符 。它会排除掉变量中的 null 和 undefeind。 在这篇文章中，我将会介绍如何、何时使用这个操作符，并提供一些样式，希望可以对你们有帮助。 TL;DR：在变量后面添加一个 ! 就会忽略 undefined 和 null。 function simpleExample ( a: number | undefined ) { const b: number = a; // COMPILATION ERROR: undefined is not assignable to number. const c: number = a!; // OK } 复制代码 如何使用非空断言操作符 非空断言操作符会从变量中移除 undefined 和 null。 只需在变量后面添加一个 ! 即可。 忽略变量的 undefined | null ： function myFunc ( maybeString: string | undefined | null ) { const onlyString:

前言 作为一个业务前端，完成业务需求的同时，还要处理各种线上问题，加班辛苦忙碌了一年，还要被老板说“思考是不够的”、“没有业务 sence”，出去面试，被问项目，也说不出什么有亮点或者有挑战的东西，想做点牛逼的东西，也没有发现什么有价值的方向，好不容易找到一些方向，还要被老板一顿质问，业务价值是什么？ROI 怎样？最终可能就只是做了一点性能优化工作，抽离了一些可复用的组件……不禁让人感叹，业务难、前端难、做业务的前端更难！ 如果你也有这样的感受和困境，我想告诉你，这真的是太正常了，在阿里内部的技术论坛就有多篇关于这个问题的思考，我根据根据自己理解和调研，同时参考了多位不同前端领域专家的总结，整理成这篇文章，希望能对大家有所帮助。 1. 业务前端的困境 1.1 业务前端“好忙” 业务前端，顾名思义，做业务的前端，直接与业务的 PD、运营接触，对产品的用户直接负责。在实际的工作中，业务前端经常忙于业务的各种会议、项目和答疑，即便一条业务线上有多个前端同学支持，面对成山的需求，可能依然感到吃力，这其中的原因可能有： 用户侧产品往往需要快速上线，大部分需求都需要倒排工期，开发时间尤其紧张 对业务不熟悉，在项目需求已确定的时候才去参加视觉评审，没有办法判断需求背后的业务逻辑跟业务大节奏是否匹配、需求本身是否能够达成业务目标、有没有更好的实现方式，只能接下需求，然后排期 维护成本高

提问： is_focus 第一次是false, 第二次是true。 如果我不写useEffect的话，is_focus一直都是false，都是第一次的props的内容。 这样正常嘛？必须要在useEffect中 更新props的值？props上面的其他数据也一样，console.log props的数据是更新的，但是useState 之后还是第一次的数据 export default function UserInfo(props: IProps) { const [is_focus, setFocus] = useState(props.is_focus) // is_focus 第一次是false, 第二次是true。 如果我不写useEffect的话，is_focus一直都是false，都是第一次的props的内容。 这样正常嘛？必须要在useEffect中 更新props的值？ useEffect(() => { setFocus(props.is_focus) }, [props.is_focus, props.created_id]) const handleFocus = useCallback(() => { props.dispatch({ type: `${commonSpace} /changeFollow`, payload: { uid: props

一 理解vue的生命周期，首先需要注意几个关键字 　　1. el :选择器 　　2. $el：对应选择器的template模板（html代码） 　　3. render：也是vue实例中的一项，其参数更接近vue解析器，按优先级，render参数 > vue实例对象中有template > 外部的HTML模板 后面两个也是将其编译成render函数 　【注意】render选项参数比template更接近Vue解析器！所以优先级如下： 　　　　 render函数选项 > template参数 > 外部HTML 　　4. $mount ：当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中，假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。例如： 　　new Vue({内部无el项}).$mount('#app')是延迟加载，同下面的语句相同 　　 new Vue({el:"#app",***}) 二 各个生命周期 beforecreate》created》beforeMount》mounted》beforeDestroy 1. beforecreate：el 和 data 并未初始化； 　　案例：可以在这加个loading事件 及获取路由参数，但是this.(data｜computed｜methods）参数均为undefind（无法访问到 el 属性和

本篇写的是优化方案，查看基础配置的话可以前往这里 juejin.im/post/5e6e01… webpack优化 缓存配置 babel-loader自带的缓存 { test : /\.js$/ , use :[ 'babel-loader?cacheDirectory=true' ] } 复制代码 使用cache-loader 下载包 cnpm install cache-loader --save { test :/\.js$/, use:[ 'cache-loader' ] } 复制代码 多进程打包（1）happypck 下载包 cnpm install happypack os --save happy启用进程池，设置数量一般为设备cup总数，在loader处指定id作为一个实例，在plugin处进行单独处理 const HappyPack = require ( 'happypack' ); const os = require ( 'os' ); module .exports = { module :{ rules :[{ test : /\.js$/ , use :[ 'happypack/loader?id=js' ] }] }, plugins :[ new HappyPack({ id : 'js' , //这里loaders配置与之前的loader一致

本文原创，更多内容可以参考： Java 全栈知识体系 。如需转载请说明原处。 开发安全 - OWASP Top 10 在学习安全需要总体了解安全趋势和常见的Web漏洞，首推了解OWASP，因为它代表着业内Web安全漏洞的趋势。@pdai OWASP简介 OWASP（开放式web应用程序安全项目）关注web应用程序的安全。OWASP这个项目最有名的，也许就是它的"十大安全隐患列表"。这个列表不但总结了web应用程序最可能、最常见、最危险的十大安全隐患，还包括了如何消除这些隐患的建议。（另外，OWASP还有一些辅助项目和指南来帮助IT公司和开发团队来规范应用程序开发流程和测试流程，提高web产品的安全性。）这个"十大"差不多每隔三年更新一次。 本文总结自： www.owasp.org.cn - 2017 - 10项最严重的 Web 应用程序安全风险 OWASP Top 10: 2013版至2017版改变了哪些内容 在过去的几年中，应用程序的基础技术和结构发生了重大变化： 使用node.js和Spring Boot构建的微服务正在取代传统的单任务应用，微服务本身具有自己的安全挑战，包括微服务间互信、容器 工具、保密管理等等。原来没人期望代码要实现基于互联网的房屋，而现在这些代码就在API或RESTful服务的后面，提供给移动 应用或单页应用（SPA）的大量使用。代码构建时的假设

一、脚手架搭建react结构目录： 1、npm install -g create-react-app 全局安装react脚手架 2、create-react-app react-demo 创建react-demo项目 3、cd react-demo 进入到项目文件夹 4、npm start 启动本地项目 二、Styled-Components与Reset.css的结合使用. Styled-Components解决css样式表不能私有的问题，且可以将组件与样式结合，方便构建小组件。Reset.css重置不同浏览器标签默认设置 三、React-Redux进行应用数据的管理 有些组件的数据，你认为是只有该组件要用，但是随着项目不断扩展，说不定其他组件也要用，这时候既然用了React-Redux管理数据，就是要将所有的数据都交给其管理 React-Redux和Redux这两个包都是结合使用的，React-Redux有个Provider核心组件，这点注意 四、combineReducers完成对数据的拆分管理 项目越大，reducer.js代码越多，所以构建项目时候就先要进行拆分处理 五、actionCreators与constants的拆分 action对象的创建，acitonType的常量都要单独写在一个文件中进行管理 六、使用Immutable.js来管理store中的数据

一 .安装： 1.下载node.js windows： https://nodejs.org/dist/v8.5.0/node-v8.5.0-x64.msi Linux:（解压直接运行) https://nodejs.org/dist/v6.11.3/node-v6.11.3-linux-x64.tar.xz 2. 安装cnpm 镜像 http://npm.taobao.org/ 命令： npm install -g cnpm --registry= https://registry.npm.taobao.org 3.安装yarn yarn与npm一样，都是包管理工具，但是下载速度更快，我们一般都是使用yarn 在cmd中运行 cnpm install -g yarn 3.安装依赖类库 命令： cnpm install | 推荐使用yarn install 4.安装webpack打包工具（注：这个过程中缺少什么包都可以cnpm install ) command：cnpm instal webpack -g 5.启动应用 npm start 二.常规目录结构： ├── assets //存放静态图片 ├── components //存放组件目录 │ └── LineChart //画图组件 ├── models //组件之间调用封装模型 ├── routes //路由组件 │ ├