面試之旅-深圳 遇到的問題和一些自己的擴充以及答案2

milobluebell發表於2019-02-16
面試

❤，呼叫 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

而元件是類或者函式。

參考：https://segmentfault.com/a/11…

❤，受控元件和非受控元件是什麼意思
受控元件是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…

相關文章