1.flex布局实现垂直置顶，靠右对齐
- 创建一个容器
- 设置flex方向
- 垂直对齐
.container{
display: flex;
align-items: flex-start;
justify-content: flex-end;
}- 水平对齐
2.align-content和align-self的区别
- align-content控制的是多行或多列的整体对齐方式，align-self控制的是容器内单个项目的对齐方式
3.箭头函数和普通函数的区别
const square = function(x){
return x * x;
}
const squareArrow = x => x *x;- 语法简洁
- 箭头函数简洁
- this的绑定，箭头函数不绑定自己的this，捕获上下文的this。function函数有自己的this
- 构造函数
- 箭头函数不能作为构造函数，不能使用new，没有自己的this，也没有prototype属性
- 普通函数可以作为构造函数
- arguments对象
- 剪头函数没有自己的arguments对象，但是可以访问外围的函数的arguments对象
- 普通函数有自己的arguments
- 返回值
- 箭头函数允许使用简洁语法直接返回表达式结果，无需使用return
- 普通函数需要使用return语句返回
4.看了几个题目 说this的指向
- 全局上下文，this指向的全局对象。在浏览器中，全局对象是window
- 函数调用，当一个函数不作为任何对象调用时，this指向的是全局对象
- 方法调用，当函数作为方法被调用时，this指向该方法所述绑定的对象
const obj = {
method: function(){
console.log(this === obj);
}
};
obj.method();- 构造函数调用
当一个函数通过new被作为够着函数调用时，this指向新创建的对象 - 显示绑定
- 通过call，apply，bind方法可以显示的指定this的指向
- 箭头函数
- 剪头函数不绑定自己的this，会捕获所在上下文的this。
5.了解promise么
- 剪头函数不绑定自己的this，会捕获所在上下文的this。
- Promoise是js中异步编程的一个重要的概念。代表了一种尚未完成但预期将会完成的操作结果。Promise可以处于以下三种状态
- Pending初始状态，也不是成功也不是失败
- Fulfilled成功态，操作成功
- Rejected失败态
基本用法
创建一个Promise
const promise = new Promoise((resolve, reject)=>{
const success = true;
if (success){
resolve("succ")
} else{
reject("failed")
}
})promise.then(
(value)=>{console.log(value);}
(error)=>{console.log(error);}
)链式调用
promise
.then((value)=>{
console.log(value);
return "doing next operation";
})
.then((nextValue)=>{
})
.catch((error)=>{
console.log(error);
})错误处理
promise
.then(()=>{
})
.catch((error)=>{
})优势：
- 提供一种更优雅的方式来处理异步操作，避免了回调地狱
- 支持链式调用
- 同意了异步操作的处理方式
6.看一道promise代码输出题（涉及微任务和宏任务）
console.log("1");
setTimeout(()=>{
console.log("2");
Promise.resolve().then(()=>{
console.log("3");
})
}, 0);
Promose.resolve().then(()=>{
console.log("4");
setTimeout(()=>{
console.log("5");
}, 0)
})
console.log("6");- 同步代码1,6
- 微任务Promise4
- 宏任务输出
- 微任务
- Promise
- 宏任务
- setTimeout回调
- 事件循环
- 同步代卖
- 宏任务加入宏任务队列，微任务加入微任务队列
- 先执行微任务，再执行宏任务
7.写两道题，一道正则，一道时间戳转年月日
function timestampToYMD(timestamp){
const date = new Date(timestamp);
const year = date.getFUllYear();
const month = (date.getMonth() + 1).toString().padStart(2, "0")
const day = date.getDate().toString().padStart(2, "0");
return "${year}-${month}-${day}";
}8.封装一个通用的fetch请求
async function fectchReq(url, options={}){
const method = options.method || "GET";
const headers = {
"Content-Type": "application/json",
...options.headers
}
const config = {
method,
header
}
if (method === "POST" && options.body) {
config.body = JSON.stringify(options.body);
}
try{
const res = await fetch(url, config);
if(!response.ok){
throw new Error("HTTP error! status: ${res.status}");
}
return await response.json();
}catch(error){
throw error;
}
}9.说说es6的class和构造函数
function Person(name, age){
this.name = name;
}
Person.prototype.sayHello = function(){
console.log("Hello, my name is ${this.name}");
}
const person1 = new Person("Alice", 30);
person1.sayHello()
class Person {
constructor(name, age){
this.name = name;
this.age = age;
}
sayHello(){
console.log("Hello, my name is ${this.name}");
}
}
const person1 = new Person("bob", 25);
person1.sayHello();- 对比
- 语法简洁性
- 继承
- 静态方法
- 生命方式
class仍是基于原型，class只是原型模型的一个语法糖
9.手写一个react手动计数组件
import React, {useState} from "react";
funtion Counter(){
const [count, setCount] = useState(0);
const increment =()=>{
setCount(count + 1);
}
const decrement=()={
setCount(count - 1);
}
return (
<div>
{count}
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
)
}
export default Counter;10.点击一个button，另一个button也计数怎么实现
11.实习中哪里用到了状态提升
状态提升是一种数据流管理技术，用于在组件中共享状态。当多个组件需要访问和修改同一个状态时，将状态提升到这些组件的最近共同父组件中，然后通过props将状态和用于修改状态的函数传递到需要他们的子组建中
- 表单输入同步
import React, {useState} from "react";
import InputComponent from "./InputComponent";
function Form(){
const [inputValue, setInputValue] = useState("");
const handleInputChange = (e) =>{
setInputValue(e.target.value);
}
return (
...
)
}
function InputComponent({value, onChange}){
return <input type='text' value={value} onChange={onChange}/>;
}12.手写一个自定义hooks
自定义hooks是一种在多个组件之间或者不同项目中共享逻辑。
useFormInput自定义Hook
import {useState} from "react";
function useFormInput(initialValue){
const [value, setValue] = useState(initialValue);
const handleChange = (e) => {
setValue(e.target.value);
}
const reset = () => {
setValue(initialValue);
}
return {
value,
onChange: handleChange,
reset
}
}
export default useFormInput
import React from "react";
import useFormInput from "./useFormInput";
function FormComponent(){
const name = useFormInput();
const handleSubmit = (event) => {
event.preventDefault();
alert(`a name was submitted: ${name.value}`);
name.reset()
}
return (
<form onSubmit={handleSubmit}>
<label>
<input type="text">
</label>
</form>
)
}13.函数式组件怎么暴露自己的数据和方法给父组件使用
- 回调函数
- props
- 父传函数，子传数据
- react context
- refs