(window.webpackJsonp = window.webpackJsonp || []).push([[45], { 168: function (a, t, e) { 'use strict'; e.r(t); var r = e(0), n = Object(r.a)({}, function () { this.$createElement; this._self._c; return this._m(0) }, [function () { var a = this, t = a.$createElement, e = a._self._c || t; return e('div', { staticClass: 'content' }, [e('h1', { attrs: { id: 'react' }}, [e('a', { staticClass: 'header-anchor', attrs: { href: '#react', 'aria-hidden': 'true' }}, [a._v('#')]), a._v(' React')]), a._v(' '), e('h4', { attrs: { id: '_1、虚拟dom' }}, [e('a', { staticClass: 'header-anchor', attrs: { href: '#_1、虚拟dom', 'aria-hidden': 'true' }}, [a._v('#')]), a._v(' 1、虚拟Dom')]), a._v(' '), e('ol', [e('li', [a._v('节约资源')]), a._v(' '), e('li', [a._v('放在内存中')]), a._v(' '), e('li', [a._v('会利用Dom diff 算法')]), a._v(' '), e('li', [a._v('高效')])]), a._v(' '), e('h4', { attrs: { id: '_2、react' }}, [e('a', { staticClass: 'header-anchor', attrs: { href: '#_2、react', 'aria-hidden': 'true' }}, [a._v('#')]), a._v(' 2、react')]), a._v(' '), e('ul', [e('li', [a._v('核心库')]), a._v(' '), e('li', [a._v('React 是一个用于构建用户界面的 JAVASCRIPT 库。')]), a._v(' '), e('li', [a._v('React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。')]), a._v(' '), e('li', [a._v('React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。')]), a._v(' '), e('li', [a._v('React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。')]), a._v(' '), e('li', [a._v('React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。')])]), a._v(' '), e('h4', { attrs: { id: '_3、react特点' }}, [e('a', { staticClass: 'header-anchor', attrs: { href: '#_3、react特点', 'aria-hidden': 'true' }}, [a._v('#')]), a._v(' 3、react特点')]), a._v(' '), e('ol', [e('li', [e('strong', [a._v('声明式设计')]), a._v(' −React采用声明范式，可以轻松描述应用。')]), a._v(' '), e('li', [e('strong', [a._v('高效')]), a._v(' −React通过对DOM的模拟，最大限度地减少与DOM的交互')]), a._v(' '), e('li', [e('strong', [a._v('灵活')]), a._v(' −React可以与已知的库或框架很好地配合')]), a._v(' '), e('li', [e('strong', [a._v('JSX')]), a._v(' − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它')]), a._v(' '), e('li', [e('strong', [a._v('组件')]), a._v(' − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中')]), a._v(' '), e('li', [e('strong', [a._v('单向响应的数据流')]), a._v(' − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单')])]), a._v(' '), e('h4', { attrs: { id: '_4、react-dom' }}, [e('a', { staticClass: 'header-anchor', attrs: { href: '#_4、react-dom', 'aria-hidden': 'true' }}, [a._v('#')]), a._v(' 4、react-dom')]), a._v(' '), e('ul', [e('li', [a._v('做dom用的 跑在浏览器端')]), a._v(' '), e('li', [a._v('渲染/挂载')])]), a._v(' '), e('h4', { attrs: { id: '_5、react-native' }}, [e('a', { staticClass: 'header-anchor', attrs: { href: '#_5、react-native', 'aria-hidden': 'true' }}, [a._v('#')]), a._v(' 5、react-native')]), a._v(' '), e('ul', [e('li', [a._v('native 上面有个 web-view')]), a._v(' '), e('li', [a._v('优点: 流畅')]), a._v(' '), e('li', [a._v('缺点: 麻烦')])]), a._v(' '), e('h4', { attrs: { id: '_6、改变this指向' }}, [e('a', { staticClass: 'header-anchor', attrs: { href: '#_6、改变this指向', 'aria-hidden': 'true' }}, [a._v('#')]), a._v(' 6、改变this指向')]), a._v(' '), e('ol', [e('li', [a._v('apply 数组时   // 立即执行')]), a._v(' '), e('li', [a._v('call // 立即执行')]), a._v(' '), e('li', [a._v('bind   返回值：函数(不会执行)')])]), a._v(' '), e('h4', { attrs: { id: '_7、react事件' }}, [e('a', { staticClass: 'header-anchor', attrs: { href: '#_7、react事件', 'aria-hidden': 'true' }}, [a._v('#')]), a._v(' 7、react事件')]), a._v(' '), e('div', { staticClass: 'language- extra-class' }, [e('pre', { pre: !0, attrs: { class: 'language-text' }}, [e('code', [a._v('e.currentTarget：绑定事件的dom\ne.target：触发事件的dom\n//阻止事件默认行为\ne.preventDefault();\n//阻止事件冒泡\ne.stopPropagation();\n')])])]), e('h4', { attrs: { id: '_8、组件' }}, [e('a', { staticClass: 'header-anchor', attrs: { href: '#_8、组件', 'aria-hidden': 'true' }}, [a._v('#')]), a._v(' 8、组件')]), a._v(' '), e('ol', [e('li', [a._v('容器组件  // 有state(只能通过class来定义)')]), a._v(' '), e('li', [a._v('视图组件  // 没有state(渲染出来的,可以通过class和函数来定义)')])]), a._v(' '), e('h4', { attrs: { id: '_9、获取元素' }}, [e('a', { staticClass: 'header-anchor', attrs: { href: '#_9、获取元素', 'aria-hidden': 'true' }}, [a._v('#')]), a._v(' 9、获取元素')]), a._v(' '), e('ul', [e('li', [a._v('ref   获取dom(refer to缩写)')]), a._v(' '), e('li', [a._v('findDomNode  获取dom的实例')])]), a._v(' '), e('h4', { attrs: { id: '_10、按需加载' }}, [e('a', { staticClass: 'header-anchor', attrs: { href: '#_10、按需加载', 'aria-hidden': 'true' }}, [a._v('#')]), a._v(' 10、按需加载')]), a._v(' '), e('p', [a._v('封装一个loading组件')]), a._v(' '), e('div', { staticClass: 'language- extra-class' }, [e('pre', { pre: !0, attrs: { class: 'language-text' }}, [e('code', [a._v("import React from 'react';\nimport '../../scss/index.css';\nexport default ()=>{\n    return <div className='load'>\n        <img src=\"/load.gif\"/>\n    </div>\n}\n")])])]), e('p', [a._v('样式')]), a._v(' '), e('div', { staticClass: 'language- extra-class' }, [e('pre', { pre: !0, attrs: { class: 'language-text' }}, [e('code', [a._v('.load{\n    width: 100%;\n    height: 100%;\n    background: rgba(0,0,0,.5);\n    position: fixed;\n    left:0;\n    top:0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    z-index: 999;\n}\n')])])]), e('p', [a._v('react.config.js')]), a._v(' '), e('div', { staticClass: 'language- extra-class' }, [e('pre', { pre: !0, attrs: { class: 'language-text' }}, [e('code', [a._v("// 引入路由按需加载的依赖\nimport Loadable from 'react-loadable';\n\n// 路由未加载完成时显示的load组件\nimport Loading from '../components/common/loading';\n\nconst Detail = Loadable({\n    loader:()=>import('../components/Detail'),\n    loading:Loading\n})\n\nconst Index = Loadable({\n    loader:()=>import('../components/Index'),\n    loading:Loading\n})\n\nconst Feilei = Loadable({\n    loader:()=>import('../components/include/Feilei'),\n    loading:Loading\n})\n\n")])])]), e('h4', { attrs: { id: '_11、定位' }}, [e('a', { staticClass: 'header-anchor', attrs: { href: '#_11、定位', 'aria-hidden': 'true' }}, [a._v('#')]), a._v(' 11、定位')]), a._v(' '), e('div', { staticClass: 'language- extra-class' }, [e('pre', { pre: !0, attrs: { class: 'language-text' }}, [e('code', [a._v("// 点击的时候调用这个方法\nlocation(){  // 定位\n        let script = document.createElement('script');\n        script.src = 'http://pv.sohu.com/cityjson?ie=utf-8';\n        document.body.appendChild(script);\n        script.onload = ()=>{\n            this.setState({\n                city:window.returnCitySN.cname\n            })\n        }\n    }\n")])])])]) }], !1, null, null, null); t.default = n.exports } }])
