jsx

React 与 Vue 对比 什么是模块化: 从代码的角度, 去分析问题, 把我们编程的业务逻辑, 分割到不同的模块中进行开发, 这样能够方便代码的重用 ; 什么是组件化: 从 UI 的角度去分析问题, 把一个页面拆分为一些互不相干的小组件, 随着项目的开发, 手里的组件会越来越多, 最后如果要实现一个页面, 可能直接把现有的组件那过来进行拼接, 就能快速得到一个完整的组件, 这样方便了 UI 组件的重用 ; Vue如何实现组件化: .vue 模板文件, 浏览器不识别, 在运行前会预先编译成真正的组件 React如何实现组件化: 直接使用 JS 代码的形式, 去创建你想要的组件 React 中几个核心概念 虚拟Dom (Virtual Document Object Model) DOM的本质是什么: 就是用 JS 表示的 UI 元素 ; DOM和虚拟DOM的区别: DOM是浏览器中JS提供功能, 所以只能使用浏览器提供固定的 API 操控 ; 虚拟DOM并不是由浏览器提供的, 而是我们手动模拟实现的, 类似于浏览器中的DOM, 但是有着本质的区别 ; 为什么要实现虚拟DOM: 为了实现DOM节点的高效更新 ; 创建 React 项目 安装相关包 // 这个包是专门用来创建 React 组件, 组件生命周期等 npm install react -S // 这个里面主要封装了和

1.什么是React？ React是一个前端框架，来自于facebook，适合于大型项目，效率高，基于组件化的方式开发。 React是一个基于组件化开发的前端框架，是facebook于13年5月开始开源的一个框架，效率非常高， 适合于大型项目，用于制作单页面SPA应用。 2.React环境搭建 1）传统<script>标签引入资源（适合初学者入门） 2）手动npm安装 3）yeoman脚手架（推荐） 安装yeoman cnpm i -g yo 安装生成器 cnpm i -g generator-react-webpack 创建 yo react-webpack 终止默认安装依赖，安装依赖 cnpm i 4）运行项目 npm start //自动查找当前目录下的package.json中的start命令，执行该命令 npm run dist //打包命令，将制作完成的项目导出 3.JSX语法 1).什么是JSX? JSX是React中的特殊语法，是js的一种补充，可以直接在js代码中编写html标签，并不能直接运行， 需要使用babel编译成ES5代码后才能执行。 2).JSX表达式 <h1>hello</h1> <h1>{str}</h1> <h1>{运算符}</h1> <h1 {展开运行符}></h1> <h1 style={样式对象}></h1> {/* JS的注释*/} 3)

