前端
1.display:none和visibility:hidden两者的区别
display: none隐藏后的元素不占据任何空间
visibility: hidden隐藏后的元素空间依旧保留
CSS3的transition支持visibility属性
2.每个HTML文件里头部都有<!DOCTYPE>声明,作用
声明HTML使用什么版本进行编辑的指令
3.<pre>标签的作用
表示计算机的源代码
4.rgba()和opacity的透明效果区别
rgba()不影响,opacity会同时影响字体的透明度
5.null和undefined区别
null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。
undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。
6.css实现元素居中
水平居中
行内水平居中
行内水平居中就直接用text-align: center
块级水平居中
直接用margin: auto来实现
绝对定位元素的居中
可以是哟经left: 50%, margin: 负固定值来实现
也可以使用transform: translate(x轴, y轴)来实现
flex居中
使用justify-content: center来实现, 这个是主轴
垂直居中
行内垂直居中
设置line-height和height一样高就好了
绝对定位元素居中
绝对定位元素可以使用top: 50%, margin-top: 负的一半高度
或者直接使用transform: translate(x轴, y轴)来实现
也可以结合使用绝对定位+margin:auto来实现
margin: auto中的auto意思是自动填充满剩余空间部分
flex居中
使用flex布局来实现 align-items: center ,代表交叉轴, 也就是垂直轴
移动端 React Naitve
React Native生命周期
生命周期.jpg
React中key的作用
渲染组件时,减少性能开销(setState是减少List中row的性能开销)
从输入URL到页面加载完成的过程
1.解析HTML，构建DOM树
2.解析CSS，生成CSS规则树
3.合并DOM树和CSS规则树，生成render树
4.布局render树（layout/reflow），负责各元素尺寸、位置的计算
5.绘制render树（paint），绘制页面像素信息
6.浏览器会将各层的信息发送给GUI，GUI会将各层合成（composite），显示在屏幕上
函数参数对象arguments转为数组args的几种方法
var args = Array.prototype.slice.call(arguments); // 第一种方式；
var args = [].slice.call(arguments); // 第二种方式；
ar args = arguments.length === 1? [arguments[0]]: Array.apply(null, arguments); // 第三种方式
ES6规范下的方式
var args = Array.from(arguments); // 第四种方式；
分析Log的执行顺序
javascript是一门单线程语言，所以javascript是按语句的执行顺序执行的。
虽然js是单线程，但是我们可以将任务分成两类
1.同步任务：需要执行的任务在主线程上排队，一次执行
2.异步任务：没有立马执行但是需要被执行的任务，放在 任务队列里面，
因此,我们从上往下分析:
函数async1和async2是不会先执行,函数声明之后要调用才会执行,所以先打印script start,setTimeout函数是异步的所以不会马上执行,setTimeout会进入相同的Event Queue,new promise 会立即执行， then会分发到微任务.new promise和then先后顺序不一定
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"><meta name="generator" content="MediaWiki 1.22.5">
</head>
<script>
async function async1(){
console.log("async1 start");
await async2();
console.log("async1 end")
}
async function async2(){
console.log("async2");
}
console.log("script start");
setTimeout(function(){
console.log("setTimeout");
}, 0);
async1();
new Promise(function(resolve){
console.log("Promise1");
resolve();
}).then(function(){
console.log("Promise2");
});
</script>
<body>
sdfsdfsdfsd
</body>
</html>
reactJS兄弟组件间及父子组件间怎么样通讯
1.父子组件间的通讯
通过props方式进行传递
2.兄弟组件通过props方式传递给父组件,再传递给兄弟组件.
网友评论