2025 最新React口试题

1、组件通信的方式

父组件传子组件：通过props 的方式
子组件传入父组件：父组件将自身函数传入，子组件调用该函数，父组件在函数中拿到子组件通报的数据
兄弟组件通信：找到共同的父节点，用父节点转发举行通信
跨层级通信：使用Contetx可跨域多层通报全局数据
全局状态管理工具：redux维护一个全局状态中心的store
2、React的生命周期

挂载阶段:
        constructor():constructor中通常只做两件事：初始化组件的 state、给变乱处理方法绑定 this
static getDerivedStateFromProps()：该函数会在创建或更新props或state时调用
render()：用于渲染DOM结构
componentDidMount()：在组件挂载后（插入 DOM 树中）立即调，该阶段可执行依赖于DOM的操作、发送网络请求；（官方建议）
更新阶段:
static getDerivedStateFromProps()
shouldComponentUpdate()：建议使用该方法会产生明显的性能提升时使用
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
卸载阶段:
        componentWillUnmount()：在组件卸载及烧毁之前直接调用，该阶段可扫除 timer，取消网络请求或扫除
错误处理:
        componentDidCatch()：此生命周期在后代组件抛出错误后被调用
3、Props改变后在那个生命周期中处理

        getDerivedStateFromProps生命周期会在组件吸取新的 props 时调用；这个生命周期函数是为了替代componentWillReceiveProps存在
4、React性能优化在那个生命周期?

shouldComponentUpdate
react的父级组件的render函数重新渲染会引起子组件的render方法的重新渲染。但是，有的时候子组件的接受父组件的数据没有变更，子组件render的执行会影响性能

 shouldComponentUpdate提供了两个参数nextProps和nextState，表现下一次props和一次state的值，当函数返回false时候，render()方法不执行，组件也就不会渲染，返回true时，组件照常重渲染。
5、网络请求在那个生命周期中举行

一样平常在在componentDidMount中去操作。
6、React移除了哪些生命周期方法

componentWillReceiveProps()、componentWillMount() 、componentWillUpdate()
7、React组件state和Props有什么区别

•  props 是通报给组件的（类似于函数的形参），而state 是在组件内被组件本身管理的（类似于在一个函数内声明的变量
  
• props 是不可修改的，所有 React 组件都必须像纯函数一样掩护它们的 props 不被更改，state 是多变的、可以修改，每次setState都异步更新的。
  

8、React中Props为什么是只读的

React中的props是只读的，告急是为了维护组件的可预测性和可维护性。
假如允许子组件修改props，那么一个父组件将状态通报给多个子组件时，这些子组件就可以随意修改props的值，导致状态的不可预测，给调试和维护带来困难。为了办理这个问题，React采用了只读的props机制。子组件只能读取props的值，但不能修改它们。这种计划模式类似于函数式编程中的纯函数，纯函数不会改变传入的参数，只会返回一个新的值。通过掩护props不被修改，React确保了组件的可预测性和可维护性
9、SetState是同步的还是异步的

默认环境下是异步的，比如在 React 生命周期变乱和合成变乱中，都会走归并操作，延迟更新的策略。但是在 React 无法控制的地方，比如原生变乱，具体就是在 addEventListener 、setTimeout、setInterval 等变乱中，就只能同步更新。这个问题根本缘故原由就是 React 在本身管理的变乱回调和生命周期中，对于 setState 是批量更新的，而在其他时候是立即更新的。
setState 的异步计划是为了性能优化、淘汰渲染次数，假如所有setState是同步的，意味着每执行一次setState时（有可能一个同步代码中，多次setState），都重新vnode diff + dom修改，界面重新渲染，这对性能来说是极为欠好的。假如是异步，则可以把一个同步代码中的多个setState归并成一次组件更新。
10、说说你对React的理解

React是一种用于构建用户界面的JavaScript库，它由Facebook开发，使用react联合组件库我们可以快速构建大型、复杂的Web应用程序；
11、React有什么特点

•  声明式计划：React采用声明式计划，只需要告诉程序想要什么结果而不需要指定实现细节，让开发者更加关注于业务逻辑；
  
• 组件化：React采用组件化的开发方式，将页面拆分为一个个组件，方便视图的拆分和使用，提高了代码的复用率；
  
• 假造DOM：React使用假造DOM和diff算法来有用地操作DOM，提高了应用的性能。
  
• 单向数据流：React采用单向数据流的数据绑定方式，使得数据的流动清晰可见，方便开发者追踪和调试。
  
