react

(1) 把树形结构按照层级分解，只比较同级元素。 (2) 列表结构的每个单元添加唯一的 key 属性，方便比较。 (3) React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字） (4) 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制. (5) 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。 来源： https://www.cnblogs.com/crazycode2/p/10753190.html

代码分隔 我们现在大多数 React 项目都是以 Webpack 或者 Browserify 等将一堆的jsx文件组织一起，并且由一个类似 index.js 的入口文件串联起来的单页面 web 页面。 例如： // math.js export function add(a, b) { return a + b; } App: // app.js import { add } from './math.js'; console.log(add(16, 26)); // 42 打完包后： function add(a, b) { return a + b; } console.log(add(16, 26)); // 42 从这个例子可以看出，打完包后将所有的js都压缩到一个文件里了。随着项目越来越大，打包的文件也会越来越大，如果再引入一些第三方的 js 库，那就更庞大了。 接下来介绍一下如何将 React 代码分隔。（以下内容是16.6.0版本才支持的） Code Splitting 会帮助你的应用实现 lazy load . 这么做，即使没有减少整个项目的代码量，也会避免在项目初始加载时，加载没必须的 js ,从而使用项目性能有所提升。 import() 最简单直接的方式就是引入动态 import 实现代码分隔。 使用 动态 import 之前： import { add }

前言 react 元素，即JSX语法。 const Nav, Profile; // 输入(JSX): const app = <Nav color="blue"><Profile>click</Profile></Nav>; // 经过react编译解释之后，输出(JavaScript): const app = React.createElement( Nav, {color:"blue"}, React.createElement(Profile, null, "click") ); 可以看到，我们平时在react 中写的语法，最终是调用React的createElement方法。 那么createElement做了什么呢？ 直接查看源码，一探究竟。 实现步骤 获取react 内部的 key , ref 从props 上获取self, source，和其他属性 获取children ，如果是有多个children ，需要freeze 住 从type的defaultProps中填充缺失的属性 如果是开发环境，并且key 或 ref 存在，需要定义添加warning 信息 返回一个ReactElement 对象 好，开始实现 React.createElement = function(type, config, children) { var propName; var

