你对 Time Slice的了解?

工夫分片

  • React 在渲染（render）的时候，不会阻塞当初的线程
  • 如果你的设施足够快，你会感觉渲染是同步的
  • 如果你设施十分慢，你会感觉还算是灵活的
  • 尽管是异步渲染，然而你将会看到残缺的渲染，而不是一个组件一行行的渲染进去
  • 同样书写组件的形式
也就是说，这是React背地在做的事件，对于咱们开发者来说，是通明的，具体是什么样的成果呢？

React- Router有几种模式？

有以下几种模式。
HashRouter，通过散列实现，路由要带#。
BrowerRouter，利用HTML5中 history API实现，须要服务器端反对，兼容性不是很好。

和谐阶段 setState外部干了什么

  • 当调用 setState 时，React会做的第一件事件是将传递给 setState 的对象合并到组件的以后状态
  • 这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最无效的形式，依据这个新的状态来更新UI。 为此，React将构建一个新的 React 元素树（您能够将其视为 UI 的对象示意）
  • 一旦有了这个树，为了弄清 UI 如何响应新的状态而扭转，React 会将这个新树与上一个元素树相比拟（ diff ）
通过这样做， React 将会晓得产生的确切变动，并且通过理解产生什么变动，只需在相对必要的状况下进行更新即可最小化 UI 的占用空间

为什么虚构 dom 会进步性能

虚构 dom 相当于在 js 和实在 dom 两头加了一个缓存，利用 dom diff 算法防止了没有必要 的 dom 操作，从而进步性能

具体实现步骤如下:

  1. 用 JavaScript 对象构造示意 DOM 树的构造;而后用这个树构建一个真正的 DOM 树， 插到文档当中;
  2. 当状态变更的时候，从新结构一棵新的对象树。而后用新的树和旧的树进行比拟，记 录两棵树差别;
  3. 把 2 所记录的差别利用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。

setState办法的第二个参数有什么用？应用它的目标是什么？

它是一个回调函数，当 setState办法执行完结并从新渲染该组件时调用它。在工作中，更好的形式是应用 React组件生命周期之——“存在期”的生命周期办法，而不是依赖这个回调函数。

export class App extends Component {  constructor(props) {    super(props);    this.state = {      username: "雨夜清荷",    };  }  render() {    return <div> {this.state.username}</div>;  }  componentDidMount() {    this.setstate(      {        username: "有课前端网",      },      () => console.log("re-rendered success. ")    );  }}

React Portal 有哪些应用场景

  • 在以前， react 中所有的组件都会位于 #app 下，而应用 Portals 提供了一种脱离 #app 的组件
  • 因而 Portals 适宜脱离文档流(out of flow) 的组件，特地是 position: absolute 与 position: fixed的组件。比方模态框，告诉，正告，goTop 等。

以下是官网一个模态框的示例，能够在以下地址中测试成果

<html>  <body>    <div id="app"></div>    <div id="modal"></div>    <div id="gotop"></div>    <div id="alert"></div>  </body></html>
const modalRoot = document.getElementById('modal');class Modal extends React.Component {  constructor(props) {    super(props);    this.el = document.createElement('div');  }  componentDidMount() {    modalRoot.appendChild(this.el);  }  componentWillUnmount() {    modalRoot.removeChild(this.el);  }  render() {    return ReactDOM.createPortal(      this.props.children,      this.el,    );  }}

React Hooks当中的useEffect是如何辨别生命周期钩子的

useEffect能够看成是componentDidMount，componentDidUpdate和componentWillUnmount三者的联合。useEffect(callback, [source])接管两个参数，调用形式如下
useEffect(() => {   console.log('mounted');   return () => {       console.log('willUnmount');   } }, [source]);
生命周期函数的调用次要是通过第二个参数[source]来进行管制，有如下几种状况：
  • [source]参数不传时，则每次都会优先调用上次保留的函数中返回的那个函数，而后再调用内部那个函数；
  • [source]参数传[]时，则内部的函数只会在初始化时调用一次，返回的那个函数也只会最终在组件卸载时调用一次；
  • [source]参数有值时，则只会监听到数组中的值发生变化后才优先调用返回的那个函数，再调用内部的函数。

