pureComponent和FunctionComponent区别

PureComponent和Component完全相同，然而在shouldComponentUpdate实现中，PureComponent应用了props和state的浅比拟。次要作用是用来进步某些特定场景的性能

为什么虚构DOM会进步性能

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

为什么 JSX 中的组件名要以大写字母结尾

因为 React 要晓得以后渲染的是组件还是 HTML 元素

useEffect(fn, []) 和 componentDidMount 有什么差别

useEffect 会捕捉 props 和 state。所以即使在回调函数里，你拿到的还是初始的 props 和 state。如果想得到“最新”的值，能够应用 ref。

React 中 refs 干嘛用的？

Refs 提供了一种拜访在render办法中创立的 DOM 节点或者 React 元素的办法。在典型的数据流中，props 是父子组件交互的惟一形式，想要批改子组件，须要应用新的pros从新渲染它。凡事有例外，某些状况下咱们须要在典型数据流外，强制批改子代，这个时候能够应用 Refs。
咱们能够在组件增加一个 ref 属性来应用，该属性的值是一个回调函数，接管作为其第一个参数的底层 DOM 元素或组件的挂载实例。

class UnControlledForm extends Component {  handleSubmit = () => {    console.log("Input Value: ", this.input.value);  };  render() {    return (      <form onSubmit={this.handleSubmit}>        <input type="text" ref={(input) => (this.input = input)} />        <button type="submit">Submit</button>      </form>    );  }}

请留神，input 元素有一个ref属性，它的值是一个函数。该函数接管输出的理论 DOM 元素，而后将其放在实例上，这样就能够在 handleSubmit 函数外部拜访它。
常常被误会的只有在类组件中能力应用 refs，然而refs也能够通过利用 JS 中的闭包与函数组件一起应用。

function CustomForm({ handleSubmit }) {  let inputElement;  return (    <form onSubmit={() => handleSubmit(inputElement.value)}>      <input type="text" ref={(input) => (inputElement = input)} />      <button type="submit">Submit</button>    </form>  );}

React.forwardRef有什么用

forwardRef

  • 应用forwardRef（forward在这里是「传递」的意思）后，就能跨组件传递ref。
  • 在例子中，咱们将inputRef从Form跨组件传递到MyInput中，并与input产生关联
const MyInput = forwardRef((props, ref) => {  return <input {...props} ref={ref} />;});function Form() {  const inputRef = useRef(null);  function handleClick() {    inputRef.current.focus();  }  return (    <>      <MyInput ref={inputRef} />      <button onClick={handleClick}>        Focus the input      </button>    </>  );}

useImperativeHandle

除了「限度跨组件传递ref」外，还有一种「避免ref失控的措施」，那就是useImperativeHandle，他的逻辑是这样的：既然「ref失控」是因为「应用了不该被应用的DOM办法」（比方appendChild），那我能够限度「ref中只存在能够被应用的办法」。用useImperativeHandle批改咱们的MyInput组件：
const MyInput = forwardRef((props, ref) => {  const realInputRef = useRef(null);  useImperativeHandle(ref, () => ({    focus() {      realInputRef.current.focus();    },  }));  return <input {...props} ref={realInputRef} />;});

当初，Form组件中通过inputRef.current只能取到如下数据结构：

{  focus() {    realInputRef.current.focus();  },}
就杜绝了「开发者通过ref取到DOM后，执行不该被应用的API，呈现ref失控」的状况
  • 为了避免错用/滥用导致ref失控，React限度「默认状况下，不能跨组件传递ref」
  • 为了破除这种限度，能够应用forwardRef。
  • 为了缩小ref对DOM的滥用，能够应用useImperativeHandle限度ref传递的数据结构。

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

什么状况下应用异步组件

  • 进步页面加载速度，应用reloadable把各个页面别离独自打包，按需加载

React有哪些优化性能的伎俩

类组件中的优化伎俩

  • 应用纯组件 PureComponent 作为基类。
  • 应用 React.memo 高阶函数包装组件。
  • 应用 shouldComponentUpdate 生命周期函数来自定义渲染逻辑。

办法组件中的优化伎俩

  • 应用 useMemo。
  • 应用 useCallBack。

其余形式

  • 在列表须要频繁变动时，应用惟一 id 作为 key，而不是数组下标。
  • 必要时通过扭转 CSS 款式暗藏显示组件，而不是通过条件判断显示暗藏组件。
  • 应用 Suspense 和 lazy 进行懒加载，例如：
