滴滴前端高频react面试题总结

当调用 setState的时候，发生了什么操作？**

当调用 setState时， React做的第一件事是将传递给setState的对象合并到组件的当前状态，这将启动一个称为和解（ reconciliation）的过程。
和解的最终目标是，根据这个新的状态以最有效的方式更新DOM。
为此， React将构建一个新的 React虚拟DOM树（可以将其视为页面DOM元素的对象表示方式）。
一旦有了这个DOM树，为了弄清DOM是如何响应新的状态而改变的， React会将这个新树与上一个虚拟DOM树比较。
这样做， React会知道发生的确切变化，并且通过了解发生的变化后，在绝对必要的情况下进行更新DOM，即可将因操作DOM而占用的空间最小化。

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(React.createElement(
            currentItem,
            {
   
                ...ps,
                key:index
            }
        ));
    })
    return childs;
  }
  shouldComponentUpdate(nextProps, nextState){
   
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }
   
  render(){
   
    return (
      <ReactCSSTransitionGroup
        component={
   this.FirstChild}
        transitionName='hide'
        transitionEnterTimeout={
   300}
        transitionLeaveTimeout={
   300}>
        <div className="dialog-con" style={
   this.state.alertStatus? {
   display:'block'}:{
   display:'none'}}>
            {
   this.state.childs}        </div>
      </ReactCSSTransitionGroup>
    );
  }
}
let div = document.createElement('div');
let props = {
   
   
};
document.body.appendChild(div);
let Box = ReactD

子类：

//子类jsx
import React, {
    Component } from 'react';
class Child extends Component {
   
    constructor(props){
   
        super(props);
        this.state = {
   date: new Date()};
  }
  showValue=()=>{
   
    this.props.showValue && this.props.showValue()
  }
  render() {
   
    return (
      <div className="Child">
        <div className="content">
           Child           <button onClick={
   this.showValue}>调用父的方法</button>
        </div>
      </div>
    );
  }
}
export default Child;

css：

.dialog-con{
   
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}

React组件命名推荐的方式是哪个？

通过引用而不是使用来命名组件displayName。

使用displayName命名组件：

export default React.createClass({
     displayName: 'TodoApp',  // ...})

React推荐的方法：

export default class TodoApp