参考 前端进阶面试题具体解答

Redux 中间件原理

  • 指的是action和store之间，沟通的桥梁就是dispatch，action就是个对象。比方你用了redux-thunk，action也能够是个函数，怎么实现这个过程，就是通过中间件这个桥梁帮你实现的。action达到store之前会走中间件，这个中间件会把函数式的action转化为一个对象，在传递给store

react性能优化是哪个周期函数

shouldComponentUpdate 这个办法用来判断是否须要调用render办法从新描述dom。因为dom的描述十分耗费性能，如果咱们能在shouldComponentUpdate方法中可能写出更优化的dom diff算法，能够极大的进步性能

组件是什么？类是什么？类变编译成什么

  • 组件指的是页面的一部分，实质就是一个类，最实质就是一个构造函数
  • 类编译成构造函数

react中的Portal是什么？

Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的形式。
第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或碎片。
第二个参数（container）则是一个 DOM 元素。

ReactDOM.createPortal(child, container)

高阶组件

高阶函数：如果一个函数承受一个或多个函数作为参数或者返回一个函数就可称之为高阶函数。

高阶组件：如果一个函数 承受一个或多个组件作为参数并且返回一个组件 就可称之为 高阶组件。

react 中的高阶组件

React 中的高阶组件次要有两种模式：属性代理和反向继承。

属性代理 Proxy

  • 操作 props
  • 抽离 state
  • 通过 ref 拜访到组件实例
  • 用其余元素包裹传入的组件 WrappedComponent

反向继承

会发现其属性代理和反向继承的实现有些相似的中央，都是返回一个继承了某个父类的子类，只不过属性代理中继承的是 React.Component，反向继承中继承的是传入的组件 WrappedComponent。

反向继承能够用来做什么：

1.操作 state

高阶组件中能够读取、编辑和删除WrappedComponent组件实例中的state。甚至能够减少更多的state项，然而十分不倡议这么做因为这可能会导致state难以保护及治理。

function withLogging(WrappedComponent) {        return class extends WrappedComponent {            render() {                return (                    <div>;                        <h2>;Debugger Component Logging...<h2>;                        <p>;state:<p>;                        <pre>;{JSON.stringify(this.state, null, 4)}<pre>;                        <p>props:<p>;                        <pre>{JSON.stringify(this.props, null, 4)}<pre>;                        {super.render()}                    <div>;                );            }        };    }

2.渲染劫持（Render Highjacking）

条件渲染通过 props.isLoading 这个条件来判断渲染哪个组件。

批改由 render() 输入的 React 元素树

在 ReactNative中，如何解决 adb devices找不到连贯设施的问题？

在应用 Genymotion时，首先须要在SDK的 platform-tools中退出环境变量，而后在 Genymotion中单击 Setting，抉择ADB选项卡，单击 Use custom Android SDK tools，浏览本地SDK的地位，单击OK按钮就能够了。启动虛拟机后，在cmd中输出 adb devices能够查看设施。

shouldComponentUpdate 的作用

shouldComponentUpdate 容许咱们手动地判断是否要进行组件更新，依据组件的利用场景设置函数的正当返回值可能帮咱们防止不必要的更新

对虚构 DOM 的了解？虚构 DOM 次要做了什么？虚构 DOM 自身是什么？

从实质上来说，Virtual Dom是一个JavaScript对象，通过对象的形式来示意DOM构造。将页面的状态形象为JS对象的模式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将屡次DOM批改的后果一次性的更新到页面上，从而无效的缩小页面渲染的次数，缩小批改DOM的重绘重排次数，进步渲染性能。

