react

环境 React 16.9.0 React-Dom 16.9.0 前言 从下面代码的运行结果可以得出如下结论： setTimeout和原生事件中，可以立即拿到更新结果。也就是同步 在合成事件和生命周期中，不能立即拿到更新结果。也就是所谓的“异步” 在合成事件和生命周期中，如果对同一个值进行多次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行 class App extends React.Component { constructor () { super(); this.state = { counter: 0 }; } componentDidMount () { // 生命周期中调用 console.log( "componentDidMount before: " + this.state.counter); this.setState({ counter: this.state.counter + 1 }); // 此处不能实时更新 console.log( "componentDidMount after: " + this.state.counter); set Timeout(() => { // set Timeout中调用 console.log( "setTimeout before: " + this.state

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。 1. 用法 React.createContext const MyContext = React.createContext(defaultValue); 创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。 只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效。这有助于在不使用 Provider 包装组件的情况下对组件进行测试。注意：将 undefined 传递给 Provider 的 value 时，消费组件的 defaultValue 不会生效。 Context.Provider <MyContext.Provider value={/* 某个值 */}> 每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化。 Provider 接收一个 value 属性，传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据。 Context.Consumer

Vue.js面试题整理 一、什么是 MVVM ？ MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象（桥梁）。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 二、 mvvm 和 mvc 区别？它和其它框架（ jquery ）的区别是什么？哪些场景适合？ mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验

/* * @Description: Hook 是 React 16.8 的新增特性 这里看一些基础用法 动机: 1.在组件之间复用状态逻辑很难(由 providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”) 2.复杂组件变得难以理解 3.难以理解的 class (class不能很好的压缩，并且会使热重载出现不稳定的情况。因此，我们想提供一个使代码更易于优化的 API) 4.渐进策略 规则： 1.只能在函数最外层或者自定义的 Hook 中调用 Hook。不要在循环、条件判断或者子函数中调用 2.只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。 * @Version: 2.0 * @Autor: lhl * @Date: 2020-02-25 17:20:57 * @LastEditors: lhl * @LastEditTime: 2020-04-20 16:07:47 */ import React, { useState, useEffect } from 'react' import './App.css' ; function App() { // 声明一个新的叫做 “count” 的 state 变量 const [count, setCount] =

　　已经许久没有更新博客了，并不是疫情阻挡了我写作的步伐，只是写作已转移到word（整理一下去换稿酬，拿了稿酬可以去换酒钱）。如下图所示，书《Vue.2x实践指南》交稿快半年了，由于疫情原因，预计下个月底才能上架，《Javascript实训教程》已完成写稿60%，《React和Mogodb实训》筹划中。 　　最近工作上在做啥呢？我也没有闲着，这两天在做的东西： 1.在流程图上可以编辑数据，双击时，显示文本框，编辑完成之后，鼠标失去焦点，自动保存数据（ajax数据回发），其实都不难实现，可就是费时间，因为有很多个流程图。 2.做一个冷站监控界面，要支持控制设备状态（不同状态，不同颜色的图片）、停止的设备水流不动、界面数据实时刷新，点击设备弹窗设备实时数据详情、支持设备数量动态变化。调线费时间，也是有很多种类型的图。 等后面有时间的话，我再戏说这两个的具体实现，主要是基于vue和svg技术。 　　配置完成之后，系统图中的数据用websock实时刷新，水流线和走向，颜色运行状态，根据实时获取的数据动态变化，最终如下： 　　现在的前端发展很快，早已不复当年，有些开发人员觉得前端很简单，调用后端的接口，做一下界面和交互就可以了，那后端开发还只要写下CRUD的接口就行了呢。现在前端的各种语言和框架不断的学习后端的一些思想（主要是面向对象和各种设计模式、语法），让前端也能够适应各种大项目的开发

[TOC] 为何而写 　　以前没怎么写过技术类的文章，对于技术很多时候是现用现学，这样通常能解决遇到过的绝大多数问题，但也带来了一个弊端，那就是仅停留于解决问题的层面，而忽略了对技术背后的设计思想和设计理念进行深入的研究。虽然技术的发展日新月异，但那些终归只是由设计思想演绎出来的玩物，如果只是不断的去学习演绎出来的东西，而忽略了对思想的研究，就终究会陷入舍本逐末的恶性循环。 　　技术的提高离不开实践，实践有助于深化对技术的理解，但如果只实践而不加以总结的话也容易陷入只见树木不见森林的迷途。如果说实践是战术上的肉搏，那总结就是战略上的提炼，高屋建瓴，将实践中的精髓抽取出来，以达到去繁入简、返璞归真的境界。 　　 　　鉴于此，也就打算把学习、实践过的技术进行再次的学习、总结，并以博文的形式记录下来，这样一方面有助于理清思路，建立知识体系，另一方面更有助于深入对技术的理解和掌握，这也是我打算开始写技术文章的初衷。 　　 redux是什么 　　redux是一个库，用于管理状态，也可以说是一个容器，这个容器里容纳了各种需要的状态信息，并对外提供了一些方法来管理这些状态。目前redux更多的实践是和react结合，管理react的视图状态，但它也可以独立当作发布、订阅系统来使用。总之这些只是概念层面上的东西，实践完之后再来看概念就会容易理解，否则概念永远是模糊的。 redux的设计哲学

背景 redux作为前端状体管理中最亮眼的那个仔，非常有必要弄清楚他的原理。本文将从 源码结合实践 一起来重新认识redux。纯干货分享！！！ redux相对来讲是相对比较复杂的状态管理工具。实现一个全局状态管理工具，通过一个全局变量和一些方法，即可实现的东西，那么为什么redux需要提出action,store,dispatch,reducer等一系列概念？提出这些概念的作用或者说动机是什么？希望读者能从这篇文章中深入理解这些概念存在的价值和意义。 export const store = createStore( reducer, applyMiddleware(sagaMiddleware) ); 复制代码 我们经常看到这段代码，本文将从以createStore作为入口顺藤摸瓜带你认识整个框架。 createStore 首先来看createStore函数源码， 为了方便理解和阅读省略了很多无关的代码，大家在阅读的时候可以折叠起来看。 export default function createStore ( reducer, preloadedState, enhancer ) { // 如果只有两个参数，并且第二个参数是函数的话，将会传递给enhancer if ( typeof preloadedState === 'function' && typeof

前言 谈到 babel 肯定大家都不会感觉陌生。 桌面端组件库 Element ，借助 babel-plugin-component ，我们可以只引入需要的组件，以达到减小项目体积的目的。 使用 babel-polyfill ，开发者可以立即使用 ES 规范中的最新特性。 有了插件： transform-vue-jsx 、 react ，我们在 vue 和 react 开发中可以直接使用 JSX 编写模板。 组件能按需引入到底是怎么实现的？ Babel 的工作原理是怎样的呢？ 带着疑问，我们尝试对其原理深入探索和理解。 Babel 编译的三个阶段 Babel 是一个 JavaScript 编译器。 和大多数其他语言的编译器相似， Babel 的编译过程可分为三个阶段： 解析 Parse ：将代码字符串解析成抽象语法树（ AST ）。简单来说就是对 JS 代码进行词法分析与语法分析。 转换 Transform ：对抽象语法树进行转换操作。这里操作主要是添加、更新及移除。 生成 Generate ： 根据变换后的抽象语法树再生成代码字符串。 解析 Parse Babel 会把源代码抽象出来，变成 AST 。 可以看看 var answer = 6 * 7; 抽象之后的结果。 { "type" : "Program" , // 根结点 "body" : [ { "type" :

JavaScript与函数式编程 绝大多数编程语言都会有函数的概念（或者说所有的？我不太确定），他们都可以做出类似的操作： function(x) { return x * x } 但是Javascript更适合函数式编程，因为函数对于js来说，是 一等公民 。 我们可以把匿名函数赋值给一个变量，比如： let pow = function(x) { return x * x } 然后我们可以将这个函数赋值给另一个变量： let comeon = pow comeon(x) 这样做和直接调用 pow(x) 是一样的效果。 甚至于我们可以将函数作为参数传入另一个函数，这样，诸多小函数可以汇聚在一起，变得异常强大！ filter() OK，我们接下来看一些比较基础的例子。 首先是 filter() ，这是我最喜欢的函数之一。 filter() 方法会 创建一个新的数组 ，并且我们可以传入一个判断函数，将符合条件的元素，放入新的数组。 现在我们有一个数组，里面存放了很多游戏，每个元素都记录了该游戏需要花多少钱： let games = [ { name: '英雄联盟', cost: 45 }, { name: '穿越火线', cost: 888 }, { name: '魔兽世界', cost: 75 }, { name: '征途', cost: 1000000 } ] 然后我们需要找出

一. 什么是微前端？ Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks . — Micro Frontends 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 上面是阿里的qiankun框架中引用的微前端定义，微前端第一次提出于在2016年的底的 ThoughtWorks Technology Radar 。 那微前端出现为了解决什么问题呢？ 笔者看了很多资料认为微前端是为了解决不同版本及不同框架的多个应用共存及增量部署问题。 Tom Söderlund 在 这篇文章 中提到了如何实现微前端的七种方式： Here’s a few different approaches to implementing micro frontends: The best solution I’ve seen is the Single-SPA “meta framework” to combine multiple frameworks on the same page without refreshing the page (see this demo