在写React的时候，你可能会写类似这样的代码 import React from 'react' function A() { // ...other code return <h1>前端桃园</h1> } 你肯定疑惑过，上面的代码都没有用到React，为什么要约会React呢？ 如果你把 import React from ‘react’ 减少掉，将会报以下这样的错误： 那么究竟是哪里用到了这个React，导致我们约会React会报错呢，不懂这个原因，那么就是JSX没有搞得太明白。 你可以讲上面的代码（忽略导入语句）放到在线babel里进行转化一下，发现babel会把上面的代码转化成： function A() { // ...other code return React.createElement("h1", null, "前端桃园"); } 因为从本质上讲，JSX只是为 React.createElement(component, props, ...children) 函数提供的语法糖。 为什么要用className而不用class1.React一开始的理念是想与浏览器的DOM API保持一直而不是HTML，因为JSX是JS的扩展，而不是代替HTML的，这样会和元素的创建更为接近。在元素上设置 class 需要使用 className 这个API：　　 const

/*--> */ /*--> */ 在create-react-app创建的老项目上面集成jest-enzyme发现用上一篇博客的配置报错： 　　看报错知道是上篇博客的.babelrc.js的配置没有生效。 　　使用npm run eject指令将create-react-app项目的配置暴露出来，命令执行结果： Copying files into D:\oy\temp\xxx Adding \config\env.js to the project Adding \config\paths.js to the project Adding \config\polyfills.js to the project Adding \config\webpack.config.dev.js to the project Adding \config\webpack.config.prod.js to the project Adding \config\webpackDevServer.config.js to the project Adding \config\jest\cssTransform.js to the project Adding \config\jest\fileTransform.js to the project Adding \scripts\build.js

1.组件通信的分类 1.1 父子组件通信 （使用props来实现） -在父组件模板中，使用单项数据绑定将父组件数据赋值给子组件的自定义属性； -子组件通过props属性来接收绑定在自己身上的自定义属性，这个属性在子组件模板中相当于全局变量，可以直接使用； -子组件只可以使用接收到的数据，不可以更改， ->单项数据流的原因； 1.2 子父组件通信 （使用自定义事件 / $emit 实现） 在父组件模板中，使用自定义事件绑定父组件的方法 1.3 非父子组件通信 （ref链实现 bus事件总线实现） 1.4 路由通信 1.5 多组件状态共享 2.对VDOM diff算法和JSX的理解： 2.1 VDOM（虚拟DOM） Vue性能很好的原因：是因为Vue使用了VDOM; VDOM性能高的原因：VDOM操作减少了真实DOM的操作，大大缩短了时间，减少内存消耗； VDOM又是什么：VDOM是一个js对象模型，用于模拟真实DOM结构； VDOM的渲染过程如下： -通过数据第一次生成VDOM, -通过render函数将VDOM渲染成真实DOM， -当数据改变时，重新生成VDOM， -通过diff算法重新对比新旧VDOM，获得patch补丁对象， -根据patch补丁对象再次渲染为真实DOM； 2.2 diff算法： -diff算法来源于后端，应用于比较两个文件的不同，会生成一个补丁对象

一、创建项目 新建一个文件，然后创建一个 index.html 文件，唉，看了react的官网教程，才知道什么叫做操蛋，妈的，简直就是东拉西扯，东拼西凑啊，根本不知道他在扯什么犊子。 官网教程 Hello World ，跟着写，根本不知道写出个什么玩意儿，只能找资料看 引入 创建完成之后，就需要在html文件里面引入react.js文件，练习就用 development ，生成就用 production CDN链接 // react核心 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> // react的DOM操作 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> 关键 关键 关键 在完成上面的操作后，还需要引入一个babel.js文件，这个文件用来解析jsx语法的，没有这个玩意儿，啥也弄不了，而且在页面写script标签的时候，type一定要写成 type="text/babel" ，否则啥也弄不了 // 生成环境中一定不要使用，这种方式效率很地下 <script src="https://unpkg.com

V2EX 这两天有一篇这样的帖子： 《说句实话，我后端现在已经看不懂前端了，太难了》 原文内容是： 看不懂惹，肿么办，最近在学 react，完全抓瞎。 然后又附加了内容： 一直用的 jquery，手动找位置然后对应 dom 操作，现在各种前端各种依赖，一会 route 一会 webpack 的 给爷整蒙了都。 类似这样的帖子多年来数不胜数，但这次评论区的评论比较典型，所以我决定这次不再沉默。当然，本文并非针对帖子作者。 对于那些抱怨前端「看不懂」的网友，我们应该问他们一个问题：为什么前端就应该是谁都能看懂？ 这些网友从来不会抱怨别的领域的代码看不懂，比如他们不会说「我一个前端已经看不懂后端了」，或者「我一个后端已经看不懂 iOS 」了。 所以在这些网友心中，前端代码就是要谁都看得懂才是正常的。因为谁都应该看得懂 HTML, 谁都看得懂 CSS. 显然，这群人对前端的认知还活在过去，他们一边享受着用 Web 技术做出来应用，一边意淫着这些包含复杂业务逻辑的 Web 应用靠 HTML 和 Vanilla JS (原生 JS) 就能写成。 换句话说，这群人最大的问题在于，他们意识不到 GUI 开发 (Graphic User Interface Programming) 是一个从图形界面被发明开始就一直在被研究的独立领域，而 Web 前端只是 GUI 开发的其中一个分支而已。

摘要： 很多值得了解的细节。 原文： React入门看这篇就够了 作者： Random Fundebug 经授权转载，版权归原作者所有。 React 背景介绍 React 入门实例教程 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 什么是React A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 用来构建UI的 JavaScript库 React 不是一个 MVC 框架，仅仅是视图（V）层的库 React 官网 React 中文文档 特点 使用 JSX语法 创建组件，实现组件化开发， 为函数式的 UI 编程方式打开了大门 性能高的让人称赞：通过 diff算法 和 虚拟DOM 实现视图的高效更新 HTML仅仅是个开始 > JSX --TO--> EveryThing - JSX --> HTML - JSX --> native ios或android中的组件（XML） - JSX --> VR - JSX --> 物联网 为什么要用React 使用 组件化 开发方式，符合现代Web开发的趋势 技术成熟，社区完善，配件齐全，适用于大型Web项目