7.jpg
1.【react 生命周期函数，以及触发顺序】
以组件的生命周期为例，主要分为如下几个部分：
A.Mounting
B.Updating
C. Unmounting
D.Error Handling
A.Mounting加载
1.constructor()
加载构造函数，通常用于初始化state和将事件处理程序绑定到实例
2.static getDerivedStateFromProps()
调用render方法前调用,返回一个对象来更新state或者返回null不更新
3.render()
是类组件中唯一必须的方法,通过render方法将JSX语法或者ES6语法的元素或者null内容转化为虚拟DOM;
render()应该保持独立,即每次调用都返回相同的结果且它不会与浏览器直接交互不会修改组件状态
4.componentDidMount()
组件首次被渲染之后被调用
5.componemtDidMount
组件首次被渲染之后被调用
{UNSAFE遗留方法：
componentWillMount(已经被标记为UNSAFE不安全)
组件首次被渲染之前调用，在组件的render方法调用前使用可以修改组件state。
B.Updating更新
1.static getDerivedStateFromProps()
用法同上
2.shouldComponentUpdate()
表示组件是否更新组件，默认返回true,也可以设置为false
3.render()
用法同上
4.getSnapshotBeforeUpdate()
使组件能够在可能更改之前从DOM中捕获一些信息（例如滚动位置);
此生命周期返回的任何值都将作为参数传递给componentDidUpdate()。
5.componentDidUpdate()
在真实的DOM节点更新成功后调用,常用于访问真实DOM节点。
{UNSAFE遗留方法：
1.componentWillReceiveProps(nextProps){}
父组件更新子组件props时被调用
2.shouldComponentUpdate(nextProps,nextState){}
表示组件是否更新组件，默认返回true,也可以设置为false}
C.Unmountin卸载
1.componentWillUnmount
在卸载和销毁组件之前调用,在此方法中执行任何必要的清理操作，
例如使定时器失效,一旦组件实例被卸载，它将永远不会再被挂载。
D.Error Handling错误处理
1.componentDidCatch()
在渲染期间，生命周期方法或任何子组件的构造函数中发生错误时，将调用此方法
2.【this.props和this.state的区别】
props是属性，是父组件设置好的，组件的设置参数，组件不能改变自身props
state是状态，组件可以通过this.setState()来改变自身的state,组件不能改变子组件的state
props和state改变后虚拟DOM都会重新加载
3.【export default命令含义】
export与export default均可用于导出常量、函数、文件、模块等
通过export方式导出，别的地方在用到的时候需要import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入
而export default导出，则使用时不需要指定名称，直接import文件路径即可使用。
4.【const let的区别】
let与const都是只在{}声明的所在块级作用域内有效。
区别在于let是变量,可以先声明后赋值,而且变量的值和类型都可以改变；
Const用于声明常量,而且由于const声明的常量不可改变,故需要在声明时就进行初始化。
5.【this.func() is undefined 一般什么情况出现如何解决】
调用的函数未定义
JS中类方法是默认没有绑定的,以handleClick方法为例，需要添加：
this.handleClick = this.handleClick.bind(this)
绑定后的this才能在回调中起作用
6.【npm start后做了哪些事情】
1.查找项目路径下package.json中对应的scripts命令(“start”: “react-scripts start”)
2.新建一个shell，执行刚刚查找到的shell命令：react-scripts start
执行命令后会查找node_modules包下react-scripts包中bin目录下react-scripts.js文件中的start命令
3.start命令执行了react-scripts包中scripts包中的start.js文件通过start.js的执行完成项目的初始化和启动。
7.【package.json文件作用，以及dependence，devDependence区别】
1.定义了这个项目所需要的各种模块,以及项目的配置信息（比如名称、版本、许可证等元数据）。
2.将项目相关的脚本集中在一个地方,方便管理(npm 允许在package.json文件里面，使用scripts字段定义脚本命令。)
dependence即正式项目的依赖
devDependence即开发环境下的依赖
8.【父级元素定高定宽，子元素定高定宽如何垂直居中】
组件应用contentContainerStyle属性,此属性为样式风格属性(传入StyleSheet创建的Style文件)
然后在自定义的css样式中使用alignItems和justifyContent属性
例子:
contentContainerStyle={styles.mystyle},.../>
mystyle: {
alignItems:'center',
justifyContent:'center'
}
9.【如何复写antd modal层中的less样式】
用:global{}重写需要修改的样式
10.【对数组去重（js写）】
Array.prototype.distinct =function(){
var arr =this,
result =[],
i,
j,
len = arr.length;
for(i =0; i < len; i++){
for(j = i +1; j < len; j++){
if(arr[i]=== arr[j]){
j =++i;
}
}
result.push(arr[i]);
}
return result;
}
网友评论