jsx

作者： 胡子大哈 原文链接： http://huziketang.com/books/react/lesson13 转载请注明出处，保留原文链接和作者信息。 列表数据在前端非常常见，我们经常要处理这种类型的数据，例如文章列表、评论列表、用户列表…一个前端工程师几乎每天都需要跟列表数据打交道。 React.js 当然也允许我们处理列表数据，但在使用 React.js 处理列表数据的时候，需要掌握一些规则。我们这一节会专门讨论这方面的知识。 渲染存放 JSX 元素的数组 假设现在我们有这么一个用户列表数据，存放在一个数组当中： const users = [ { username: 'Jerry', age: 21, gender: 'male' }, { username: 'Tomy', age: 22, gender: 'male' }, { username: 'Lily', age: 19, gender: 'female' }, { username: 'Lucy', age: 20, gender: 'female' } ] 如果现在要把这个数组里面的数据渲染页面上要怎么做？开始之前要补充一个知识。之前说过 JSX 的表达式插入 {} 里面可以放任何数据，如果我们往 {} 里面放一个存放 JSX 元素的数组会怎么样？ ... class Index extends

项目常用eslint配置（Vue/React/TypeScript） 记录一下常用的eslint配置。 Vue项目常用eslint配置 需要安装依赖（Vue这里使用standard扩展和vue插件，所以需要安装) { "devDependencies": { "babel-eslint": "^10.0.2", "eslint": "^6.1.0", "eslint-config-imperative-es6": "^2.1.0", "eslint-config-standard": "^10.2.1", "eslint-plugin-import": "^2.17.2", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.7.1" // vue插件 } } .eslintrc.js文件配置 // https://eslint.org/docs/user-guide/configuring module.exports = { // 默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。ESLint 一旦发现配置文件中有 "root": true

作者 | Bruno Couriol 译者 | 张卫滨 按照规划，Vue.js 框架的主迭代版本将在 2020 年第一季度发布，在 VueConf 多伦多会议 上，Vue.js 的创始人兼项目领导者尤雨溪 讨论了 Vue 3 背后的设计理念以及新版本中添加的最新特性。 尤雨溪首先提到，与其他流行的框架不同，Vue 与任何公司都没有关联关系，因此 Vue 的开发是由 Vue 开发者社区以及如何更好地满足他们的需求来驱动的。随着 Vue 社区的发展，它也变得多样化起来。尤雨溪将只具有基础 HTML/CSS 知识的初学者、从 jQuery 转移过来的专业人士、从其他框架迁移过来的老手、寻找前端解决方案的后端工程师以及处理大规模软件的架构师进行了识别和区分。 开发社区中人群的多样性其实对应了框架使用场景的多样性。有些开发人员希望将交互性引入到遗留应用中，而有些人则只是想要处理一个一次性的项目，这样的项目有快速的交付周期，但是在维护方面无需过多关注。针对这个话题，架构师想要处理的可能是一个要持续数年的大规模项目，而且在项目的生命周期之内，必然要面对开发人员的变动。 因此，Vue 在设计自身框架时需要面对受众和使用场景多样化的挑战，这必然会导致一定的折衷。Vue 3 背后的一个核心驱动力在于，尽管开发人员都很欣赏 Vue 2 API 易于学习的特点，但是同样的 API

① 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,j 写在同一个文件; ④ 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的 ⑤ state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理 来源： oschina 链接： https://my.oschina.net/u/560237/blog/3189818

/*--> */ /*--> */ 一、 choosing the type at runtime import React from 'react'; import { PhotoStory, VideoStory } from './stories'; const components = { photo: PhotoStory, video: VideoStory }; function Story(props) { // Wrong! JSX type can't be an expression. return <components[props.storyType] story={props.story} />; } 为了解决这个问题，我们将其赋值给首字母大写的变量 import React from 'react'; import { PhotoStory, VideoStory } from './stories'; const components = { photo: PhotoStory, video: VideoStory }; function Story(props) { // Correct! JSX type can be a capitalized variable. const SpecificStory = components[props

　　很久就期待学习react了，惰性，一直都没有去翻阅react的资料，最近抽空，简单的了解了一下react，先记录一下，后续慢慢的学习。 一、ReactJS简介 　　React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 　　ReactJS官网地址：http://facebook.github.io/react/ 　　Github地址：https://github.com/facebook/react 二、ReactJS特点 　　React 的核心思想是：封装组件。 　　各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。 　　基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素，然后操作 DOM 去更改 UI。基于这些概念：组件，JSX，Virtual DOM，Data Flow 　　 组件 　　React 应用都是构建在组件之上。 　　上面的 HelloMessage 就是一个 React 构建的组件，最后一句 render 会把这个组件显示到页面上的某个元素 mountNode 里面，显示的内容就是 <div>Hello John</div>。 props

目录 1.React框架的介绍 2.准备工作 2.1 安装Node.js 2.2 创建工程 2.3 用VSCode 打开my-app文件夹 2.4 运行项目 npm start npm test npm run build npm run eject 3. JSX表达式和React基本理念 3.1 JSX 的基本结构 3.2 JSX的运行原理 3.3 JSX的基本语法 3.4 JSX 防止注入攻击 3.5 JSX中使用样式 3.6 JSX添加注释 4. React元素渲染和更新 4.1 元素渲染 4.2 元素更新 5. React中的函数(组件)和参数(props) 5.1 函数组件和class组件 5.2 组件渲染 5.3 组合组件 5.4 参数的不变性 1.React框架的介绍 React、Angular、Vue.js是三个主要的前端框架，从市场占有量来看React，Vue.js算是并驾齐驱，Angular则要明显少于前两者，好像阿三程序员用的比较多。三者的基本介绍可以看这个： React、Angular、Vue.js：三者完整的比较指南 。在Vue的中文官方网站上还有vue与React和Angular的详细对比： Vue对比其它框架 。关于各个框架的介绍我就不多说了，网上很多博文有详细分析，我目前主要学习React，所以只写了React方面的东西，这里贴一下React的中文

React 主要有四个主要内容构成，下面分别来介绍一下： 第1章 1、 Virtual DOM 1.1、 虚拟 DOM 是 React 的基石。 之所以引入虚拟 DOM ，一方面是性能的考虑。 Web 应用和网站不同，一个 Web 应用 中通常会在单页内有大量的 DOM 操作，而这些 DOM 操作很慢。 在 React 中，应用程序在虚拟 DOM 上操作，这让 React 有了优化的机会。简单说， React 在每次需要渲染时，会先比较当前 DOM 内容和待渲染内容的差异， 然后再决定如何最优地更新 DOM 。这个过程被称为 reconciliation 。 除了性能的考虑， React 引入虚拟 DOM 更重要的意义是提供了一种一致的开发方 式来开发服务端应用、 Web 应用和手机端应用： 因为有了虚拟 DOM 这一层，所以通过配备不同的渲染器，就可以将虚拟 DOM 的内容 渲染到不同的平台。而应用开发者，使用 JavaScript 就可以通吃各个平台了。 相当棒的思路！ 1.2 、Virtual DOM 速度快的说明 在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何 进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。React为此引入了虚拟DOM（Virtual DOM

首先，我们来看看 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 的设计思想极其独特，属于革命性创新，性能出众