• 生态体系：React有一个强大的生态体系，包括React Router、Redux等，可以轻松实现路由管理、状态管理等。
  

12、组件化有什么好处

组件是独立和可复用的代码构造单位，它使开发者使用小型、独立和通常可复用的组件构建大型应用;
好处：

• 调试方便，根据报错的组件快速定位问题
  
• 提高可维护性，由于每个组件的职责单一
  
• 提高应用开发服从，快速搭建页面
  

13、声明式和命令式的区别

声明式编程中开发人员只要描述想到达的目标，无须列出实现的所有步调；命令式编程中开发人员需要列出实现的所有步调。
14、怎么理解React的声明式计划

React的声明式计划是指开发者只需要关注UI的状态和数据，而不需要关注具体的UI更新逻辑。通过界说组件的状态来描述UI的外观和活动，当状态发生变革时，React会根据状态的变革主动更新UI
15、React的优点和缺点

优点：

• 提高开发服从：React的声明式计划和组件化开发模式可以提高开发服从，淘汰代码量和开发时间。
  
• 高性能：React采用假造DOM和优化的渲染机制，提高了应用程序的性能和相应速度。
  
• 跨平台：React可以使用React Native开发原生应用程序，实现跨平台开发。
  
• 跨浏览器兼容：假造DOM帮助我们办理了跨浏览器问题，它为我们提供了尺度化的API，甚至在IE8中都是没问题的。
  

缺点：

• React 只是 视图层的一个框架，假如需要做其他事情，需要依赖它的生态体系；如处理单页面路由使用 Router,处理数据使用 Redux。
  

16、什么是假造Dom

假造 DOM是一个能够描述 DOM 结构及其属性信息的 JS 对象。
本质上是JS 和 DOM 之间的一个映射缓存，它告急存储在内存中，当数据变革的时候，天生新的假造DOM使用Diff算法盘算差异，将多次的修改批量的更新到真实DOM上
17、为什么使用假造Dom可以提高性能

• 最小化真实DOM操作：真实DOM操作是相对昂贵的，通过使用假造DOM来盘算处差异后再更新真实DOM，淘汰了对真实DOM的频仍操作，提高性能。
  
• 批量更新：假造DOM允许在组件内部对多次状态变革举行批量更新。当多个状态变革发生时，会将其归并为一次更新操作，只对假造DOM举行一次比较和真实DOM操作，避免了不必要的中间过程，提高了服从。
  

18、受控组件和非受控组件

受控组件是指组件的状态state来控制，非受控组件的状态不由state控制。
他们之间的区别如下：

• 获取数据方式不同：受控组件通常通过在元素上绑定onChange变乱，当表单位素的值发生变革时，会触发onChange变乱，从而更新组件的state；非受控组件的数据获取是通过访问DOM读取到value，比如使用ref来访问inputRef.current.value
  
• 更新数据方式不同：受控组件的数据处理是通过setState()方法举行更新；非受控组件的数据处理不受setState()控制，直接在DOM中处理。
  
• 数据绑定：受控组件实现了双向数据绑定，当表单位素的值发生变革时，会同时更新组件的state和DOM中的值；非受控组件没有实现双向数据绑定，表单位素的值变革只会影响DOM中的值，不会更新组件的state。
  

19、React和Vue的区别

• react 是由Facebook开发的，Vue是由尤雨溪开发的
  
• 在组件化的差异：React推荐的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中,即 all in js;
  
• Vue 推荐的做法是 template 的单文件组件格式(简朴易懂，从传统前端转过来易于理解),即 html,css,JS 写在同一个文件(vue也支持JSX写法)
  
• dom的更新策略不同：
  
• react 会自顶向下全diff。vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。
  
• 在react中，当状态发生改变时，组件树就会自顶向下的全diff, 重新render页面， 重新天生新的假造dom tree, 新旧dom tree举行比较， 举行patch打补丁方式，局部更新dom。所以react为了避免父组件更新而引起不必要的子组件更新， 可以在shouldComponentUpdate做逻辑判断，淘汰没必要的render， 以及重新天生假造dom，做差量对比过程。
  
• 在vue中， 通过Object.defineProperty 把 data 属性全部转为 getter/setter，追踪每个组件的依赖关系，同时watcher实例对象会在组件渲染时，将属性纪录为dep, 当dep 项中的 setter被调用时，通知watch重新盘算，使得关联组件更新。
  