import React, { lazy, Suspense } from "react";export default class CallingLazyComponents extends React.Component {  render() {    var ComponentToLazyLoad = null;    if (this.props.name == "Mayank") {      ComponentToLazyLoad = lazy(() => import("./mayankComponent"));    } else if (this.props.name == "Anshul") {      ComponentToLazyLoad = lazy(() => import("./anshulComponent"));    }    return (      <div>        <h1>This is the Base User: {this.state.name}</h1>        <Suspense fallback={<div>Loading...</div>}>          <ComponentToLazyLoad />        </Suspense>      </div>    )  }}

这三个点(...)在 React 干嘛用的？

... 在React（应用JSX）代码中做什么？它叫什么？

<Modal {...this.props} title='Modal heading' animation={false}/>

这个叫扩大操作符号或者开展操作符，例如，如果this.props蕴含a：1和b：2，则

<Modal {...this.props} title='Modal heading' animation={false}>

等价于上面内容：

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

扩大符号不仅实用于该用例，而且对于创立具备现有对象的大多数（或全副）属性的新对象十分不便，在更新state 咱们就常常这么做：

this.setState((prevState) => {  return { foo: { ...prevState.foo, a: "updated" } };});

shouldComponentUpdate有什么用？为什么它很重要？

组件状态数据或者属性数据产生更新的时候，组件会进入存在期，视图会渲染更新。在生命周期办法 should ComponentUpdate中，容许抉择退出某些组件（和它们的子组件）的和解过程。
和解的最终目标是依据新的状态，以最无效的形式更新用户界面。如果咱们晓得用户界面的某一部分不会扭转，那么没有理由让 React弄清楚它是否应该更新渲染。通过在 shouldComponentUpdate办法中返回 false, React将让以后组件及其所有子组件放弃与以后组件状态雷同。

diff算法是怎么运作

每一种节点类型有本人的属性，也就是prop，每次进行diff的时候，react会先比拟该节点类型，如果节点类型不一样，那么react会间接删除该节点，而后间接创立新的节点插入到其中，如果节点类型一样，那么会比拟prop是否有更新，如果有prop不一样，那么react会断定该节点有更新，那么重渲染该节点，而后在对其子节点进行比拟，一层一层往下，直到没有子节点

约束性组件（ controlled component）与非约束性组件（ uncontrolled component）有什么区别？

在 React中，组件负责管制和治理本人的状态。
如果将HTML中的表单元素（ input、 select、 textarea等）增加到组件中，当用户与表单产生交互时，就波及表单数据存储问题。依据表单数据的存储地位，将组件分成约東性组件和非约東性组件。
约束性组件（ controlled component）就是由 React管制的组件，也就是说，表单元素的数据存储在组件外部的状态中，表单到底出现什么由组件决定。
如下所示， username没有存储在DOM元素内，而是存储在组件的状态中。每次要更新 username时，就要调用 setState更新状态；每次要获取 username的值，就要获取组件状态值。

class App extends Component {  //初始化状态  constructor(props) {    super(props);    this.state = {      username: "有课前端网",    };  }  //查看后果  showResult() {    //获取数据就是获取状态值    console.log(this.state.username);  }  changeUsername(e) {    //原生办法获取    var value = e.target.value;    //更新前，能够进行脏值检测    //更新状态    this.setState({      username: value,    });  }  //渲染组件  render() {    //返回虚构DOM    return (      <div>        <p>          {/*输入框绑定va1ue*/}          <input type="text" onChange={this.changeUsername.bind(this)} value={this.state.username} />        </p>        <p>          <button onClick={this.showResult.bind(this)}>查看后果</button>        </p>      </div>    );  }}

非约束性组件（ uncontrolled component）就是指表单元素的数据交由元素本身存储并解决，而不是通过 React组件。表单如何出现由表单元素本身决定。
如下所示，表单的值并没有存储在组件的状态中，而是存储在表单元素中，当要批改表单数据时，间接输出表单即可。有时也能够获取元素，再手动批改它的值。当要获取表单数据时，要首先获取表单元素，而后通过表单元素获取元素的值。
留神：为了不便在组件中获取表单元素，通常为元素设置ref属性，在组件外部通过refs属性获取对应的DOM元素。

class App extends Component {  //查看后果  showResult() {    //获取值    console.log(this.refs.username.value);    //批改值，就是批改元素本身的值    this.refs.username.value = "业余前端学习平台";    //渲染组件    //返回虚构DOM    return (      <div>        <p>          {/*非约束性组件中，表单元素通过 defaultvalue定义*/}          <input type="text" ref=" username" defaultvalue="有课前端网" />        </p>        <p>          <button onClick={this.showResult.bind(this)}>查看后果</button>        </p>      </div>    );  }}

尽管非约東性组件通常更容易实现，能够通过refs间接获取DOM元素，并获取其值，然而 React倡议应用约束性组件。次要起因是，约東性组件反对即时字段验证，容许有条件地禁用/启用按钮，强制输出格局等。

对有状态组件和无状态组件的了解及应用场景

（1）有状态组件

特点：

