React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
什么是ReactA JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
用来构建UI的 JavaScript库React 不是一个 MVC 框架，仅仅是视图（V）层的库React 官网React 中文文档特点1 使用 JSX语法 创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门2 性能高的让人称赞：通过 diff算法 和 虚拟DOM 实现视图的高效更新3 HTML仅仅是个开始> JSX --TO--> EveryThing- JSX --> HTML- JSX --> native ios或android中的组件（XML）- JSX --> VR- JSX --> 物联网为什么要用React1 使用组件化开发方式，符合现代Web开发的趋势2 技术成熟，社区完善，配件齐全，适用于大型Web项目（生态系统健全）3 由Facebook专门的团队维护，技术支持可靠4 ReactNative - Learn once, write anywhere: Build mobile apps with React5 使用方式简单，性能非常高，支持服务端渲染6 React非常火，从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目React中的核心概念1 虚拟DOM（Virtual DOM）2 Diff算法（虚拟DOM的加速器，提升React性能的法宝）虚拟DOM（Vitural DOM）React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率为什么用虚拟dom，当dom反生更改时需要遍历 而原生dom可遍历属性多大231个 且大部分与渲染无关 更新页面代价太大
如何实现一个 Virtual DOM 算法理解 Virtual DOMVituralDOM的处理方式1 用 JavaScript 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中2 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异3 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了Diff算法Reconciliation diffdiff算法 - 中文文档不可思议的 react diffReact diff 算法当你使用React的时候，在某个时间点 render() 函数创建了一棵React元素树，在下一个state或者props更新的时候，render() 函数将创建一棵新的React元素树，React将对比这两棵树的不同之处，计算出如何高效的更新UI（只更新变化的地方）React中有两种假定：
1 两个不同类型的元素会产生不同的树(根元素不同结构树一定不同)2 开发者可以通过key属性指定不同树中没有发生改变的子元素Diff算法的说明 - 1如果两棵树的根元素类型不同，React会销毁旧树，创建新树// 旧树 // 新树 执行过程：destory Counter -> insert CounterDiff算法的说明 - 2对于类型相同的React DOM 元素，React会对比两者的属性是否相同，只更新不同的属性当处理完这个DOM节点，React就会递归处理子节点。// 旧// 新只更新：className 属性// 旧// 新只更新：color属性Diff算法的说明 - 31 当在子节点的后面添加一个节点，这时候两棵树的转化工作执行的很好// 旧 first second// 新 first second third执行过程：React会匹配新旧两个first，匹配两个second，然后添加 third tree2 但是如果你在开始位置插入一个元素，那么问题就来了：// 旧 Duke Villanova// 新 Connecticut Duke Villanova在没有key属性时执行过程：React将改变每一个子删除重新创建，而非保持 Duke 和 Villanova 不变key 属性为了解决以上问题，React提供了一个 key 属性。当子节点带有key属性，React会通过key来匹配原始树和后来的树。// 旧 Duke Villanova// 新 Connecticut Duke Villanova执行过程：现在 React 知道带有key '2014' 的元素是新的，对于 '2015' 和 '2016' 仅仅移动位置即可 说明：key属性在React内部使用，但不会传递给你的组件推荐：在遍历数据时，推荐在组件中使用 key 属性：{item.name}注意：key只需要保持与他的兄弟节点唯一即可，不需要全局唯一注意：尽可能的减少数组index作为key，数组中插入元素的等操作时，会使得效率底下React的基本使用安装：npm i -S react react-domreact：react 是React库的入口点react-dom：提供了针对DOM的方法，比如：把创建的虚拟DOM，渲染到页面上// 1. 导入 reactimport React from 'react'import ReactDOM from 'react-dom'// 2. 创建 虚拟DOM// 参数1：元素名称 参数2：元素属性对象(null表示无) 参数3：当前元素的子元素string||createElement() 的返回值const divVD = React.createElement('div', { title: 'hello react'}, 'Hello React！！！')// 3. 渲染// 参数1：虚拟dom对象 参数2：dom对象表示渲染到哪个元素内 参数3：回调函数ReactDOM.render(divVD, document.getElementById('app'))createElement()的问题说明：createElement()方式，代码编写不友好，太复杂var dv = React.createElement( "div", { className: "shopping-list" }, React.createElement("h1",null,"Shopping List for " ), React.createElement("ul",null,React.createElement( "li", null, "Instagram"),React.createElement( "li", null, "WhatsApp") ))// 渲染ReactDOM.render(dv, document.getElementById('app'))JSX 的基本使用注意：JSX语法，最终会被编译为 createElement() 方法推荐：使用 JSX 的方式创建组件JSX - JavaScript XML安装：npm i -D babel-preset-react （依赖与：babel-core/babel-loader）注意：JSX的语法需要通过 babel-preset-react 编译后，才能被解析执行/* 1 在 .babelrc 开启babel对 JSX 的转换 */{ "presets": ["env", "react" ]}/* 2 webpack.config.js */module: [ rules: [{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, ]]/* 3 在 js 文件中 使用 JSX */const dv = ( Hello JSX!)/* 4 渲染 JSX 到页面中 */ReactDOM.render(dv, document.getElementById('app'))JSX的注意点注意 1: 如果在 JSX 中给元素添加类, 需要使用 className 代替 class
类似：label 的 for属性，使用htmlFor代替注意 2：在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 {} 中间写 JS代码即可注意 3：在 JSX 中只能使用表达式，但是不能出现 语句！！！注意 4：在 JSX 中注释语法：{/* 中间是注释的内容 */}React组件React 组件可以让你把UI分割为独立、可复用的片段，并将每一片段视为相互独立的部分。组件是由一个个的HTML元素组成的概念上来讲, 组件就像JS中的函数。它们接受用户输入（props），并且返回一个React对象，用来描述展示在页面中的内容React创建组件的两种方式1 通过 JS函数 创建（无状态组件）2 通过 class 创建（有状态组件）函数式组件 和 class 组件的使用场景说明：1 如果一个组件仅仅是为了展示数据，那么此时就可以使用 函数组件2 如果一个组件中有一定业务逻辑，需要操作数据，那么就需要使用 class 创建组件，因为，此时需要使用 stateJavaScript函数创建注意：1 函数名称必须为大写字母开头，React通过这个特点来判断是不是一个组件注意：2 函数必须有返回值，返回值可以是：JSX对象或null注意：3 返回的JSX，必须有一个根元素注意：4 组件的返回值使用()包裹，避免换行问题function Welcome(props) { return (// 此处注释的写法{/* 此处 注释的写法 必须要{}包裹 */} Shopping List for {props.name} InstagramWhatsApp)}ReactDOM.render( , document.getElementById('app'))class创建在es6中class仅仅是一个语法糖，不是真正的类，本质上还是构造函数+原型 实现继承// ES6中class关键字的简单使用// - **ES6中的所有的代码都是运行在严格模式中的**// - 1 它是用来定义类的，是ES6中实现面向对象编程的新方式// - 2 使用`static`关键字定义静态属性// - 3 使用`constructor`构造函数，创建实例属性// - [参考](http://es6.ruanyifeng.com/#docs/class)// 语法：class Person { // 实例的构造函数 constructor constructor(age){// 实例属性this.age = age } // 在class中定义方法 此处为实例方法 通过实例打点调用 sayHello () {console.log('大家好，我今年' + this.age + '了'); } // 静态方法 通过构造函数打点调用 Person.doudou() static doudou () {console.log('我是小明，我新get了一个技能，会暖床'); }}// 添加静态属性Person.staticName = '静态属性'// 实例化对象const p = new Person(19)// 实现继承的方式 class American extends Person { constructor() {// 必须调用super(), super表示父类的构造函数super()this.skin = 'white'this.eyeColor = 'white' }}// 创建react对象// 注意：基于 `ES6` 中的class，需要配合 `babel` 将代码转化为浏览器识别的ES5语法// 安装：`npm i -D babel-preset-env` // react对象继承字React.Componentclass ShoppingList extends React.Component { constructor(props) { super(props) } // class创建的组件中 必须有rander方法 且显示return一个react对象或者null render() {return ( Shopping List for {this.props.name} Instagram WhatsApp ) }}给组件传递数据 - 父子组件传递数据组件中有一个 只读的对象 叫做 props，无法给props添加属性获取方式：函数参数 props作用：将传递给组件的属性转化为 props 对象中的属性function Welcome(props){ // props ---> { username: 'zs', age: 20 } return ( Welcome React 姓名：{props.username}----年龄是：{props.age} )}// 给 Hello组件 传递 props：username 和 age(如果你想要传递numb类型是数据 就需要向下面这样)ReactDOM.reander(, ......)封装组件到独立的文件中// 创建Hello2.js组件文件// 1. 引入React模块// 由于 JSX 编译后会调用 React.createElement 方法，所以在你的 JSX 代码中必须首先拿到React。import React from 'react'// 2. 使用function构造函数创建组件function Hello2(props){ return ( 这是Hello2组件 这是大大的H1标签，我大，我骄傲！！！ 这是小小的h6标签，我小，我傲娇！！！ )}// 3. 导出组件export default Hello2// app.js中使用组件：import Hello2 from './components/Hello2'props和stateprops作用：给组件传递数据，一般用在父子组件之间说明：React把传递给组件的属性转化为一个对象并交给 props特点：props是只读的，无法给props添加或修改属性props.children：获取组件的内容，比如：
组件内容 中的 组件内容// props 是一个包含数据的对象参数，不要试图修改 props 参数// 返回值：react元素function Welcome(props) { // 返回的 react元素中必须只有一个根元素 return hello, {props.name}}class Welcome extends React.Component { constructor(props) {super(props) } render() {return Hello, {this.props.name} }}state状态即数据作用：用来给组件提供组件内部使用的数据注意：只有通过class创建的组件才具有状态注意：状态是私有的，完全由组件来控制注意：不要在 state 中添加 render() 方法中不需要的数据，会影响渲染性能！
可以将组件内部使用但是不渲染在视图中的内容，直接添加给 this注意：不要在 render() 方法中调用 setState() 方法来修改state的值
但是可以通过 this.state.name = 'rose' 方式设置state（不推荐!!!!）// 例：class Hello extends React.Component { constructor() {// es6继承必须用super调用父类的constructorsuper()this.state = { gender: 'male'} } render() {return ( 性别：{ this.state.gender }) }}JSX语法转化过程// 1、JSXconst element = ( Hello, world! )// 2、JSX -> createElementconst element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!')// React elements: 使用对象的形式描述页面结构// Note: 这是简化后的对象结构const element = { type: 'h1', props: {className: 'greeting', }, children: ['Hello, world']}评论列表案例巩固有状态组件和无状态组件的使用两个组件： 和 [ { user: '张三', content: '哈哈，沙发' }, { user: '张三2', content: '哈哈，板凳' }, { user: '张三3', content: '哈哈，凉席' }, { user: '张三4', content: '哈哈，砖头' }, { user: '张三5', content: '哈哈，楼下山炮' }]// 属性扩展style样式// 1. 直接写行内样式：// 2. 抽离为对象形式var styleH3 = {color:'blue'}var styleObj = { liStyle:{border:'1px solid red', fontSize:'12px'}, h3Style:{color:'green'}} 评论内容：{props.content}// 3. 使用样式表定义样式：import '../css/comment.css'评论人：{props.user}