refs的作用是什么，你在什么業務場景下使用過refs

0.refs的作用是什么，你在什么業務場景下使用過refs

作用是操作dom

場景：圖片加載完以后獲取圖片的寬高

// window上添加事件監聽后，組件銷毀前需要移除

class Test extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      top: 0
    }
    this.handleWindowScroll = this.handleWindowScroll.bind(this);
  }

  handleWindowScroll() {
    this.setState({
      top: document.body.scrollTop
    })
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleWindowScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleWindowScroll);
  }

  render() {
    return <div>{this.state.top}</div>
  }
}

1.高階組件你是怎么理解的，它本質是一個什么東西？
高階組件和繼承，哪一種更好？
個人認為，包括官方也認為，在react中不要用繼承，設計模式里面就有一種明確的說法是組合優於繼承。
react這種組件式的編程方式，實際上是把一些組件合在一起，是一種組合式的設計模式，一定是優於繼承的。所以它的可維護性要比繼承好的多。

高階組件實際上就是一個函數，它接受一些參數，返回一個函數。高階組件是對組件進行包裝，返回一個新的組件。
一個組件，大部分情況下可以直接使用，只有少數情況下有一點區別，我們可以把區別寫在高階組件里面。

當一個組件嵌套多層高階組件，就會出現高階組件地獄的情況。可以通過hook解決。

2.函數組件怎么做性能優化？
函數式組件比普通組件性能高，因為它是一個函數，沒有生命周期，相對於類來說，沒有構造類的過程，所以它性能高。
但是因為它沒有 shoudComoponentUpdate 這個生命周期，所以每當props改變時，函數就會重新執行。
性能優化：
可以通過 React.memo() 對函數式組件進行包裝，然后再返回，包裝后的函數式組件就帶有了shouldComponentUpdate的特性。

React.memo(function Test(props){
   return <div>123</div>
})

3.哪個生命周期里發送ajax?
在 componentDidMount 里
(1) componentWillMount 在新版本react中已經被廢棄了
(2) SSR項目時，componentWillMount要做服務器端數據的獲取，所以不能被占用
注：SSR 服務器端渲染，可以使網站SEO效果更加的完善(搜索引擎優化)

4.SSR的原理是什么？
這個要從虛擬dom說起，虛擬dom的一個好處是可以讓我們的代碼運行速度更快，另一個好處是，虛擬dom讓我們的react代碼，最終變成了JS對象。
也就可以讓我們的react代碼可以在客戶端(瀏覽器)上執行，還可以在服務器上執行。
服務器上是沒有dom這個概念的，通過nodejs 也可以運行的react代碼。
SSR核心的原理是通過 借助虛擬dom來實現的。

5.組件是什么？類是什么？類被編譯成什么？
組件指的是頁面的一部分，本質是一個類，最本質上是一個構造函數
類是構造函數
類被編譯成構造函數
模塊是webpack引入的那一個個文件

6.如何避免ajax數據重新獲取
通過 react-redux 統一管理數據

7.reselect 是做什么使用的？
對應 vue 的 computed (計算屬性)，做了緩存提升代碼的性能

8.react-router的基本原理，hashHistory，browserHistory
browserHistory 依賴於后端服務器的配置

9.什么情況下使用異步組件
路由懶加載，解決spa應用在網速慢的情況下，頁面加載慢的問題
reloadable庫
// 新版本
import('./home/header').then

// 舊版本
require.ensure

10.XSS攻擊在react中如何防范？
react 本身已經做的比較好了
慎用 dangerouslySetInnerHTML={{_html: '<script>alert(1)</script>'}}