面试之旅-深圳 遇到的问题和一些自己的拓展以及答案2

❤，调用 setState 之后React内部发生了什么？

将传递给setState的对象和当前对象合并，将触发和解过程，react构建一个新的react树，并且进行diff对比，在绝对必要的情况触发组件渲染。

参考：https://blog.csdn.net/fuohua/...

❤，React Component（组件） vs React Element（元素）区别是什么
Element是React 中最小基本单位，是普通对象。

const element = <div className="element">I'm element</div> //就是一个element

而组件是类或者函数。

❤，受控组件和非受控组件是什么意思
受控组件是React控制的组件，也是表单数据的唯一真理来源;非可控组件指是表单数据由 DOM 处理，而不是您的 React 组件处理的组件，比如：

//我们使用 refs 来完成这个
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>
    )
  }
}

参考 同上

❤，描述事件在React中的处理方式
为了解决跨浏览器兼容性问题，您的 React 中的事件处理程序将传递 SyntheticEvent 的实例，它是 React 的浏览器本机事件的跨浏览器包装器。

这些 SyntheticEvent 与您习惯的原生事件具有相同的接口，除了它们在所有浏览器中都兼容。有趣的是，React 实际上并没有将事件附加到子节点本身。React 将使用单个事件监听器监听顶层的所有事件。这对于性能是有好处的，这也意味着在更新DOM时，React 不需要担心跟踪事件监听器。

参考 同上

❤，盒模型与BFC

❤，请描述import/require的原理

❤，根据如下代码,判断输出结果
1,

var User = {
        coun: 1,
        getCount: function (){
            return this.count;
        }
    }
    
    var func = User.getCount;
    console.log(func());  //undifined

2,

function test(){
    for (var i=0;i<5;i++){
        setTimeout(function (){
            console.log(i);
        },0)
    }
}

test();//5,5,5,5,5

3,

var a = {
    fn: function (){
        console.log(fn);
    }
}

4,

function Animal(name){
    this.name = name;
}

Animal.prototype.sayName = function (){
    console.log(this.name);
}

function Cat(name){
    Animal.call(this, name)
}

var kay = new Cat('Jim');

kat.sayName();

5,

<style>
    .blue{color: blue;}
    .red{color: red;}
</style>
<p class="red blue">内容</p>

❤，写一个数组去重的方法

❤，写一个大整数乘法计算的方法

❤，写一个方法,将URL中的查询字符串解析成一个Object

❤，请使用多种方式实现 左边定宽400px,右边自适应

❤，请使用多种方式实现 圣杯布局 和 双飞翼布局
首先，圣杯布局要符合以下3点要求：

1，三列布局，中间宽度自适应，两边定宽
2，中间栏要在浏览器中优先展示渲染
3，允许任意列的高度最高

❤，请使用多种方式实现 水平垂直居中

方法1

<style>
    .box {
        background-color: #FF8C00;
        width: 300px;
        height: 300px;
        position: relative;
    }
    .content {
        background-color: #F00;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
</style>

<div class="box">
    <div class="content">
        1234
    </div>
</div>

方法2

<style>
    .box {
        background-color: #FF8C00;
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .content {
        background-color: #F00;
        width: 100px;
        height: 100px;
    }
</style>

<div class="box">
    <div class="content">
        1234
    </div>
</div>

参考：https://blog.csdn.net/qq_2757...