react

可以从这关注实时动态，也可以fork之后push： https://github.com/jsfront/month 可以从这查看以往： http://www.kancloud.cn/jsfront/month/82796 1. Javascript 2. 移动Javascript开发 3. Html5 4. CSS 5. Angular 6. React, Webpack 7. Vue 8. jQuery 9. 看书学习 10. Git,Github 11. 创业 | 职业 | 管理 | 产品 12. IDE，编辑器，调试等工具类 13. 前端架构及工程化等 14. Sass，PostCSS 15. 工作 | 协同 | 流程 16. Nodejs 17. UI 18. 性能优化教程 19. 面试相关 20. mac ios 21. php 22. 英语 23. 其它 24. 特别推荐我联盟群几个高手的力作或个人网站 1. Javascript 视频-D2前端技术论坛——2015融合 不可错过的javascript迷你库 测试框架 Mocha 实例教程 为你详细解读HTTP请求头的具体含意 Markdown解析的js库simple-markdown 如果要用前端框架，开发流程是怎样的？ obeject.key与object[key]有什么区别 正确使用Github 的方法是什么？

　　为什么react这么快呢 ？ 　　 因为react用了虚拟DOM； 　　但是每次虚拟DOM转真实DOM不也是很浪费性能吗 ？ 　　 nice，所以关键点在Diff算法这里，去对比新旧DOM树，而后通过补丁去更新到真实DOM上 ； 　　 这个比对不是也很浪费时间吗 ？ 　　 正常情况下，比较两个树形结构差异的算法的时间复杂度是O(N^3)，这个效率显然是无法接受的。 　　react通过总结DOM的实际使用场景提出了两个在绝大多数实践场景下都成立的假设，基于这两个假设，React实现了在O(N)时间复杂度内完成两棵虚拟DOM树的比较。 　　两个假设是： 　　　　 （1）如果两个元素的类型不同，那么它们将生成两棵不同的树； 　　　　（2）为列表中的元素设置key属性，用key标识对应的元素在多次； 　　 面对性能优化我们能做什么呢 ？ 　　　　 1、 使用生产环境版本的库； 　　　　 2、避免不必要的组件渲染； 　　　　 3、使用key； 　　 　　 　　 来源： https://www.cnblogs.com/webcabana/p/11236227.html

Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1、getDefaultProps() 设置默认的props，也可以用dufaultProps设置组件的默认属性. 2、getInitialState() 在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props 3、componentWillMount() 组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。 4、 render() react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。 5、componentDidMount() 组件渲染之后调用，只调用一次。 更新 6、componentWillReceiveProps(nextProps) 组件初始化时不调用，组件接受新的props时调用。 7、shouldComponentUpdate(nextProps, nextState) react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树

写在最前 暑假想要学习React, 发现React官网上的没有说明如何搭建React开发环境, 网上找的很多都是基于webpack3的, 或者直接使用脚手架, 所以趁着放假, 就稍微学了下webpack, 开始搭建自己的React项目. 第一次写博客, 如有错误, 请指出, 谢谢! 之后也会继续更新从零搭建React全家桶系列, react+react-router+redux+es6. 希望大家多多支持. 说明 开发环境是windows 10 技术栈版本 node 10.3.0 npm 6.1.0 webpack 4.16.1 react 16.4.1 babel-core 6.26.3 babel-loader 7.1.5 babel-preset-env 1.7.0 babel-preset-react 6.24.1 初始化项目 创建文件夹并进入 mkdir react-start&& cd react-start 初始化package.json文件　　　　　　　　 npm init -y 　　　　-y的意思是按照默认的填写 webpack 安装webpack npm i webpack webpack-cli -D 　　-D的意思是保存到开发依赖中 　　在webpack4中, 需要同时安装webpack和webpack-cli, 因为两者在webpack4中分开管理了

Amit Ashwini - 09 SEPTEMBER 2017 React.js was developed by Facebook to address its need for a dynamic and high performing User Interface(UI). In 2011, Jordan Walke and his team from Facebook released the React JS library, a JavaScript library which brought together the speed of JavaScript and a new way of rendering pages, leading to a responsive and dynamic user input. In 2015, two years after the team open sourced React.js and its popularity grew, they released React Native. Below is an overview of the business advantages of working with both React.js and React Native. It should give you a

