资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

有哪些高级React面试题

这期内容当中小编将会给大家带来有关有哪些高级React面试题,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

成都创新互联是一家集网站建设,静安企业网站建设,静安品牌网站建设,网站定制,静安网站建设报价,网络营销,网络优化,静安网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

Q1:什么是虚拟DOM?

难度:⭐

虚拟DOM(VDOM)它是真实DOM的内存表示,一种编程概念,一种模式。它会和真实的DOM同步,比如通过ReactDOM这种库,这个同步的过程叫做调和(reconcilation)。

虚拟DOM更多是一种模式,不是一种特定的技术。

资料来源:https://github.com/sudheerj/reactjs-interview-questions
参考资料:https://www.javascriptcn.com/read-65385.html

Q2:类组件和函数组件之间有什么区别?

难度:⭐⭐
  • 类组件Class components

    • 无论是使用函数或是类来声明一个组件,它决不能修改它自己的 props

      • 所有 React 组件都必须是纯函数,并禁止修改其自身 props
    • React是单项数据流,父组件改变了属性,那么子组件视图会更新。

      • 属性 props是外界传递过来的,状态 state是组件本身的,状态可以在组件中任意修改
      • 组件的属性和状态改变都会更新视图。
class Welcome extends React.Component {
  render() {
    return (
      

Welcome { this.props.name }

); } } ReactDOM.render(, document.getElementById('root'));
  • 函数组件(functional component)

    • 函数组件接收一个单一的 props 对象并返回了一个React元素
    function Welcome (props) {
      return 

    Welcome {props.name}

    } ReactDOM.render(, document.getElementById('root'));

区别 

函数组件和类组件当然是有区别的,而且函数组件的性能比类组件的性能要高,因为类组件使用的时候要实例化,而函数组件直接执行函数取返回结果即可。为了提高性能,尽量使用函数组件。

区别函数组件类组件
是否有 this没有
是否有生命周期没有
是否有状态 state没有

资料来源:https://github.com/Pau1fitz/react-interview

参考资料:https://overreacted.io/how-are-function-components-different-from-classes/

Q3:React中的refs作用是什么?

难度:⭐⭐

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。
我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返回:

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      
this.input = input} />
) } }

上述代码中的 input 域包含了一个 ref 属性,该属性声明的回调函数会接收 input 对应的 DOM 元素,我们将其绑定到 this 指针以便在其他的类函数中使用。
另外值得一提的是,refs 并不是类组件的专属,函数式组件同样能够利用闭包暂存其值:

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    
handleSubmit(inputElement.value)}> inputElement = input} />
) }

资料来源:https://github.com/Pau1fitz/react-interview
参考资料:https://stackoverflow.com/questions/29503213/use-state-or-refs-in-react-js-form-components

Q4:描述React事件处理。

难度:⭐⭐

为了解决跨浏览器兼容性问题,React中的事件处理程序将传递SyntheticEvent实例,该实例是React跨浏览器本机事件的跨浏览器包装器。这些综合事件具有与您惯用的本机事件相同的界面,除了它们在所有浏览器中的工作方式相同。

有点有趣的是,React实际上并未将事件附加到子节点本身。React将使用单个事件侦听器在顶层侦听所有事件。这对性能有好处,也意味着React在更新DOM时无需担心跟踪事件监听器。

资料来源:https://tylermcginnis.com/react-interview-questions/
参考资料:https://www.cnblogs.com/xiangming25/p/6430461.html

Q5:state 和 props有什么区别?

难度:⭐⭐

state 和 props都是普通的JavaScript对象。尽管它们两者都具有影响渲染输出的信息,但它们在组件方面的功能不同。即

  • props是一个从外部传进组件的参数,主要作为就是从父组件向子组件传递数据,它具有可读性和不变性,只能通过外部组件主动传入新的props来重新渲染子组件,否则子组件的props以及展现形式不会改变。
  • state的主要作用是用于组件保存、控制以及修改自己的状态,它只能在constructor中初始化,它算是组件的私有属性,不可通过外部访问和修改,只能通过组件内部的this.setState来修改,修改state属性会导致组件的重新渲染。

资料来源:https://github.com/sudheerj/reactjs-interview-questions

参考资料:https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react

Q6:如何创建refs?

难度:⭐⭐

Refs 是使用 React.createRef()方法创建的,并通过 ref 属性添加到 React 元素上。为了在整个组件中使用refs,只需将 ref 分配给构造函数中的实例属性

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return 

; } }

和:

class UserForm extends Component {
  handleSubmit = () => {
    console.log("Input Value is: ", this.input.value)
  }
  render () {
    return (
      
this.input = input} /> // Access DOM input in handle submit
) } }

我们还可以借助闭包在功能组件中使用它。

资料来源:https://github.com/sudheerj/reactjs-interview-questions

参考资料:https://segmentfault.com/a/1190000015113359

Q7:什么是高阶组件?

难度:⭐⭐

高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件。基本上,这是从React的组成性质派生的一种模式,我们称它们为“纯”组件,因为它们可以接受任何动态提供的子组件,但它们不会修改或复制其输入组件的任何行为。

const EnhancedComponent = higherOrderComponent(WrappedComponent);
  • 高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧
  • 高阶组件的参数为一个组件返回一个新的组件
  • 组件是将 props 转换为 UI,而高阶组件是将组件转换为另一个组件

资料来源:https://github.com/sudheerj/reactjs-interview-questions

参考资料:https://css-tricks.com/what-are-higher-order-components-in-react/

Q8:constructor中super与props参数一起使用的目的是什么?

难度:⭐⭐

在调用方法之前,子类构造函数无法使用this引用super()

在ES6中,在子类的constructor中必须先调用super才能引用this

constructor中可以使用this.props

使用props:

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props);  // Prints { name: 'sudheer',age: 30 }
    }
}

不使用props:

class MyComponent extends React.Component {
    constructor(props) {
        super();
        console.log(this.props); // Prints undefined
        // But Props parameter is still available
        console.log(props); // Prints { name: 'sudheer',age: 30 }
    }

    render() {
        // No difference outside constructor
        console.log(this.props) // Prints { name: 'sudheer',age: 30 }
    }
}

上面的代码片段揭示了this.props行为仅在构造函数中有所不同。外部构造函数相同。

资料来源:

https://github.com/sudheerj/reactjs-interview-questions

https://www.fullstack.cafe/React)

Q9:什么是受控组件?

难度:⭐⭐⭐

在HTML当中,像,