react

首先，我们来看看 React 在世界范围的热度趋势，下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比，蓝色的是 React，红色的是房价，很明显，人类对 React 的关注程度已经远远超过了对房价的关注。 从这些数据中，大家能看出什么？ 可以很明显的看出，我在一本正经的扯淡。 从2014年到现在，React、jQuery和 Angular 的热度趋势对比，可以很明显的看到（上图），React 在全球的热度趋势增长非常快。 上图是 React 在国内的百度搜索指数，是拿 React 和 Nodejs 做了个对比，可以看出 React 的关注度也已经逼近 nodejs。 虽然在关注总量上 React 还远不及 jQuery 和 Angular 等等，但它的增长幅度超乎你想象，你知道这意味着什么吗？这意味着关注 React，你就比大多数人走在了业界的前沿！ 那么React到底是什么鬼？ 引用官网的简介，“一个用来构建用户界面的javascript库”。 React 起源于 Facebook 的内部项目，因为 FB 对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 由于 React 的设计思想极其独特，属于革命性创新，性能出众

React组件的生命周期分为三个阶段： 1.组件初始化 Mounting 2.组件运行时 Updating 3.组件卸载时 Unmounting 组件初始化 1.constructor() constructor()中完成了React数据的初始化，它该构造方法接受一个props参数，必须在方法中首先调用super(props)才能保证props被传入组件中。 注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。 2.componentWillMount() 组件渲染之前调用，只会被调用一次。在这个方法里setState不生效，不会触发re-render，而是会进行state合并。实际开发中很少用这个方法，因为都可以放到constructor()中来处理 组件运行时 3.componentDidMount() 组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染 4.componentWillReceivePorps(nextProps) 组件初始化时不调用，组件就接收新props时调用，该函数接收一个props，为接收到的参数 5.shouldComponentUpdate(nextProps, nextState) 组件接受新的state或者props时调用

Virtual DOM 毫无疑问是 React 的精髓。 可能很多人包括我看完官方文档之后对Virtual DOM的理解就是： 它通过JS对象模拟原生DOM，加上DOM Diff 极大提升了DOM操作的性能。 这里的感觉就是这玩意最大的意义在于性能的提升。因为JS对象比DOM对象性能高。 如果这样理解其实完全忽略了 Virtual DOM 最精髓最颠覆性的意义：抽象。 Virtual DOM 最大的意义绝不是提升性能，而是他对DOM进行了一层抽象。当我们在浏览器中使用 React的时候，感觉不是特别明显，毕竟我们写的DOM标签跟原生的没什么区别，并且最终都被渲染成了DOM。 但是react native 的推出已经完全说明了 Virtual DOM 的颠覆性意义：它抽象了DOM的具体实现。 在浏览器中，Virtual DOM最终编译成了DOM，但是在 iOS中，Virtual DOM却完全可以编译成 oc 中的组件，甚至在安卓、windows、mac osx 中都完全可以编译成对应的UI组件。 在没有Virtual DOM之前，我们的代码中JS逻辑和UI是完全耦合的，不具有任何可移植性。 使用了Virtual DOM之后我们的代码编程这样了： 注意上图分为三个部分： 1，其中蓝色部分是JS业务逻辑，完全可以借助Node移植到任意平台上。 2，其中红色部分是 Virtual DOM

在Web开发中，需要将数据的变化实时反映到UI上，这时就需要对DOM进行操作，但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因，为此，React引入了虚拟DOM（Virtual DOM）的机制。 一、什么是虚拟DOM？ 在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为virtual DOM。 虚拟DOM是React的一大亮点，具有batching(批处理)和高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面，由虚拟 DOM来确保只对界面上真正变化的部分进行实际的DOM操作。在实际开发中基本无需关心虚拟DOM是如何运作的，但是理解其运行机制不仅有助于更好的理解React组件的生命周期，而且对于进一步优化 React程序也会有很大帮助。 二、虚拟DOM VS 直接操作原生DOM？ 如果没有 Virtual DOM，简单来说就是直接重置 innerHTML。这样操作，在一个大型列表所有数据都变了的情况下，还算是合理，但是，当只有一行数据发生变化时，它也需要重置整个 innerHTML，这时候显然就造成了大量浪费。 比较innerHTML 和Virtual DOM 的重绘过程如下： innerHTML: render html string + 重新创建所有 DOM 元素

React在前端界一直很流行，而且学起来也不是很难，只需要学会JSX、理解 State 和 Props ，然后就可以愉快的玩耍了，但想要成为React的专家你还需要对React有一些更深入的理解，希望本文对你有用。 这是Choerodon的一个前端页面 在复杂的前端项目中一个页面可能包含上百个状态，对React框架理解得更精细一些对前端优化很重要。曾经这个页面点击一条记录展示详情会卡顿数秒，而这仅仅是前端渲染造成的。 为了能够解决这些问题，开发者需要了解React组件从定义到在页面上呈现（然后更新）的整个过程。 React在编写组件时使用混合 HTML 和 JavaScript 的一种语法（称为JSX）。 但是，浏览器对JSX及其语法一无所知，浏览器只能理解纯 JavaScript ，因此必须将JSX转换为 HTML 。 这是一个div的JSX代码，它有一个类和一些内容： <div className='cn'> 文本 </div> 在React中将这段jsx变成普通的js之后它就是一个带有许多参数的函数调用： React.createElement( 'div', { className: 'cn' }, '文本' ); 它的第一个参数是一个字符串，对应html中的标签名，第二个参数是它的所有属性所构成的对象，当然，它也有可能是个空对象，剩下的参数都是这个元素下的子元素