• Diff 算法借助元素的 Key 判断元素是新增、删除、修改，从而淘汰不必要的元素重渲染。
  
• 框架本质不同
  
• Vue本质是MVVM框架，由MVC发展而来；React是前端组件化框架，由后端组件化发展而来。
  
• react 没有双向数据绑定，就父子组件的数据流动来说，都是单项的，子组件不能直接修改父组件的prop，但是vue 有v-modle 监听视图的修改更新数据，而react中通常需要手动调用setState 方法来更新状态
  

20、React和Vue的共同点

他们都是用于构建用户界面的JavaScript库，提供了一套UI办理方案，都有声明式和组件化开发的特点，在渲染上都使用了假造DOM举行优化，并且都支持数据驱动，通常开发者无需手动操作DOM，他们也都支持服务端渲染都有native方案…

• 都有组件化开发和假造DOM
  
• 都支持数据驱动，不需要直接操作DOM
  
• 都支持服务端渲染
  
• 都有native的方案，react native weex
  
• 都将注意力集中保持在焦点库，而将其他功能如路由和全局状态管理交给相关的
  

 21、React高阶组件、Render Props、Hooks有什么区别

高阶组件:
(High Order Component，简称HOC)它是一种基于 React 的组合特性而形成的计划模式。具体而言，高阶组件是参数为组件，返回一个功能增强的新组件的函数。
优点：高阶组件通常可以用来逻辑复用、不影响被包裹组件的内部逻辑，比如权限控制、数据校验、非常处理。
缺点∶固定的 props 可能会由于重名而被覆盖（假如被包裹的组件和高阶组件有同名props）

 render props：
"render prop"是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简朴技术。
具有render prop 的组件接受一个返回React元素的函数，将render的渲染逻辑注入到组件内部。在这里，"render"的命名可以是任何其他有用的标识符。
明白话：
在 React 组件之间使用一个值为函数的 prop 共享代码的简朴技术。我们给组件通报一个名为render的props，这个props的参数是组件内部调用时通报的数据，返回值是一个react元素；在组件内部通过this.props.render调用将渲染逻辑注入到组件内部，同时也可以将组件内的状态在调用通报给外部；在这里，"render"的命名可以是任何其他有用的标识符。
功能:将一个组件内的 state 作为 props 通报给调用者, 调用者可以动态的决定如何渲染.

优点：数据共享、代码复用，将组件内的state作为props通报给调用者，将渲染逻辑交给调用者
缺点：无法在 return 语句外访问数据、嵌套写法不敷优雅
看下多层嵌套的环境：

Hook
是 React 16.8 的新增特性。它可以让你在不编写 class 的环境下使用 state 以及其他的 React 特性。通过自界说hook，可以复用代码逻辑。

优点：
1、办理hoc的prop 重名问题，hook 可以重命名
2、hook 可以让你在 return 之外使用数据
3、hook 不会嵌套，并且来源清晰
需要注意的是：hook只能在组件顶层使用，不可在分支语句中使用。
总结
Hoc、render props和hook都是为了办理代码复用的问题，但是hoc和render props都有特定的使用场景和明显的缺点。hook是react16.8更新的新的API，让组件逻辑复用更简洁明白，同时也办理了hoc和render props的一些缺点。
22、React.Component 和 React.PureComponent 的区别

PureComponent表现一个纯组件，相对于普通组件来说，它会主动执行shouldComponentUpdate生命周期函数方法，对比新旧props 和 state是否发生变革，假如没有发生变革return false来阻止页面的更新，从而淘汰不必要的render执行，提高组件的性能。
不过pureComponent中的 shouldComponentUpdate() 举行的是浅比较，只会检查对象或数组的第一层属性，假如有深条理的嵌套无法正确判断，并且无法处理函数和对象引用，两个对象的内容完全雷同，假如它们在内存中的地址不同，那么它们也被认为是不同的。
为了办理这个问题，我们可以通过自界说更新逻辑或者使用第三方库来实现深对比；
23、对React中Fragment的理解、它的使用场景是什么?

React中的Fragment是一种特殊的组件，用于在不增长额外DOM节点的环境下组合多个子组件。
在React中，组件返回的元素只能有一个根元素，为了不添加多余的DOM节点，我们可以使用Fragment标签来包裹所有的元素，Fragment标签不会渲染出任何元素。
可以使用<React.Fragment>或<>和</>来创建Fragment组件
24、React实现缓存的方式有哪些？他们有什么区别?

• 在类组件中，使用PureComponent, 只有当组件的props或state发生改变时才会重新渲染组件，提高性能；
  
