乐趣区

关于react.js:2021前端react高频面试题

2021 前端 react 高频面试题

React 视频教程系列

React 实战:CNode 视频教程

残缺教程目录:点击查看

React 经典教程 - 从入门到精通

残缺教程目录:点击查看

最新最全前端毕设我的项目(小程序 +VUE+Noed+React+uni app+Express+Mongodb)

残缺教程目录:点击查看

2021 前端 React 精品教程

残缺教程目录:点击查看

1:讲讲什么是 JSX?

主题: React

难度: ⭐⭐⭐

Facebook 第一次公布 React 时,他们还引入了一种新的 JS 方言 JSX,将原始 HTML 模板嵌入到 JS 代码中。JSX 代码自身不能被浏览器读取,必须应用 Babelwebpack等工具将其转换为传统的 JS。很多开发人员就能有意识应用 JSX,因为它曾经与 React 联合在始终了。

class MyComponent extends React.Component {render() {
    let props = this.props;  
    return (
      <div className="my-component">
      <a href={props.url}>{props.name}</a>
      </div>
    );
  }
}

2:依据上面定义的代码,能够找出存在的两个问题吗?

主题: React

难度: ⭐⭐⭐

请看上面的代码:

答案:

1. 在构造函数没有将 props 传递给 super,它应该包含以下行

constructor(props) {super(props);
  // ...
}
复制代码

2. 事件监听器 (通过addEventListener() 调配时)的作用域不正确,因为 ES6 不提供主动绑定。因而,开发人员能够在构造函数中重新分配 clickHandler 来蕴含正确的绑定:

constructor(props) {super(props);
  this.clickHandler = this.clickHandler.bind(this);
  // ...
}

3:为什么不间接更新 state 呢 ?

主题: React

难度: ⭐⭐⭐

如果试图间接更新 state,则不会从新渲染组件。

 // 谬误
 This.state.message = 'Hello world';
复制代码

须要应用 setState() 办法来更新 state。它调度对组件 state 对象的更新。当 state 扭转时,组件通过从新渲染来响应:

// 正确做法
This.setState({message:‘Hello World’});

4:React 组件生命周期有哪些不同阶段?

主题: React

难度: ⭐⭐⭐

在组件生命周期中有四个不同的阶段:

  1. Initialization:在这个阶段,组件筹备设置初始化状态和默认属性。
  2. Mounting:react 组件曾经筹备好挂载到浏览器 DOM 中。这个阶段包含 componentWillMountcomponentDidMount生命周期办法。
  3. Updating:在这个阶段,组件以两种形式更新,发送新的 props 和 state 状态。此阶段包含 shouldComponentUpdatecomponentWillUpdatecomponentDidUpdate生命周期办法。
  4. Unmounting:在这个阶段,组件曾经不再被须要了,它从浏览器 DOM 中卸载下来。这个阶段蕴含 componentWillUnmount 生命周期办法。

除以上四个罕用生命周期外,还有一个错误处理的阶段:

Error Handling:在这个阶段,不管在渲染的过程中,还是在生命周期办法中或是在任何子组件的构造函数中产生谬误,该组件都会被调用。这个阶段蕴含了 componentDidCatch 生命周期办法。

5:React 的生命周期办法有哪些?

主题: React

难度: ⭐⭐⭐

  • componentWillMount: 在渲染之前执行,用于根组件中的 App 级配置。
  • componentDidMount:在第一次渲染之后执行,能够在这里做 AJAX 申请,DOM 的操作或状态更新以及设置事件监听器。
  • componentWillReceiveProps:在初始化 render 的时候不会执行,它会在组件承受到新的状态 (Props) 时被触发,个别用于父组件状态更新时子组件的从新渲染
  • shouldComponentUpdate:确定是否更新组件。默认状况下,它返回true。如果确定在 stateprops 更新后组件不须要在从新渲染,则能够返回false,这是一个进步性能的办法。
  • componentWillUpdate:在 shouldComponentUpdate 返回 true 确定要更新组件之前件之前执行。
  • componentDidUpdate:它次要用于更新 DOM 以响应 propsstate更改。
  • componentWillUnmount:它用于勾销任何的网络申请,或删除与组件关联的所有事件监听器。

6:这三个点 (…) 在 React 干嘛用的?

主题: React

难度: ⭐⭐⭐

... 在 React(应用 JSX)代码中做什么?它叫什么?

<Modal {...this.props} title='Modal heading'  animation={false}/>
复制代码

这个叫扩大操作符号或者开展操作符,例如,如果 this.props 蕴含 a:1b: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"}};
});

7. 什么是 JSX?

JSX 是 J avaScript XML 的简写。是 React 应用的一种文件,它利用 JavaScript 的表现力和相似 HTML 的模板语法。这使得 HTML 文件非常容易了解。此文件能使利用十分牢靠,并可能进步其性能。上面是 JSX 的一个例子:

render(){
    return(        
        <div>
            <h1> Hello World from Edureka!!</h1>
        </div>
    );
}

8. 为什么浏览器无奈读取 JSX?

浏览器只能解决 JavaScript 对象,而不能读取惯例 JavaScript 对象中的 JSX。所以为了使浏览器可能读取 JSX,首先,须要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象,而后再将其传给浏览器。

9. 与 ES5 相比,React 的 ES6 语法有何不同?

以下语法是 ES5 与 ES6 中的区别:

  1. require 与 import
// ES5
var React = require('react');
 
// ES6
import React from 'react';
复制代码
  1. export 与 exports
// ES5module.exports = Component; // ES6export default Component; 复制代码
  1. component 和 function
// ES5
var MyComponent = React.createClass({render: function() {
        return
            <h3>Hello Edureka!</h3>;
    }
});
 
// ES6
class MyComponent extends React.Component {render() {
        return
            <h3>Hello Edureka!</h3>;
    }
}
复制代码
  1. props
// ES5
var App = React.createClass({propTypes: { name: React.PropTypes.string},
    render: function() {
        return
            <h3>Hello, {this.props.name}!</h3>;
    }
});

// ES6
class App extends React.Component {render() {
        return
            <h3>Hello, {this.props.name}!</h3>;
    }
}
复制代码
  1. state
// ES5
var App = React.createClass({getInitialState: function() {return { name: 'world'};
    },
    render: function() {
        return
            <h3>Hello, {this.state.name}!</h3>;
    }
});

// ES6
class App extends React.Component {constructor() {super();
        this.state = {name: 'world'};
    }
    render() {
        return
            <h3>Hello, {this.state.name}!</h3>;
    }
}

10. React 与 Angular 有何不同?

主题 React Angular
1. 体系结构 只有 MVC 中的 View 残缺的 MVC
2. 渲染 能够在服务器端渲染 客户端渲染
3. DOM 应用 virtual DOM 应用 real DOM
4. 数据绑定 单向数据绑定 双向数据绑定
5. 调试 编译时调试 运行时调试
6. 作者 Facebook Google
退出移动版