In this lesson, we look at where we came from with refs in React. Starting with the deprecated string ref pattern, callback refs, and then how to use the new createRef() method in React 16.3. Additional Resources: refs and the dom You can use 'React.createRef()' to create a ref object. Then to access it from <obj>.current.<ref_name> import React from "react"; import { render } from "react-dom"; class App extends React.Component { fullName = React.createRef(); handleBlur = () => { this.fullName.current.blur(); }; handleFocus = () => { this.fullName.current.focus(); }; render() { return ( <div

前端工具中如果使用prettier进行代码格式化，eslint进行错误检测。对前端工作有极大的帮助 原则： prettier和eslint配置可以分成两种，一种是本地配置，一种是全局配置。VScode会检测文件夹根目录下有没有用户自定义的配置文件 .prettierrc.json和.eslintrc.js。如果有则会优先加载用户自定义的配置，如果没有则会加载VScode中的setting.json配置文件内的配置。 现在vscode安装prettier和eslint的插件，装使用人数最多的就行。注意的是，这个只是插件哦，在本地使用npm安装prettier和eslint .prettierrc.json文件配置： { "tabWidth" : 2 , "vetur.format.defaultFormatter.html" : "prettier" , "singleQuote" : true , "semi" : false } .eslintrc.js文件配置： module . exports = { root : true , parserOptions : { ecmaVersion : 6 , sourceType : 'module' , ecmaFeatures : { jsx : true , globalReturn : true , impliedStrict

Redux = Reducer + Flux。react在2013年开源的时候，facebook的团队除了放出react这个框架之外，他还放出了一个框架，叫做flux。flux这个框架实际上就是官方推出的最原始的辅助react使用的数据层框架。当然在他推出之后，业界的人在使用之后发现flux实际上有一些缺点。比如说他的公共存储区域store这个部分可以有很多个store所组成。这样的话，数据存储的时候，就可能存在一个数据依赖的问题。总之他不是特别的好用，于是有人，就把flux做了一个升级，升级成了我们目前使用的redux。在redux里面除了借鉴flux以前很多的设计理念之外呢，他又引入了一个reducer的概念。因为flux这个框架实际上目前已经有些过时了。所以就没必要去在意他的一些细节点了。 看上图，react components指的是页面上的每个组件。store指的是存储数据的公共区域。那么action creators 和 reduces又是什么？我们可以把react components当作是一个借书的用户。那么action creators就是我们要对管理说的要借什么书的那句话。store是图书馆的管理员，他接收到了要借什么书的一个信号，但是他没有办法知道图书馆的所有存储情况。可是他有一个记录本叫reducer，他通过查看记录本上的信息，知道这个书在哪

1.背景 本文中的自动化测试指的是单元测试 （UT），所谓单元测试也就是对每个单元进行测试，通俗的将一般针对的是函数，类或单个组件，不涉及系统和集成。单元测试是软件测试的基础测试，主要是用来验证所测代码是否和程序员的期望一致。 jest 是 facebook 开源的，用来进行单元测试的框架，功能比较全面，测试、断言、覆盖率它都可以，另外还提供了快照功能。 2.安装与配置 2.1安装 安装jest npm install --save-dev jest 安装babel-jest npm install --save-dev babel-jest 安装enzyme，需要根据项目的react版本来安装 对应的enzyme npm install --save-dev enzyme enzyme-adapter-react-16 安装react-test-renderer npm install --save-dev react-test-renderer 2.2配置 package.json 中添加： { "scripts": { "test": "jest" } } 执行npm run test 命令可在终端运行查看测试运行结果。 同时 Jest 还提供了生成测试覆盖率报告的命令，只需要添加上 --coverage 这个参数既可生成，再加上--colors可根据覆盖率生成不同颜色的报告

使用es6类的方法实现 /** *定义svg，png，jpeg图片移动端缩放功能 * * 可拖拽，看缩放 let zoomEl = document.getElementById('zoomEl'); let zoom = new Zoom({ el:zoomEl, options:{'top': zoomEl.offsetTop+50, 'left': zoomEl.offsetLeft+50, 'width': 400, 'height': 400 } }); zoom.setScale(1) * @class Zoom */ class Zoom{ /** *Creates an instance of Zoom. * @param {el,options:{top,left,width,height}} ops 参数配置 * @memberof Zoom */ constructor(ops){ //参数配置 this.ops = Object.assign({ minScale:1, maxScale:3, top:50, left:50, },ops.options) //展示的存放容器 this.el = ops.el; this.lastSapce = 0; this.touchState = 0; this.lastPoint = null; this

1 、 React 中的 key 值的作用是什么？ react中key值主要是用来识别组件的，key值相同时，在后期操作的时候，react在创建key值相同的组件时，遇到key值相同的，不会重新创建； 有了key值之后，key值与组件就会形成一种对应的关系，react会根据key值来绝对组件的创建销毁或者更新； 如果key值相同，组件的属性发生了变化，这时组件不会被销毁，只会对响应的属性进行更新； 如果key值不同，那么组件会先被销毁，之后再重新创建； 2、react中的性能优化有哪些方式？ 1）react通过操纵虚拟DOM，不进行节点操作，最大限度的减少与真实DOM的交互，这样可以提高性能； 2）shouldComponentUpdate，在这个生命周期内，我们可以进行新旧两个state和props的对比，如果数据没有发生变化，这个函数就会返回false，这样后面的生命周期就不会执行，render函数也不会重新渲染，这样也可以提升性能； 3）immutable，immutable的特点就是不可修改，改变它的任何数据时，都会重新生成一个新的对象，修改只会在新生成的对象上修改，原数据不会发生改变，这样就可以避免把所有节点都复制一遍，降低性能损耗； immutable的实现原理就是数据结构共享； 3、react中如何修改state中的数据？this.setState是同步的还是异步的

vue面试题 1.Vue和react的相同与不同 相同点： 都支持服务器端渲染 都有virtual DOM，组件化开发，通过props参数进行父子组件数据的传递，都实现webComponent规范 数据驱动视图 都有支持native的方案，react native，Vue的weex 都有管理状态，react有redux,vue有自己的VueX 不同点： react严格上只针对MVC的view层，Vue则是MVVM模式 virtual DOM不一样，Vue会跟踪每一个组建的依赖关系，不需要重新渲染整个组件树。而对于react而言，每当应用的状态被改变时，全部组件都会重新渲染，所以react中会需要shouldcomponentUpdate这个生命周期函数方法来进行控制 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即’all in js’; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件; .数据绑定: vue实现了数据的双向绑定,react数据流动是单向的 .state对象在react应用中不可变的,需要使用setState方法更新状态; 在vue中,state对象不是必须的,数据由data属性在vue对象中管理； 2