React

介绍一下react

React单项数据流

react生命周期函数和react组件的生命周期

react和Vue的原理，区别，亮点，作用

reactJs的组件交流

有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

项目里用到了react，为什么要选择react，react有哪些好处

怎么获取真正的dom

选择react的原因

react的生命周期函数

setState之后的流程

react高阶组件知道吗？

React的jsx，函数式编程

react的组件是通过什么去判断是否刷新的

如何配置React-Router

路由的动态加载模块

Redux中间件是什么东西，接受几个参数

redux请求中间件如何处理并发

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

data(){

return{

myChart:‘’,

distributionOptions:‘’

}

},

创建一个方法，用来配置 Echarts 的 Options 参数。

changeOptions (name) {

// 经纬度数据

const seriesList = [

{

data: [

{ value: [106.9, 27.7] },

{ value: [105.29, 27.32] },

{ value: [106.04, 27.03] },

{ value: [104.82, 26.58] },

{ value: [107.82, 20.58] }

]

},

{

data: [

{

value: [107.43, 28.56]

}

]

},

{

data: [

{

value: [107.5, 27.76]

}

]

}

];

// 图标

const series = seriesList.map(v => {

return {

type: “scatter”, //配置显示方式为用户自定义

coordinateSystem: “geo”,

data: v.data

};

});

// options

this.distributionOptions = {

tooltip: { // 提示框组件

show: true, // 显示提示框组件

trigger: “item”, // 触发类型

triggerOn: “mousemove”, // 出发条件

formatter: “名称:{b}

坐标:{c}”

},

series, // 数据

geo: {

map: name || ‘china’, // 引入地图 省份或者 国家

layoutCenter: [“50%”, “50%”], //设置后left/right/top/bottom等属性无效

layoutSize: “45%”,

roam: true, //开启鼠标缩放和漫

zoom: 2,

label: {

normal: {

//静态的时候展示样式

show: true, //是否显示地图省份得名称

textStyle: {

color: “#fff”,

fontSize: 10,

fontFamily: “Arial”

}

},

emphasis: { // 高亮状态下的样式

//动态展示的样式

color: “#fff”

}

},

itemStyle: { // 地图区域的多边形 图形样式。

normal: {

borderColor: “#07919e”, // 边框颜色

areaColor: “#1c2f59”, // 区域颜色

textStyle: { // 文字颜色

color: “#fff”

},

shadowBlur: 10, // 图形阴影的模糊大小

shadowOffsetX: 10 // 阴影水平方向上的偏移距离。

},

emphasis: {

areaColor: “#1c2f59”,

color: “#fff”

}

}

}

};

},

然后创建一个方法初始化地图数据。

// 初始化地图数据

init() {

echarts.registerMap(“china”, chinaJson);

this.changeOptions(“china”)

this.myChart = echarts.init(document.getElementById(“main”));

this.myChart.setOption(this.distributionOptions);

// 上边应该都懂，下面就是创建了一个点击事件，目的是点击省份子区域的时候可以切换到省份地图，省份的json文件自己下载。

this.myChart.on(“click”, chinaParam => {

let code = provinces[provincesText.indexOf(chinaParam.name)] || 100000

this.getProvinceMapOpt(code,provincesName[provincesText.indexOf(chinaParam.name)])

});

window.onresize = function() {

this.myChart.resize();

};

},

上面用到了三个参数，在项目里面定义一下，一定要对应起来，不要出错。

var provinces = [‘310000’, ‘130000’,‘140000’,‘150000’,‘210000’,‘220000’,‘230000’,‘320000’,‘330000’,‘340000’,‘350000’,‘360000’,‘370000’,‘410000’,‘420000’,‘430000’,‘440000’,‘450000’,‘460000’,‘510000’,‘520000’,‘530000’,‘540000’,‘610000’,‘620000’,‘630000’,‘640000’,‘650000’, ‘110000’, ‘120000’, ‘500000’, ‘810000’, ‘820000’, ‘710000’];

var provincesText = [‘上海’, ‘河北省’, ‘山西省’, ‘内蒙古自治区’, ‘辽宁省’, ‘吉林省’,‘黑龙江省’, ‘江苏省’, ‘浙江省’, ‘安徽省’, ‘福建省’, ‘江西省’, ‘山东省’,‘河南省’, ‘湖北省’, ‘湖南省’, ‘广东省’, ‘广西省’, ‘海南省’, ‘四川省’, ‘贵州省’, ‘云南省’, ‘西藏自治区’, ‘陕西省’, ‘甘肃省’, ‘青海省’, ‘宁夏回族自治区’, ‘新疆维吾尔自治区’, ‘北京市’, ‘天津市’, ‘重庆市’, ‘香港’, ‘澳门’, ‘台湾省’];

var provincesName = [‘shanghai’, ‘hebei’,‘shanxi’,‘neimenggu’,‘liaoning’,‘jilin’,‘heilongjiang’,‘jiangsu’,‘zhejiang’,‘anhui’,‘fujian’,‘jiangxi’,‘shandong’,‘henan’,‘hubei’,‘hunan’,‘guangdong’,‘guangxi’,‘hainan’,‘sichuan’,‘guizhou’,‘yunnan’,‘xizang’,‘shanxi1’,‘gansu’,‘qinghai’,‘ningxia’,‘xinjiang’, ‘beijing’, ‘tianjin’, ‘chongqing’, ‘xianggang’, ‘aomen’, ‘taiwan’];

在点击事件里面用到了一个方法，目的就是切换子区域重新加载Echarts的作用。

//显示各省地图

getProvinceMapOpt(provinceAlphabet, name){

var path = ‘/mapJson/province/’+provinceAlphabet+‘.json’

if( provinceAlphabet === 100000 ){

path = ‘/mapJson/china.json’

}

axios.get(path).then((s)=>{

echarts.registerMap(name, s.data)

this.changeOptions(name)

this.myChart.setOption(this.distributionOptions, true);

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

s.distributionOptions, true);

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

[外链图片转存中…(img-91q7emI5-1715174863128)]

[外链图片转存中…(img-Qm4kXZvs-1715174863129)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】