• 在函数式组件中，React.memo它会通过对前一次渲染时的props和下一次渲染时的props举行浅比较，来确定是否重新渲染组件。
  
• useCallback缓存函数的引用
  
• useMemo 缓存盘算数据的值
  

25、React如何获取组件对应的Dom元素

第一种：React.createRef
创建React.createRef，并通过Ref属性附加到React元素

第二种：回调情势的Refs
React将在组件挂载时，会调用Ref回调函数并传入Dom元素，当卸载时调用它并传入null。在ComponentDidMount或ComponentDidUpdate触发前，React会包管Refs肯定是最新的。

第三种:字符串范例ref(React官方不建议使用它，由于String范例的Refs存在一些问题。它已过期并可能会在未来的版本被移除)

 26、React变乱机制

React基于浏览器的变乱机制实现了一套本身的变乱机制。
React 合成变乱体系模仿了原生变乱所有的功能，并且根据 W3C 规范来界说合成变乱，兼容了所有的浏览器，拥有和浏览器原生变乱雷同的接口。
之所以要有本身的合成变乱，由于不同浏览器的变乱体系存在差异， 合成变乱就是一个跨浏览器包装器，实现更好的跨平台兼容性。
同时我们在JSX 上写的变乱并没有绑定在对应的真实 DOM 上，而是通过变乱代理的方式，将所有的变乱都同一绑定在了 document 上，并且使用一个变乱监听行止理，这个变乱监听器上维持了一个映射来保存所有组件内部的变乱监听和处理函数。当变乱触发时，从数组中弹出变乱对象，当组件挂载或卸载时，只是在这个同一的变乱监听器上插入或删除一些对象。避免了频仍地创建和烧毁变乱对象办理了垃圾接纳问题。
所以在react中会先执行原生变乱，再执行react 变乱，React 的所有变乱都是挂载到 document 上的，认真实的 DOM 触发冒泡，到 document 后才会对 React 变乱举行处理。假如真实DOM阻止冒泡会导致react 变乱不会执行，并且react 的合成变乱中不能像原生js一样直接return false ，由于return false 变乱会同时preventDefault() 和 stopPropagation() ，可能产生混淆，react希望我们明确地表明其意图，提高代码的可读性，需要明确的调用preventDefault()来阻止默认活动，执行完react 变乱最后执行真正在 document 上挂载的变乱。
27、合成变乱和普通变乱的区别

• 对于变乱名称命名方式，原生变乱为全小写，react 变乱采用小驼峰；
  
• 对于变乱函数处理语法，原生变乱为字符串，react 变乱为函数；
  

        3.react 变乱不能采用 return false 的方式来阻止浏览器的默认活动，而必须要地明确地调用preventDefault()来阻止默认活动。
在原生的js变乱中return false 现实上会同时调用 event.preventDefault() 和 event.stopPropagation()由于这个活动可能导致不预期的副作用，因此 React 的变乱体系选择只调用一个方法来明确表达阻止默认活动的意图。所以当需要阻止默认活动时调用preventDefault()，阻止冒泡调用event.stopPropagation
28、使用合成变乱有什么优点

React 的合成变乱体系是为了办理浏览器原生变乱体系的一些问题而计划的

• 兼容所有浏览器，更好的跨平台；在React中，变乱处理程序将通报SyntheticEvent的实例，这是一个跨浏览器原生变乱包装器，它根据 W3C 规范 来界说合成变乱，在底层抹平了不同浏览器的差异，在上层面向开发者暴露同一的、稳定的、与DOM原生变乱雷同的变乱接口。
  
• 将变乱同一存放在一个数组，便于同一管理
  

在浏览器原生变乱体系中，每个变乱监听器都是单独添加到 DOM 元素上的。这意味着假如你为同一个元素添加多个变乱监听器，每个监听器都会有一个独立的引用。当这个元素被烧毁时，你需要显式地移除所有这些变乱监听器，否则会造成内存走漏。
而 React 的合成变乱体系通过将所有变乱监听器同一存放在一个数组中来避免这个问题。当你为一个元素添加变乱监听器时，React 会在内部维护一个监听器数组。当这个元素被烧毁时，React 只需要简朴地清空这个数组，而不需要逐个移除监听器。如许就避免了内存走漏的问题。
29、React中变乱执行的顺序

先执行原生的变乱，比方

再执行react 变乱，React 的所有变乱都是挂载到 document 上的，认真实的 DOM 触发冒泡，到 document 后才会对 React 变乱举行处理。比方：

