前端react面试题合集

React 的工作原理

React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时，React 首先会通过 “diffing” 算法来标记虚拟 DOM 中的改变，第二步是调节(reconciliation)，会用 diff 的结果来更新 DOM。

讲讲什么是 JSX ？

当 Facebook 第一次发布 React 时，他们还引入了一种新的 JS 方言 JSX，将原始 HTML 模板嵌入到 JS 代码中。JSX 代码本身不能被浏览器读取，必须使用Babel和webpack等工具将其转换为传统的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>
    );
  }
}

在 React 中，何为 state

State 和 props 类似，但它是私有的，并且完全由组件自身控制。State 本质上是一个持有数据，并决定组件如何渲染的对象。

react 实现一个全局的 dialog

import React, {
    Component } from 'react';
import {
    is, fromJS } from 'immutable';
import ReactDOM from 'react-dom';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import './dialog.css';
let defaultState = {
   
  alertStatus:false,
  alertTip:"提示",
  closeDialog:function(){
   },
  childs:''
}
class Dialog extends Component{
   
  state = {
   
    ...defaultState
  };
  // css动画组件设置为目标组件
  FirstChild = props => {
   
    const childrenArray = React.Children.toArray(props.children);
    return childrenArray[0] || null;
  }
  //打开弹窗
  open =(options)=>{
   
    options = options || {
   };
    options.alertStatus = true;
    var props = options.props || {
   };
    var childs = this.renderChildren(props,options.childrens) || '';
    console.log(childs);
    this.setState({
   
      ...defaultState,
      ...options,
      childs
    })
  }
  //关闭弹窗
  close(){
   
    this.state.closeDialog();
    this.setState({
   
      ...defaultState
    })
  }
  renderChildren(props,childrens) {
   
    //遍历所有子组件
    var childs = [];
    childrens = childrens || [];
    var ps = {
   
        ...props,  //给子组件绑定props
        _close:this.close  //给子组件也绑定一个关闭弹窗的事件    
       };
    childrens.forEach((currentItem,index) => {
   
        childs.push