由于平时工作中使用 vue 比较多，故而在全局状态管理上必然离不开 vuex 这个依赖库，使用起来尤为顺手。最近在搭建公司前端的配置中心时，考虑到维护性和可扩展性的需求，想使用 typescript 作为基础，权衡之下选择了对 typescript 支持更友好的 react 作为基础框架，那么除了 mobx 之外，也尝试了 redux ，虽说和 vuex 的原理差不多，但是用起来却十分繁琐，于是看了一下其他大佬的文章，发现结合 react 的 hook 是可以自己创建一个轻量级的’redux’来管理一些比较顶层的状态。 一、技术准备 要模仿redux的store，其实依赖了react的context api，由于react的一下props经常面临多层透传的情况，导致维护性不高，于是官方提供了context的上下文api，让所有子组件共享全局的状态。 因此，要完成这个“轻量版”的redux，需要提前了解一下的知识点： Context使用说明 useContext用法 useReducer用法 不熟练的小伙伴，建议点击以上传送门提前熟悉了解一下API的用法，对于已经理解并且使用了一段时间的小伙伴，相信下面的内容也不用看了，凭着自己的理解与思考其实很容易就能写出一个非常轻量的‘redux’ 二、模拟Provider组件 在redux的使用中

React 的 state 1.初始化 state onstructor(props) { super(props) this.onClickButton = this.onClickButton.bind(this); this.state = { count: props.initValue || 0 } } 　　因为count是一个可选的 props，要考虑到父组件没有指定这个 props值的情况， 我们优先使用传入属性的 count，如果没有，就使用默认值 0。组件的 state必须是一个 JavaScript对象，不能是 string或者 number这样的简单数据 类型，即使我们需要存储的只是一个数字类型的数据，也只能把它存作 state 某个字段对 应的值， Counter 组件里，我们的唯一数据就存在 count 字段里 。 由于在 PropType声 明中没有用 isRequired要求必须有值的 prop，例如上面的 initValue，我们需要在代码中判断所给 prop值是否存在，如果不存在，就给一个默认的 初始值 。 不过，让这样的判断逻辑充斥在我们组件的构造函数之中并不是一件美观的事 情，而且容易有遗漏 。 我们可以用 React 的 defaultProps 功能，让代码更加容易读懂 。 给 Counter组件添加 defaultProps 的代码如下:

本文由云+社区发表 作者：Dan Abramov 接触 React Hooks 一定时间的你，也许会碰到一个神奇的问题: setInterval 用起来没你想的简单 。 Ryan Florence 在 他的推文 里面说到： 不少朋友跟我提起，setInterval 和 hooks 一起用的时候，有种蛋蛋的忧伤。 老实说，这些朋友也不是胡扯。刚开始接触 Hooks 的时候， 确实 还挺让人疑惑的。 但我认为谈不上 Hooks 的毛病，而是 React 编程模型 和 setInterval 之间的一种模式差异。相比类（Class），Hooks 更贴近 React 编程模型，使得这种差异更加突出。 虽然有点绕，但是让两者和谐相处的方法，还是有的。 本文就来探索一下， 如何 让 setInterval 和 Hooks 和谐地玩耍， 为什么 是这种方式，以及这种方式给你带来了什么 新能力 。 声明：本文采用循序渐进的示例来解释问题。所以有一些示例虽然看起来可以有捷径可走，但是我们还是一步步来。 如果你是 Hooks 新手，不太明白我在纠结啥，不妨读一下 React Hooks 的 介绍 和 官方文档 。本文假设读者已经使用 Hooks 超过一个小时。 代码呢？ 通过下面的方式，我们可以轻松地实现一个每秒自增的计数器： import React, { useState, useEffect,

说明 通过yo创建React项目, 并且学习React和Redux 环境要求 环境要求 node js环境 ,请安装最新node js 版本 打开cmd(win下)或者终端(mac & linux)执行npm -v 后可以看到显示版本号, 以后所有执行都是指在命令行或者终端下执行 安装Yeoman 、Bower、Grunt 、Gulp，Mac下可能需要sudo 安装,执行下面命令 npm install -g yo bower grunt-cli Yeoman安装和使用详解 构建一个项目 执行 yo 选择 Install a generator 搜索关键字 react , 稍等片刻(根据网络环境)会出现一些列表, 选择安装 React Webpack 退出yo, 创建一个目录, mkdir reactTest, 进入 cd reactTest 执行yo, 选择React Webpack, 可以给project起名或者用默认的 选择css语言, 默认即可 是否打开 postcss , 根据需求选择 y or N 然后等待项目自动构建, 此时会从网络下载相关的依赖库, 网络环境会影响时间 当看到下面图案时就完成了, 如果错误可以删除node_modules文件夹, 然后执行 npm install 重新下载依赖 运行项目 npm run start 即可运行项目 打开package

React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 React 中的元素、组件、实例和节点，是React中关系密切的4个概念，也是很容易让React 初学者迷惑的4个概念。现在，我就来详细地介绍这4个概念，以及它们之间的联系和区别，满足喜欢咬文嚼字、刨根问底的同学的好奇心。 元素 (Element) React 元素其实就是一个简单JavaScript对象，一个React 元素和界面上的一部分DOM对应，描述了这部分DOM的结构及渲染效果。一般我们通过JSX语法创建React 元素，例如： const element = <h1 className='greeting'>Hello, world</h1>; element是一个React 元素。在编译环节，JSX 语法会被编译成对React.createElement()的调用，从这个函数名上也可以看出，JSX语法返回的是一个React 元素。上面的例子编译后的结果为： const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); 最终，element的值是类似下面的一个简单JavaScript对象： const element