2019-11-07 周四 百度地图+G2_bizCharts+Promise与计时器+async +Generator+flex布局+Object.defineProperty+vue+react

一、在react中使用百度地图（三个步骤）

https://blog.csdn.net/qq_26941173/article/details/80398998

步骤一、修改index.html文件

 <script 
    type="text/javascript" 
    src="http://api.map.baidu.com/api?v=2.0&ak=fDEpXcQwysGa4Dr0RHdwMWQQ3Ugw1vRI">
 </script> 

步骤二、在index.html中添加百度地图的调用接口：

*由于react工程是由脚手架创建的即create-react-app创建的。
*因此只需要修改node_modules文件下面的webpack.config.dev.js文件即可；

步骤三、直接使用

import React, { Component } from 'react'
import { Input } from 'antd'
import BMap  from 'BMap';   // 因为第二步定义了BMap，所以可以直接引入了
export default class Content3 extends Component {  
	constructor(props){
	    super(props)    
	    this.state = {      
	    location:"北京",//默认北京      
	    M:{        
		    lat: 0,//纬度        
		    lng: 0,//经度      
	      }    
	   }  
	 }  
	 
	 Get_map = () => {    
	 	const { location } = this.state;    
	 	const myGeo = new BMap.Geocoder();                    
	 	myGeo.getPoint(`需要获取经纬度的地点`,(point) => {   
	 		//这个point就是解析地址获得的百度地图坐标系     
	 		if (point) { console.log("point",point);}   
	 		else { console.log('解析失败');}                                                   
	 	}, '北京市');                                        
	 }  
	render(){    
	return (
	<div>        
		<Input 
			value={this.state.location}             
			onChange={(e)=>{ 
			this.setState({ location:e.target.value },()=>{this.Get_map()}) 
		}}/>        
		<p>纬度：{this.state.M.lat}</p>        
		<p>经度：{this.state.M.lng}</p>      
	</div>)  
	}
}

Geocoder类用于获取用户的地址解析。

构造函数	描述
Geocoder()	创建一个地址解析器的实例

方法	返回值	描述
getPoint(address: String, callback: Function, city: String)	none	对指定的地址进行解析。如果地址定位成功，则以地址所在的坐标点Point为参数调用回调函数。否则，回调函数的参数为null。city为地址所在的城市名，例如“北京市
getLocation(point: Point, callback: Function, options: LocationOptions)	none	对指定的坐标点进行反地址解析。如果解析成功，则回调函数的参数为GeocoderResult对象，否则回调函数的参数为null

二、BizCharts 和 G2 的区别

G2图表的书写格式，更适合于传统的 html+css+js；

而bizcharts 在g2的基础上，基于React技术栈进行封装，各个图表均使用组件的形式。更适合react使用；

三、webpack

* 入口
* 出口
* loader ： 作用是可以让import 引入任何类型的模块。css、img、等等

四、ES7 新特性

	1. 数组的 includes （）方法、类似于 indexOf () ;
		* 不同的是include（）返回的是布尔值；（可以判断NAN值）
		* indexOf （） 可以判断数组中的位置，数组的下标。
	2. 
async awite 

五、Promise 与 计时器：

  componentDidMount () {
    //调用一个函数  函数中定义了一个promise对象， 
    //【因为新建的Promise对象自己会立即执行，所以必须放在一个函数中，去调用这个函数。】
    this.p(1500)
  }
  
  p = (ms = 0) => {
    //新建一个Promise对象，这个Promise对象会立即自动执行，
    new Promise((resolve, reject) => {
      // 新建一个计时器
      setTimeout(()=>{
        // 1500毫秒后打印计时器执行
        console.log(`${ms},计时器执行：`, ms)
      },ms)

        // 如果上面的程序执行成功，那么调用成功回调，
      resolve(`${ms}，成功回调函数执行！`) // 成功回调
    }).then(res=>{
        // .then 接收成功的回调
      console.log( res)
    })
  }

执行结果：

总结：promise 会先执行，不用等待计时器

六、async

• 函数声明：async function foo() {}
• 函数表达式： const foo = async function() {}
• 对象的方式： let obj = { async foo() {} }
• 箭头函数： const foo = async () => {}

 p = (ms = 0) => {   
  let count = () => {return new Promise((resolve, reject) => {
  setTimeout(() => {reject('promise故意抛出异常')}, 1000);})}
  let list  = () => {return new Promise((resolve, reject) => {
  setTimeout(() => {resolve([1, 2, 3])}, 1000);})}
  let getList = async () => {
      let c = await count();
        // 如果await 返回的promise 执行了rejected（错误函数) 
        // 那么awaite 将判定为该含税执行完毕 执行下一个await，不会再执行剩余的函数。
        console.log('async')    //此段代码并没有执行
      let l = await list()
      return { count: c, list: l }
  }
  console.time('start');
  getList()
  .then(res => {console.log(res)})
  .catch(err => {console.timeEnd('start');console.log(err)})
  }
  Get_map = () => {
    const myGeo = new BMap.Geocoder();
    myGeo.getPoint(`浙江省杭州市江干区三新路158号`, (point) => {
      if (point) {
        this.setState({ M:point })
      }
    });
  }

async 与 Generator 的关系截图：

七、Generator 函数

需要使用next（）去执行内部的 yield 返回值；
而 async 函数则是 Generator 函数的语法糖：内置执行器，自动执行 awite 返回值；

八、flex布局

******容器的属性
排序方向：flex-direction : row / row-reverse / column / columen-reverse  
是否换行：flex-wrap: nowrap / wrap /wrap-reverse   
合并：flex -flow: 排序方向 是否换行；

主轴对齐：flex-content: flex-start / flex-end / center / space-between / space-around
垂直对齐：align-items:flex-start / flex-end / center / stretch / baseline

多轴对齐：align-content:flex-start/ flex-end / flex-around/ flex-between/ center/stretch 默认值

******项目的属性
项目排序：order；
放大比例：flex-grow；    默认是0
缩小比例：flex-shrink；   默认是0
分配空间：flex-basis；    默认是auto

flex：放大 或者 缩小  | |  分配空间；

九、Object.defineProperty(obj, prop, desc)

vue 实现双向绑定的关键：

	1. obj 需要定义属性的当前对象
	2. prop 当前需要定义的属性名
	3. desc 属性描述符

十、vue 和 react

• 相同

1.都是使用的虚拟dom
2.提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
3.将路由和全局状态等库分离出来单独管理。

• 不同

性能的优化
	1.react 渲染整个 组件 包括 子组件。除非使用 shouldComponentUpdate 。
	2.vue 不用担心，因为他组件的依赖是自动追踪的。相当于所以子组件自动使用了shouldComponentUpdate 。
HTML 和 css 
	1.react 中依赖渲染函数 和  jsx语法，all in js ， Vue也有，也可以
	2.	vue 使用模板语法