react

传统diff 通过循环递归对节点的依次对比，复杂度是O(n3) react diff react对传统diff进行了优化，将复杂度降为O(n) react基于这几个前提对diff进行了优化： 忽略跨层级操作，因为DOM节点跨层级操作很少。 不同类的组件，则会生成不同的树形结构，相同类的组件，会生成相似的树形结构。 对同一层级的一组子节点，可以通过唯一key进行区分。 1 tree diff 只会对相同层级的DOM节点进行比较，只需要一次遍历，便可以完成整棵树的遍历。如果节点不存在，则该节点及其子节点都会被删掉，对于不同层级的节点，只有创建和删除操作。 2 component diff 针对同类型组件，按照tree diff策略对比。如果开发人员确切知道virtual DOM没有变化，react提供的 shouldComponentUpdate() 方法可以直接省去tree diff。 针对不同类型组件，则直接判断该组件为dirty component，从而替换整个组件下的所有子节点。 3 element diff 当节点处于同一层级，可能除夕只需要对这些节点进行移动，不需要每次都删除创建，react剔除添加唯一key来区分。react通过判断key是否存在相同节点，如果存在，再进行判断进行移动操作。不存在再进行相应的创建删除。 与vue的diff区别 判断2个节点是否相同

摘要： 最近在上海找工作，发现Vue前景还不错，于是就打算先学习一下（之前了解过，但是一直没提到日程上）这篇随笔当是为了自己学习之后，做一个小的阶段性总结。希望本文的内容对于刚开始接触vue的朋友们有点帮助（曾经的我）。如有误导之处，希望大家帮忙指出。 正文： 　　一、Vue 2.0 　　　　吐槽： 目前市面上我所接触过的前端框架有 Angular React Vue 当然还有一些其他的，只是我都没怎么用过，不好多说。 　　　　　　　　Angular 　　　　　　　　　　我接触的第一个前端框架，对数据有良好的处理，但是学起来入手还行，深入的话成本大了一些。当时习惯使用JQuery 　　　　　　　　的我换成了这个新鲜的玩意确实还是用了一些时间，项目成型后，觉得用着还行。但是后来的Angular2.0 让我彻底的放弃了 　　　　　　　　Angular（个人想法），后来看到了移动端的热潮，但是Angular用在移动端的话，显得有些重了。这个时候React出现了。 　　　　　　　　React & React Native 　　　　　　　　　　号称仅次于原生的JS前端框架闪耀问世，由于有了些之前Angular的基础，学习这个要轻松一些，不得不说“盛名之下无 　　　　　　　　虚士”，视图的组件化和响应式无论是开发还是用户体验都是极好的。 　　　　　　　　Vue 　　　　　　　　　　Vue的出现

生命周期就是由生到死的过程。 react 组件的生命周期分为三个状态： Mounting： 已插入真实DOM Updating： 正在被渲染 Unmounting：已移除真实DOM 生命周期的方法有： componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。 componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。 shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。 componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。 componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

React Native app闪退 显示 “很抱歉， ‘xxx’ 无法运行” 这种情况一般是因为第三方库的配置有问题或者js 代码写的有问题 首先看看js代码是否有问题 去官方下载正确的代码 import React from 'react'; import { View, Text } from 'react-native'; import { createAppContainer } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; class HomeScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> </View> ); } } const AppNavigator = createStackNavigator({ Home: { screen: HomeScreen, }, }); export default createAppContainer(AppNavigator);

什么是 React.memo ？ React.memo 和 React.PureComponent 类似， React.PureComponent 在类组件中使用，而 React.memo 在函数组件中使用 看下面两个例子，有两个计数器组件，两个计数器的数据都来源于父组件，第一个计数器通过点击按钮数字会不断累加而发生改变，第二个计数器没有按钮控制数字改变。 const App = ( ) => { const [ count1 , setCount1 ] = React . useState ( 0 ) const [ count2 , setCount2 ] = React . useState ( 0 ) const increaseCounter1 = ( ) => { setCount1 ( count1 => count1 + 1 ) } return ( < > < button onClick = { increaseCounter1 } > Increase counter 1 < / button > < Counter value = { count1 } > Counter 1 < / Counter > < Counter value = { count2 } > Coutner 2 < / Counter > < / > ) } 计数器组件 const

create-react-app client --typescript 报错信息如下 error @typescript-eslint/eslint-plugin@2.10.0: The engine "node" is incompatible with this module. Expected version "^8.10.0 || ^10.13.0 || >=11.10.1". Got "10.0.0" error Found incompatible module. info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command. 解决方法是： 设置yarn如下： yarn config set ignore-engines true 来源： CSDN 作者： after you 链接： https://blog.csdn.net/gwdgwd123/article/details/104075536

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是否相同

文章转自： http://www.oschina.net/translate/vuejs-is-good-but-is-it-better-than-angular-or-rea Vue.js 是一个用来构建网页界面的 JavaScript 库。同其它的一些工具结合在一起，它也可以成为一个新“框架”。通过阅读我们最近一次在 ValueCoders 上发表的 文章 , 你会了解到 Vue.js 是顶级的 JavaScript 框架之一，它在许多场景中可以被用来替换 Angular 和 React。这就引出了本文要讨论的话题 “Vue.js 是不错，但能比 Angular 或者 React 更好么?” 相关文章: 为什么 JavaScript 编程语言是 Web 开发的未来趋势? 讨论之前，你可能从未听说或使用过 Vue.js，然后会寻思: 别闹了！也就是又一个 JavaScript 框架而已！我们考虑到了这个，不过，Vue.js 并不是一个新事物。它首次发布是在 2013 年，到如今在 GitHub 上已经收获了 31473 次收藏，下载量也很大。来看看下面这两张图片： 因此同其它框架相比，Vue.js 并不新，但其每个生命周期间的流行度却不会逊色。现在让我们来看看 Vue.js 的优势是什么。 Vue.js 为什么比较特别? Vue 最大优势就是它比较新颖，没历史包袱。在

代码分隔 我们现在大多数 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 Navigation 更新，createBottomTabNavigator，createStackNavigator无法继续在react-navigation直接引入，而是需要在新的包react-navigation-tabs和react-navigation-stack里引入，基本语法暂未发现变化； 旧版写法: 新版写法: 改成新版写法就可以了，正常来说这样是没问题了 但是我这里改完之后 项目运行还是报错createStackNavigator()has been moved to react-navigation-stack 全局搜索 createStackNavigator 发现 assets里面的index.android.bundle文件里面生成了之前的createStackNavigator导入信息 所以需要把这里的index.android.bundle文件删掉 重新生成一下该文件，生成方法： react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main