石灰吟拼音版2022社招React⾯试题附答案
2022社招React⾯试题附答案
React视频讲解
全部视频：
1. React的事件和普通的HTML事件有什么不同？
区别：
对于事件名称命名⽅式，原⽣事件为全⼩写，react 事件采⽤⼩驼峰；
对于事件函数处理语法，原⽣事件为字符串，react 事件为函数；
生气头疼
react 事件不能采⽤ return fal 的⽅式来阻⽌浏览器的默认⾏为，⽽必须要地明确地调⽤preventDefault()来阻⽌默认⾏为。
合成事件是 react 模拟原⽣ DOM 事件所有能⼒的⼀个事件对象，其优点如下：
兼容所有浏览器，更好的跨平台；
将事件统⼀存放在⼀个数组，避免频繁的新增与删除（垃圾回收）。
⽅便 react 统⼀管理和事务机制。
事件的执⾏顺序为原⽣事件先执⾏，合成事件后执⾏，合成事件会冒泡绑定到 document 上，所以尽量避免原⽣事件与合成事件混⽤，如果原⽣事件阻⽌冒泡，可能会导致合成事件不执⾏，因为需要冒泡到document 上合成事件才会执⾏。
2. React 组件中怎么做事件代理？它的原理是什么？
React基于Virtual DOM实现了⼀个SyntheticEvent层（合成事件层），定义的事件处理器会接收到⼀个合成事件对象的实例，它符合
W3C标准，且与原⽣的浏览器事件拥有同样的接⼝，⽀持冒泡机制，所有的事件都⾃动绑定在最外层上。
在React底层，主要对合成事件做了两件事：
事件委派： React会把所有的事件绑定到结构的最外层，使⽤统⼀的事件监听器，这个事件监听器上维持了⼀个映射来保存所有组件内部事件监听和处理函数。
⾃动绑定： React组件中，每个⽅法的上下⽂都会指向该组件的实例，即⾃动绑定this为当前组件。
3. React ⾼阶组件、Render props、hooks 有什么区别，为什么要不断迭代
这三者是⽬前react解决代码复⽤的主要⽅式：
⾼阶组件（HOC）是 React 中⽤于复⽤组件逻辑的⼀种⾼级技巧。HOC ⾃⾝不是 React API 的⼀部分，它是⼀种基于 React 的组合特性⽽形成的设计模式。具体⽽⾔，⾼阶组件是参数为组件，返回值为新组件的函数。
render props是指⼀种在 React 组件之间使⽤⼀个值为函数的 prop 共享代码的简单技术，更具体的说，render prop 是⼀个⽤于告知组件需要渲染什么内容的函数 prop。
通常，render props 和⾼阶组件只渲染⼀个⼦节点。让 Hook 来服务这个使⽤场景更加简单。这两种模式仍有⽤武之地，（例如，⼀个虚拟滚动条组件或许会有⼀个 renderltem 属性，或是⼀个可见的容器组件或许会有它⾃⼰的 DOM 结构）。但在⼤部分场景下，Hook ⾜够了，并且能够帮助减少嵌套。
（1）HOC 官⽅解释∶
⾼阶组件（HOC）是 React 中⽤于复⽤组件逻辑的⼀种⾼级技巧。HOC ⾃⾝不是 React API 的⼀部分，它是⼀种基于 React 的组合特性⽽形成的设计模式。
简⾔之，HOC是⼀种组件的设计模式，HOC接受⼀个组件和额外的参数（如果需要），返回⼀个新的组件。HOC 是纯函数，没有副作⽤。
// hoc的定义
function withSubscription(WrappedComponent, lectData){
return class extends React.Component {
constructor(props){
super(props);
this.state ={
data:lectData(DataSource, props)
裙带菜怎么做好吃};
}
// ⼀些通⽤的逻辑处理
render(){
// ... 并使⽤新数据渲染被包装的组件!屏风的意思
return<WrappedComponent data={this.state.data}{...this.props}/>;
}
};
// 使⽤
const BlogPostWithSubscription =withSubscription(BlogPost,
(DataSource, props)=> BlogPost(props.id));
复制代码
HOC的优缺点∶
优点∶ 逻辑服⽤、不影响被包裹组件的内部逻辑。
缺点∶ hoc传递给被包裹组件的props容易和被包裹后的组件重名，进⽽被覆盖
（2）Render props 官⽅解释∶
"render prop"是指⼀种在 React 组件之间使⽤⼀个值为函数的 prop 共享代码的简单技术
具有render prop 的组件接受⼀个返回React元素的函数，将render的渲染逻辑注⼊到组件内部。在这⾥，"render"的命名可以是任何其他有效的标识符。
// DataProvider组件内部的渲染逻辑如下
循序渐进是什么意思class DataProvider extends React.Components {
state ={
name:'Tom'
}
render(){
return(
<div>
<p>共享数据组件⾃⼰内部的渲染逻辑</p>
{der(this.state)}
</div>
);
}
}
// 调⽤⽅式
<DataProvider render={data =>(
<h1>Hello {data.name}</h1>
)}/>
复制代码
由此可以看到，render props的优缺点也很明显∶
优点：数据共享、代码复⽤，将组件内的state作为props传递给调⽤者，将渲染逻辑交给调⽤者。
缺点：⽆法在 return 语句外访问数据、嵌套写法不够优雅
（3）Hooks 官⽅解释∶
Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使⽤ state 以及其他的 React 特性。通过⾃定义hook，可以复⽤代码逻辑。
// ⾃定义⼀个获取订阅数据的hook
function uSubscription(){
const data = Comments();
return[data];
}
//
function CommentList(props){
const{data}= props;
const[subData]=uSubscription();
...
}
带春的词语
// 使⽤
<CommentList data='hello'/>
复制代码
以上可以看出，hook解决了hoc的prop覆盖的问题，同时使⽤的⽅式解决了render props的嵌套地狱的问题。hook的优点如下∶使⽤直观；
解决hoc的prop 重名问题；
解决render props 因共享数据 ⽽出现嵌套地狱的问题；
能在return之外使⽤数据的问题。
需要注意的是：hook只能在组件顶层使⽤，不可在分⽀语句中使⽤。
总结∶ Hoc、render props和hook都是为了解决代码复⽤的问题，但是hoc和render props都有特定的使⽤场景和明显的缺点。hook是react16.8更新的新的API，让组件逻辑复⽤更简洁明了，同时也解决了hoc和render props的⼀些缺点。
4. 对React-Fiber的理解，它解决了什么问题？
React V15 在渲染时，会递归⽐对 VirtualDOM 树，找出需要变动的节点，然后同步更新它们， ⼀⽓呵成。这个过程期间， React 会占据浏览器资源，这会导致⽤户触发的事件得不到响应，并且会导致掉帧，导致⽤户感觉到卡顿。
为了给⽤户制造⼀种应⽤很快的“假象”，不能让⼀个任务长期霸占着资源。 可以将浏览器的渲染、布局、绘制、资源加载(例如 HTML 解析)、事件响应、脚本执⾏视作操作系统的“进程”，需要通过某些调度策略合理地分配 CPU 资源，从⽽提⾼浏览器的⽤户响应速率, 同时兼顾任务执⾏效率。
所以 React 通过Fiber 架构，让这个执⾏过程变成可被中断。“适时”地让出 CPU 执⾏权，除了可以让浏览器及时地响应⽤户的交互，还有其他好处:
分批延时对DOM进⾏操作，避免⼀次性操作⼤量 DOM 节点，可以得到更好的⽤户体验；
给浏览器⼀点喘息的机会，它会对代码进⾏编译优化（JIT）及进⾏热代码优化，或者对 reflow 进⾏修正。
核⼼思想: Fiber 也称协程或者纤程。它和线程并不⼀样，协程本⾝是没有并发或者并⾏能⼒的（需要配合线程），它只是⼀种控制流程的让出机制。让出 CPU 的执⾏权，让 CPU 能在这段时间执⾏其他的操作。渲染的过程可以被中断，可以将控制权交回浏览器，让位给⾼优先级的任务，浏览器空闲后再恢复渲染。
5. Component, Element, Instance 之间有什么区别和联系？
元素： ⼀个元素element是⼀个普通对象(plain object)，描述了对于⼀个DOM节点或者其他组件component，你想让它在屏幕上呈现成什么样⼦。元素element可以在它的属性props中包含其他元素(译注:⽤于形成元素树)。创建⼀个React元素element成本很低。元素element创建之后是不可变的。
组件： ⼀个组件component可以通过多种⽅式声明。可以是带有⼀个render()⽅法的类，简单点也可
以定义为⼀个函数。这两种情况下，它都把属性props作为输⼊，把返回的⼀棵元素树作为输出。
努力挣钱实例： ⼀个实例instance是你在所写的组件类component class中使⽤关键字this所指向的东西(译注：组件实例)。它⽤来存储本地状态和响应⽣命周期事件很有⽤。
函数式组件(Functional component)根本没有实例instance。类组件(Class component)有实例instance，但是永远也不需要直接创建⼀个组件的实例，因为React帮我们做了这些。
6. ateClass和extends Component的区别有哪些？
（1）语法区别
createClass本质上是⼀个⼯⼚函数，extends的⽅式更加接近最新的ES6规范的class写法。两种⽅式在语法上的差别主要体现在⽅法的定义和静态属性的声明上。
createClass⽅式的⽅法定义使⽤逗号，隔开，因为creatClass本质上是⼀个函数，传递给它的是⼀个Object；⽽class的⽅式定义⽅法时务必谨记不要使⽤逗号隔开，这是ES6 class的语法规范。
（2）propType 和 getDefaultProps
React.Component：通过设置两个属性propTypes和defaultProps
（3）状态的区别
React.Component：通过constructor设置初始状态
（4）this区别
React.Component：由于使⽤了 ES6，这⾥会有些微不同，属性并不会⾃动绑定到 React 类的实例上。
（5）Mixins
如果使⽤ ES6 的⽅式来创建组件，那么 React mixins 的特性将不能被使⽤了。
7. 对React的插槽(Portals)的理解，如何使⽤，有哪些使⽤场景
React 官⽅对 Portals 的定义：
Portal 提供了⼀种将⼦节点渲染到存在于⽗组件以外的 DOM 节点的优秀的⽅案
Portals 是React 16提供的官⽅解决⽅案，使得组件可以脱离⽗组件层级挂载在DOM树的任何位置。通俗来讲，就是我们 render ⼀个组件，但这个组件的 DOM 结构并不在本组件内。
Portals语法如下：
复制代码
第⼀个参数 child 是可渲染的 React ⼦项，⽐如元素，字符串或者⽚段等;
第⼆个参数 container 是⼀个 DOM 元素。
⼀般情况下，组件的render函数返回的元素会被挂载在它的⽗级组件上：
import DemoComponent from'./DemoComponent';
render(){
// DemoComponent元素会被挂载在id为parent的div的元素上
return(
<div id="parent">
<DemoComponent />
学生成绩分析系统</div>
);
}
8. Redux 原理及⼯作流程
（1）原理 Redux源码主要分为以下⼏个模块⽂件
compo.js 提供从右到左进⾏函数式编程
createStore.js 提供作为⽣成唯⼀store的函数
combineReducers.js 提供合并多个reducer的函数，保证store的唯⼀性
bindActionCreators.js 可以让开发者在不直接接触dispacth的前提下进⾏更改state的操作applyMiddleware.js 这个⽅法通过中间件来增强dispatch的功能