  • 是类组件
  • 有继承
  • 能够应用this
  • 能够应用react的生命周期
  • 应用较多，容易频繁触发生命周期钩子函数，影响性能
  • 外部应用 state，保护本身状态的变动，有状态组件依据内部组件传入的 props 和本身的 state进行渲染。

应用场景：

  • 须要应用到状态的。
  • 须要应用状态操作组件的（无状态组件的也能够实现新版本react hooks也可实现）

总结： 类组件能够保护本身的状态变量，即组件的 state ，类组件还有不同的生命周期办法，能够让开发者可能在组件的不同阶段（挂载、更新、卸载），对组件做更多的管制。类组件则既能够充当无状态组件，也能够充当有状态组件。当一个类组件不须要治理本身状态时，也可称为无状态组件。

（2）无状态组件 特点：

  • 不依赖本身的状态state
  • 能够是类组件或者函数组件。
  • 能够完全避免应用 this 关键字。（因为应用的是箭头函数事件无需绑定）
  • 有更高的性能。当不须要应用生命周期钩子时，应该首先应用无状态函数组件
  • 组件外部不保护 state ，只依据内部组件传入的 props 进行渲染的组件，当 props 扭转时，组件从新渲染。

应用场景：

  • 组件不须要治理 state，纯展现

长处：

  • 简化代码、专一于 render
  • 组件不须要被实例化，无生命周期，晋升性能。 输入（渲染）只取决于输出（属性），无副作用
  • 视图和数据的解耦拆散

毛病：

  • 无奈应用 ref
  • 无生命周期办法
  • 无法控制组件的重渲染，因为无奈应用shouldComponentUpdate 办法，当组件承受到新的属性时则会重渲染

总结： 组件外部状态且与内部无关的组件，能够思考用状态组件，这样状态树就不会过于简单，易于了解和治理。当一个组件不须要治理本身状态时，也就是无状态组件，应该优先设计为函数组件。比方自定义的 <Button/>、 <Input /> 等组件。

在 Reducer文件里，对于返回的后果，要留神哪些问题？

在 Reducer文件里，对于返回的后果，必须要应用 Object.assign ( )来复制一份新的 state，否则页面不会跟着数据刷新。

return Object.assign({}, state, {  type: action.type,  shouldNotPaint: true,});

怎么阻止组件的渲染

在组件的 render 办法中返回 null 并不会影响触发组件的生命周期办法

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={};    }  }

diff算法如何比拟?

  • 只对同级比拟，跨层级的dom不会进行复用
  • 不同类型节点生成的dom树不同，此时会间接销毁老节点及子孙节点，并新建节点
  • 能够通过key来对元素diff的过程提供复用的线索
  • 单节点diff
  • 单点diff有如下几种状况：
  • key和type雷同示意能够复用节点
  • key不同间接标记删除节点，而后新建节点
  • key雷同type不同，标记删除该节点和兄弟节点，而后新创建节点

React的Fiber工作原理，解决了什么问题

  • React Fiber 是一种基于浏览器的单线程调度算法。
React Fiber 用相似 requestIdleCallback 的机制来做异步 diff。然而之前数据结构不反对这样的实现异步 diff，于是 React 实现了一个相似链表的数据结构，将原来的 递归diff 变成了当初的 遍历diff，这样就能做到异步可更新了

React- Router有几种模式？

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

React.Children.map和js的map有什么区别？

JavaScript中的map不会对为null或者undefined的数据进行解决，而React.Children.map中的map能够解决React.Children为null或者undefined的状况。