面试官：React中的key有什么作用？
面试官：React中的key有什么作用？
一、是什么首先，先给出react组件中进行列表渲染的一个示例：
1234567891011121314151617181920const data = [ { id: 0, name: 'abc' }, { id: 1, name: 'def' }, { id: 2, name: 'ghi' }, { id: 3, name: 'jkl' }];const ListItem = (props) => { return <li>{props.name}</li>;};const List = () => { return ( <ul> {data.map((item) => ( <ListItem name={item ...
面试官：说说 React 生命周期有哪些不同阶段？每个阶段对应的方法是？
面试官：说说 React 生命周期有哪些不同阶段？每个阶段对应的方法是？
一、是什么在以前文章中，我们了解到生命周期定义
生命周期（Life Cycle）的概念应用很广泛，特别是在经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程
跟Vue一样，React整个组件生命周期包括从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程
二、流程这里主要讲述react16.4之后的生命周期，可以分成三个阶段：
创建阶段
更新阶段
卸载阶段
创建阶段创建阶段主要分成了以下几个生命周期方法：
constructor
getDerivedStateFromProps
render
componentDidMount
constructor实例过程中自动调用的方法，在方法内部通过super关键字获取来自父组件的props
在该方法中，通常的操作为初始化state状态或者在this上挂载方法
getDerivedStateFromProps该方法是新增的生命周期方法，是一个静态的方法，因此不能访 ...
面试官：说说你对Redux的理解？其工作原理？
说说你对Redux的理解？其工作原理？
一、是什么React是用于构建用户界面的，帮助我们解决渲染DOM的过程
而在整个应用中会存在很多个组件，每个组件的state是由自身进行管理，包括组件定义自身的state、组件之间的通信通过props传递、使用Context实现数据共享
如果让每个组件都存储自身相关的状态，理论上来讲不会影响应用的运行，但在开发及后续维护阶段，我们将花费大量精力去查询状态的变化过程
这种情况下，如果将所有的状态进行集中管理，当需要更新状态的时候，仅需要对这个管理集中处理，而不用去关心状态是如何分发到每一个组件内部的
redux就是一个实现上述集中管理的容器，遵循三大基本原则：
单一数据源
state 是只读的
使用纯函数来执行修改
注意的是，redux并不是只应用在react中，还与其他界面库一起使用，如Vue
二、工作原理redux 要求我们把数据都放在 store 公共存储空间
一个组件改变了 store 里的数据内容，其他组件就能感知到 store 的变化，再来取数据，从而间接的实现了这些数据传递的功能
工作流程图如下所示：
根据流程图，可以想象， ...
面试官：说说React render方法的原理？在什么时候会被触发？
面试官：说说React render方法的原理？在什么时候会被触发？
一、原理首先，render函数在react中有两种形式：
在类组件中，指的是render方法：
12345class Foo extends React.Component { render() { return <h1> Foo </h1>; }}
在函数组件中，指的是函数组件本身：
123function Foo() { return <h1> Foo </h1>;}
在render中，我们会编写jsx，jsx通过babel编译后就会转化成我们熟悉的js格式，如下：
1234567return ( <div className='cn'> <Header> hello </Header> <div> start </div> Right Reserve </div ...
面试官：说说React服务端渲染怎么做？原理是什么？
面试官：说说React服务端渲染怎么做？原理是什么？
一、是什么在SSR中，我们了解到Server-Side Rendering ，简称SSR，意为服务端渲染
指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程
其解决的问题主要有两个：
SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面
加速首屏加载，解决首屏白屏问题
二、如何做在react中，实现SSR主要有两种形式：
手动搭建一个 SSR 框架
使用成熟的SSR 框架，如 Next.JS
这里主要以手动搭建一个SSR框架进行实现
首先通过express启动一个app.js文件，用于监听3000端口的请求，当请求根目录时，返回HTML，如下：
1234567891011121314const express = require('express')const app = express()app.get('/', (req,res) => res.send(`<html> <h ...
面试官：说说 React中的setState执行机制
面试官：说说 React中的setState执行机制
一、是什么一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state
当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用
如下例子：
1234567891011121314151617181920212223242526import React, { Component } from 'react'export default class App extends Component { constructor(props) { super(props); this.state = { message: "Hello World" } } render() { return ( <div> <h2 ...
面试官：state 和 props 有什么区别？
面试官：state 和 props 有什么区别？
一、state一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是 state，一般在 constructor 中初始化
当需要修改里面的值的状态需要通过调用 setState 来改变，从而达到更新组件内部数据的作用，并且重新调用组件 render 方法，如下面的例子：
12345678910111213141516171819202122class Button extends React.Component { constructor() { super(); this.state = { count: 0, }; } updateCount() { this.setState((prevState, props) => { return { count: prevState.count + 1 }; }); } render() { ...
面试官：说说你在使用React 过程中遇到的常见问题？如何解决?
面试官：说说你在使用React 过程中遇到的常见问题？如何解决?
一、前言在使用react开发项目过程中，每个人或多或少都会遇到一些”奇怪”的问题，本质上都是我们对其理解的不够透彻
react 系列，33个工作日，33次凌晨还在亮起的台灯，到今天就圆满画上句号了，比心
在系列中我们列出了很多比较经典的考题，工作中遇到的问题也往往就藏中其中，只是以不同的表现形式存在罢了
今天的题解不算题解，准确来说是对整个系列的一次贯穿，总结
目录:
react 有什么特性
生命周期有哪些不同阶段？每个阶段对应的方法是？
state 和 props有什么区别？
super()和super(props)有什么区别？
setState执行机制？
React的事件机制？
事件绑定的方式有哪些？
构建组件的方式有哪些？区别？
组件之间如何通信？
key有什么作用？
refs 的理解？应用场景？
Hooks的理解？解决了什么问题？
如何引入css？
redux工作原理？
redux中间件有哪些？
react-router组件有哪些？
render触发时机？
如何减少render？
JSX转化DOM过程？
性能 ...
面试官：super() 和 super(props) 有什么区别？
面试官：super() 和 super(props) 有什么区别？
一、ES6 类在 ES6 中，通过 extends 关键字实现类的继承，方式如下：
123456789101112131415161718192021222324class sup { constructor(name) { this.name = name; } printName() { console.log(this.name); }}class sub extends sup { constructor(name, age) { super(name); // super代表的事父类的构造函数 this.age = age; } printAge() { console.log(this.age); }}let jack = new sub("jack", 20);jack.printName(); //输出 : jackja ...
面试官：说说 HTTP1.0/1.1/2.0 的区别?
面试官：说说 HTTP1.0/1.1/2.0 的区别?
一、HTTP1.0HTTP协议的第二个版本，第一个在通讯中指定版本号的HTTP协议版本
HTTP 1.0 浏览器与服务器只保持短暂的连接，每次请求都需要与服务器建立一个TCP连接
服务器完成请求处理后立即断开TCP连接，服务器不跟踪每个客户也不记录过去的请求
简单来讲，每次与服务器交互，都需要新开一个连接
例如，解析html文件，当发现文件中存在资源文件的时候，这时候又创建单独的链接
最终导致，一个html文件的访问包含了多次的请求和响应，每次请求都需要创建连接、关系连接
这种形式明显造成了性能上的缺陷
如果需要建立长连接，需要设置一个非标准的Connection字段 Connection: keep-alive
二、HTTP1.1在HTTP1.1中，默认支持长连接（Connection: keep-alive），即在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟
建立一次连接，多次请求均由这个连接完成
这样，在加载html文件的时候，文件中多个请求和响应就可以在一个 ...