虚构DOM是对DOM的形象，这个对象是更加轻量级的对DOM的形容。它设计的最后目标，就是更好的跨平台，比方node.js就没有DOM，如果想实现SSR，那么一个形式就是借助虚构dom，因为虚构dom自身是js对象。 在代码渲染到页面之前，vue或者react会把代码转换成一个对象（虚构DOM）。以对象的模式来形容实在dom构造，最终渲染到页面。在每次数据发生变化前，虚构dom都会缓存一份，变动之时，当初的虚构dom会与缓存的虚构dom进行比拟。在vue或者react外部封装了diff算法，通过这个算法来进行比拟，渲染时批改扭转的变动，原先没有产生扭转的通过原先的数据进行渲染。

另外古代前端框架的一个根本要求就是毋庸手动操作DOM，一方面是因为手动操作DOM无奈保障程序性能，多人合作的我的项目中如果review不严格，可能会有开发者写出性能较低的代码，另一方面更重要的是省略手动DOM操作能够大大提高开发效率。

为什么要用 Virtual DOM：

（1）保障性能上限，在不进行手动优化的状况下，提供过得去的性能

上面比照一下批改DOM时实在DOM操作和Virtual DOM的过程，来看一下它们重排重绘的性能耗费∶

  • 实在DOM∶ 生成HTML字符串＋ 重建所有的DOM元素
  • Virtual DOM∶ 生成vNode＋ DOMDiff＋必要的DOM更新

Virtual DOM的更新DOM的筹备工作消耗更多的工夫，也就是JS层面，相比于更多的DOM操作它的生产是极其便宜的。尤雨溪在社区论坛中说道∶ 框架给你的保障是，你不须要手动优化的状况下，我仍然能够给你提供过得去的性能。 （2）跨平台 Virtual DOM实质上是JavaScript的对象，它能够很不便的跨平台操作，比方服务端渲染、uniapp等。

React中constructor和getInitialState的区别?

两者都是用来初始化state的。前者是ES6中的语法，后者是ES5中的语法，新版本的React中曾经废除了该办法。

getInitialState是ES5中的办法，如果应用createClass办法创立一个Component组件，能够主动调用它的getInitialState办法来获取初始化的State对象，

var APP = React.creatClass ({  getInitialState() {    return {         userName: 'hi',        userId: 0     };　}})

React在ES6的实现中去掉了getInitialState这个hook函数，规定state在constructor中实现，如下：

Class App extends React.Component{    constructor(props){      super(props);      this.state={};    }  }

怎么用 React.createElement 重写上面的代码

Question：

const element = (  <h1 className="greeting">    Hello, rdhub.cn!  </h1>);

Answer：

const element = React.createElement(  'h1',  {className: 'greeting'},  'Hello, rdhub.cn!');

在 React 中，何为 state

State 和 props 相似，但它是公有的，并且齐全由组件本身管制。State 实质上是一个持有数据，并决定组件如何渲染的对象。

react旧版生命周期函数

初始化阶段

  • getDefaultProps:获取实例的默认属性
  • getInitialState:获取每个实例的初始化状态
  • componentWillMount：组件行将被装载、渲染到页面上
  • render:组件在这里生成虚构的DOM节点
  • componentDidMount:组件真正在被装载之后

运行中状态

  • componentWillReceiveProps:组件将要接管到属性的时候调用
  • shouldComponentUpdate:组件承受到新属性或者新状态的时候（能够返回false，接收数据后不更新，阻止render调用，前面的函数不会被继续执行了）
  • componentWillUpdate:组件行将更新不能批改属性和状态
  • render:组件从新描述
  • componentDidUpdate:组件曾经更新

销毁阶段

  • componentWillUnmount:组件行将销毁

为什么应用jsx的组件中没有看到应用react却须要引入react？

实质上来说JSX是React.createElement(component, props, ...children)办法的语法糖。在React 17之前，如果应用了JSX，其实就是在应用React， babel 会把组件转换为 CreateElement 模式。在React 17之后，就不再须要引入，因为 babel 曾经能够帮咱们主动引入react。

什么是 React Context?

Context 通过组件树提供了一个传递数据的办法，从而防止了在每一个层级手动的传递 props 属性。