一、初步理解 1. npm安装package.json时 直接转到当前项目目录下用命令 npm install 或 npm install --save-dev 安装即可，自动将package.json中的模块安装到node-modules文件夹下 2. package.json 中添加中文注释会编译出错 3. 每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。 npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。 4. package.json文件可以手工编写，也可以使用 npm init 命令自动生成。 二、package.json文件配置详解 1.下面是最简单的的一个package.json 文件（只有两个数据，项目名称和项目版本，他们都是必须的，如果没有就无法install） { "name": "reactdemo", //项目名称 　"version": "1.0.0", //version是版本（遵守“大版本.次要版本.小版本”的格式） } 2.scripts "scripts": {// scripts指定了运行脚本命令的npm命令行缩写，比比如start指定了运行npm run start时，所要执行的命令。

import React from "react"; import ReactDom from "react-dom"; import {BrowserRouter,Switch,Route} from "react-router-dom"; import './style/index.scss' // 引入自定义好的组件 import Header from "./component/Header"; import Swiper from "./component/Swiper"; import Foot from "./component/Foot"; import Login from "./component/Login"; const MIUI = ()=> (<Swiper />) const login = ()=> (<Login />) const routes = ( // 路由容器 BrowserRouter中只能存在一个子元素 // 如有多个子元素，则需要一个父容器将多个子元素全部包裹，否则报错 <BrowserRouter> <div> <Header /> {/* 将每个路由都需要的组件写在Switch组件外，例如<Header /> 和 <Foot /> */} {/* 将需要路由的组件写在双标签Switch中，并使用单标签Route

今天跟大家分享下JS 之 图片编辑器插件的知识。 1 图片编辑器插件Filerobot Filerobot是一款js图片编辑器插件。Filerobot可以对图片进行修改尺寸，剪裁，旋转，以及使用内置的滤镜对图片进行过滤。 Filerobot-js图片编辑器插件的github网址为： 在页面中引入下面的文件： < script src = "js/filerobot-image-editor.min.js.js" > < / script > 2 初始化插件 filerbot的使用方法非常简单，实例化一个ImageEditor对象，然后通过它打开你想要编辑的图片即可。 const ImageEditor = new FilerobotImageEditor ( ) ; ImageEditor . open ( 'https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg' ) ; 3 作为React组件使用 安装： $ npm install -- save filerobot - image - editor 使用： import React , { useState } from 'react' ; import { render } from 'react-dom' ; import

新旧虚拟DOM应该如何比对呢？ react底层使用Diff（difference）算法来进行比对。我们知道，调用了setState方法时，数据（state，props）发生改变，就会进行比对。 下面我们先来看看setState方法。 setState方法是异步的，这样能够很好地提升react性能。假如我们要连续调用三次setState，变更三组数据，那么如果做三次虚拟DOM比对，更新三次页面。如果这三次调用的时间间隔非常短，这样是非常浪费性能的；react不会这样，它会把三个setState合并成一个，只做一次虚拟DOM的比对，更新一次页面。 我们再来看看Diff算法 Diff算法有个很重要的概念：同级比较。 首先会比较最顶层的虚拟DOM节点是否一致，如果一致的话，就继续比较下一层的节点；如果不一致的话，react就会把这个节点及其下面所有节点全部删掉，重新生成一遍新的DOM，然后用新的DOM替换原始页面的DOM。有人可能会说，这样性能不是会很低吗？如果除了这个最顶层节点不一致，下面都是一致的，这样整个替换，不会很浪费性能吗？其实，虽然可能会造成DOM重新渲染性能上的浪费，但比对的算法简单，由此比对速度也会很快，大大减少了比对算法上的性能消耗，所以采用同级比较的算法。 假如我们一个数组，数组中有5个数据，在页面第一次渲染的时候，我们把这5个数据映射成5个虚拟DOM节点

参考文章： https://blog.csdn.net/yede0632/article/details/80746264 最近在使用蚂蚁金服的dva脚手架以及ant design组件开发React项目，不得不说dva真的很优秀，很大程度上方便了React项目的开发，尤其需要Redux来管理状态以及处理异步请求，dva帮你集成了大部分你所需要的React组件，并使它们结合使用起来变得简单便捷。 但不可避免地，在开发中也会遇到一些问题，本文就记录下在IE兼容方面遇到的问题以及如何解决。 项目涉及到的模块版本： dva@2.3.1；@babel/polyfill@7.0.0-beta.46；roadhog@2.4.2(之后降级为2.4.1)；setprototypeof@1.1.0 项目起初是在Chrome上调试开发的，没有遇到什么问题，但项目需要兼容IE9，所以开始在IE上调试。 （1）Promise 未定义； 起初在IE11上调试，页面渲染是没有问题的，但是对于异步请求（项目中使用fetch调用），会有如下报错： 经过查资料，原来是webpack异步加载时，要求原生支持Promise，解决方法参考：https://www.cnblogs.com/Aoobruce/p/9322928.html （2）只引入Promise是不够的，IE10以下会报如下错误： （3