最后执行真正在 document 上挂载的变乱

合成变乱会冒泡到 document 上，所以尽量避免原生变乱和合成变乱混用。假如原生变乱阻止冒泡，那么就会导致合成变乱不执行
30、React中可以在Render访问Refs吗?为什么？

不可以，render 阶段 DOM 还没有天生，无法获取 DOM。
31、类组件与函数组件有什么异同?

• 计划头脑上，类组件是面向对象编程头脑，我们需要继承React.Component并调用render方法返回一个react元素；而函数组件是函数式编程头脑，吸取一个props可以直接调用，返回一个新的React元素。
  
• 类组件使用state对象界说状态变量，有诸如componentDidMount、shouldComponentUpdate等生命周期钩子函数；而函数组件没有this，使用一系列的内置hooks实现对应的功能，比如使用useState创建状态变量，使用useEffect实现类似于componentDidMount、shouldComponentUpdate等生命周期钩子函数的功能。
  
• 缓存方式不同，类组件可以通过pureCompoment 和 shouldComponentUpdata 来缓存，函数式组件可以使用React.memo 、 useMemo、useCallBack 缓存
  
• 实现复用的方式不同，类组件使用hoc（高阶组件）、render props实现组件的逻辑复用、拓展组件的功能；而函数组件使用自界说hooks实现组件的逻辑复用。
  

32、React什么时候会重新渲染，重新渲染时发生了什么

• state 状态发生变革
  
• 父组件重新渲染引发子组件重新渲染
  
• props 改变
  

重新渲染时react 会天生新的假造DOM树，和旧的假造DOM使用diff算法对比，将差异放入一个对象中，然后遍历该对象，更新真实DOM
33、有状态组件和无状态组件的区别

• 有状态组件通常指的是类组件，类组件可以维护自身的状态变量，即组件的 state ，类组件另有不同的生命周期方法。
  
• 无状态组件可以是类组件也可以是函数式组件，优先设置为函数组件，无状态组件内部不维护state，只根据外部组件传入的props举行渲染的组件，当props改变时，组件重新渲染。无状态组件不能使用ref 和生命周期方法，如自界说的 <Button/>、 <Input /> 等组件。
  

34、何时使用Refs

• 管理焦点，文本选择或媒体播放。
  
• 触发强制动画。
  
• 集成第三方 DOM 库。
  

35、React组件的构造函数有什么左右？它是必须的吗？

两个作用：

• 通过将对象分配给this.state来初始化当地状态
  
• 将变乱处理程序方法绑定到实例上
  

非必须，设置state的初始值或者绑定变乱时，需要加上构造函数

子类必须在constructor方法中调用super方法，由于子类没有本身的this对象，而是继承父类的this对象，然后对其举行加工，假如不调用super方法子类就得不到this对象并且会报错
36、说说你对React Hook的了解

React-Hooks 是一套能够使函数组件更强大、更灵活的“钩子”。
从前我们使用类组件继承React.Component就可以使用state 管理状态，使用生命周期函数。
但类式组件的问题是写法繁琐理解资本高，实现逻辑复用困难，通常为了复用一部门逻辑功能需要继承整个组件，即使使用高阶组件也会增长组件的嵌套层级，导致代码难以理解。
而函数式组件语法更加简洁，并且更利于逻辑的拆分和组件的复用。
但早期的函数式组件无法维护和界说本身的state，也没有生命周期，这就造成了很多范围性，而hook正式为了补全函数式组件缺失的功能出现，我们可以使用这些钩子实现缺失的功能，比如useState 界说状态、useEffect 实现生命周期方法、useContetx 实现组件跨级通报数据等等；使我们可以在不使用class组件的环境下也能使用react的特性；
37、React Hook的使用限制有哪些

不要在循环，条件或嵌套函数中调用Hook，必须始终在 React函数的顶层使用Hook
这是由于React需要使用调用顺序来正确更新相应的状态，以及调用相应的钩子函数。一旦在循环或条件分支语句中调用Hook，就容易导致调用顺序的不一致性，从而产生难以预料到的后果。
38、React Hooks 办理了哪些问题

• 组件间状态逻辑复用困难：在 Hooks 出现之前，React 有两种告急的方式来复用组件间的状态逻辑，高阶组件（HOC）和 render props。但这两种方式都有本身的问题，比方，HOC 可能会导致 props 命名冲突，render props 则可能会导致组件树嵌套过深。引入 Hooks 后，可以使用自界说 Hook 来更加方便地复用状态逻辑。
  
• 复杂组件变得难以理解：在 class 组件中，假如有很多的生命周期方法，逻辑可能会分散在各个生命周期方法中，导致同一块功能的代码被拆分到了不同的地方。而且，由于在生命周期方法中经常需要处理清算逻辑，很容易导致代码混乱。引入 Hooks 后，可以使用 Effect Hook（useEffect）将相关的代码构造在一起。
  
• 难以理解的 class 组件：class 组件需要了解很多 JavaScript 中的概念，比方 this 的绑定，以及不能将方法直接传给子组件，否则可能会导致不必要的渲染。别的，class 组件的生命周期方法也有很多，需要我们理解和影象。引入 Hooks 后，可以完全使用函数组件，不再需要 this，也不再需要生命周期方法
  

39、useEffect与useLayoutEffect 的区别

共同点：useEffect 与 useLayoutEffect 两者都是用于处理副作用，这些副作用包括改变 DOM、设置订阅、操作定时器等。
区别：

• useEffect是在组件完成渲染之后(包括初次渲染和更新渲染)异步触发的。它不会阻塞组件的渲染过程。
  
• useLayoutEffect的副作用操作是在组件渲染完成后的"结构阶段"执行的。这意味着它会在浏览器执行绘制之前执行，对DOM的盘算和结构有直接影响。因此，useLayoutEffect中的副作用操作会在浏览器更新屏幕之前同步触发。
  

假如在使用useLayoutEffect时举行大量盘算或阻塞操作，可能会导致用户界面的卡顿和不相应。因此，一样平常环境下推荐使用useEffect，只有在需要在DOM更新之前立即执行某些操作时，才使用useLayoutEffect。
40、为什么useState要使用数组而不是对象

useState 返回的是 array 而不是 object 的缘故原由就是为了低落使用的复杂度，返回数组的话可以直接根据顺序解构，而返回对象的话要想使用多次就需要界说别名；
比如这里使用数组直接对元素命名，而使用对象需要在解构的时候和对象内界说的名称一致，假如这个名称想多次使用还需要重命名；

41、真是Dom和假造Dom的区别

假造DOM 是一种编程概念，将UI通过数据结构假造的表现出来，保存在内存中，实在就是一个JS对象，代表一个假造节点；

react在渲染之前将代码构建为假造DOM树，运行时渲染器调用渲染函数然后遍历假造DOM树并创建现实的DOM节点，当一个依赖发生变革的时候会创建一个更新后的假造DOM树，运行时渲染器使用diff算法遍历对比新旧树，将必要的更新应用到真实的DOM上，从而有用的淘汰页面渲染的次数，淘汰修改DOM的重绘重排次数，提高渲染性能。
42、diff算法对比的过程是怎么样的

触发更新 → 天生补丁 → 应用补丁

---

43、React加key的作用 

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而淘汰不必要的元素重渲染.
44、对SSR的理解

ssr 就是服务端渲染，它指的是在页面初次加载时，由服务端将数据和DOM组合成一个html字符串返回给前端，直接交给浏览器剖析；传统的客户端渲染csr 通常是服务端先返回一个body为空的html再加载js文件，执行js文件发送请求，最后将请求的数据填充到dom中。
使用ssr最大的上风就是在大型项目标首屏加载上速度会更快，由于不依赖于js文件淘汰请求执行时间，直接剖析html字符串。
其次有利于seo，服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML，网络爬中就可以抓取到完整页面的信息。
但是也有缺点，服务端渲染会增大服务器的压力，尤其是高并发访问的环境，会大量占用服务端CPU资源;第二点就是对于开发人员来说要实现服务端渲染需要把握打包工具以及服务端语法，有肯定的学习资本。
45、对Portals的理解

React Portals（React 门户）是 React 提供的一种机制，用于我们将子组件渲染到 DOM 树中其他位置，而不受组件条理结构的限制。
通常用于处理一些特殊的 UI 结构需求，比如弹出窗口，我们可以将他放在body上，就不会受父组件容器的限制，但是这种移动仅仅是物理上的移动，它任然可以读取父组件的上下文。
createPortal(children, domNode, key?)
它接受三个参数，
第一个是children 任何可以用React渲染的东西，比如一段JSX或者组件，第二个参数是 domNode 已经存在的dom节点，第三个参数是key
46、js 中 变乱绑定的方式

持续增补中。。如有错误接待改正

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。