進擊的react - https://zhuanlan.zhihu.com/advancing-react
面試中問什么react問題 - https://zhuanlan.zhihu.com/p/28176065
入門級問題
- 什么是JSX
- state 和 props 有什么區別
- React 是哪個公司貢獻的開源代碼
進階級問題
什么時候應該選擇用class實現一個組件，什么時候應該用一個函數實現一個組件
能描述一下React組件的各個聲明周期函數嗎
什么是shouldComponentUpdate函數？有什么作用
當組件的setSatate函數被調用之后，會發生什么
為什么我們利用循環產生的組件中要用key這個特殊的psop
高手級問題
setState可以接受函數作為參數嗎？有什么作用
什么是HoC（Higher-Order Component）?適用于什么場景
什么是Fiber？是為了解決什么問題
兩個并不是父子關系的組件，如何實現相互的消息傳遞？請想出盡量多的辦法，并說說各自的優缺點
如果你能夠改進React的一樣功能，那會是哪一個功能
React新的前端思維方式
1 - 如何初始化一個React項目
// 全局安裝快速來發React應用的工具
npm install --global create-react-app
// 在當前目錄下創建指定參數名的應用目錄
create-react-app first_react_app
cd first_react_app
npm start
2 - 如何創建一個React組件(能完成某個特定功能的獨立的可重用的代碼)
- 定義組件
// 從reacr 庫中引入React 和 Component
import React, { Component } from 'react';
// 使用ES6的語法來構建組件類，Component作為所有組件的基類，提供了很多組件共有的功能
class ClickCounter extends Component {}
- 導入組件
// import是ES6語法中導入文件模塊的方式，
// 兼容性問題，ES6語法的JavaScript代碼會被webpack 和 babel 轉譯成所有瀏覽器都支持的ES5語法
import ClickCounter from './ClickCounter'
- 定義組件的方式
- React.createClass方式創建組件類，這種方法已經被廢棄了
- 使用ES6的語法來構建組件類
3 - JSX
-
什么是JSX
- JSX是JavaScript的語法擴展，讓我們在JavaScript中可以編寫想HTML一樣的代碼
-
JSX 和 HTML 有什么區別
- JSX中使用的 “元素”不局限于HTML中的元素,可以是任何一個React組件
- React判斷一個元素是HTML元素還是React組件的原則就是看第一個字母是否大寫
- 在JSX中可以通過onClick這樣的方式給一個元素添加事件處理函數，在HTML中不建議
-
JSX是進步還是倒退
- HTML代表內容，CSS代表樣式，JavaScript定義交互行為，實際上是把不同的技術分來管理了，而不是邏輯上的“分而治之”
- 做同一件事的代碼應該有高耦合性的設計原則
-
JSX中使用onClick添加事件處理函數和HTML的onclick有很大的不同
- HTML中的onclick添加的事件處理函數是在全局環境下執行的，這污染了全局環境
- HTML中給很多DOM元素添加onclick事件，可能會影響網頁的性能，畢竟，網頁需要的事件處理函數越多，性能就會越低
- HTML中對于使用onclick的DOM元素，如果要動態的從DOM樹中刪除掉的話，需要把對應的事件處理器注銷，否則內存泄漏
- JSX中一個組件使用了onClick，并沒有產生直接使用onclick的HTML，而是使用了事件委托的方式處理點擊事件，無論有多少個onClick出現，其實最后都只在DOM書上添加了一個事件處理點擊事件，掛在最頂層的DOM節點上
- 所有的點擊事件都被這個事件處理函數捕獲，然后根據具體組件分配給特定函數，使用事件委托的性能當然要比為每個onClick都掛載一個事件處理函數要高
- React控制組件的生命周期，在unmount的時候清除相關事件處理函數
4 - React的工作方式
-
jQuery如何工作
- 選中一些DOM元素，然后對這些元素做一些操作
-
React的理念
渲染。React的工作方式把開發者從繁瑣的操作中解放出來，開發者只需要關心“我想要顯示什么”，而不用操心“怎么去做”
UI=render(data)。用戶看到的界面(UI)，應該是一個函數(render)的執行結果，只接受數據(data)作為參數
純函數。指的是沒有任何副作用，輸出完全依賴于輸入的函數，兩次函數調用如果輸入相同，得到的結果也絕對相同。
通過數據驅動渲染，重復渲染來實現用戶交互，這樣重復渲染的效率會不會太低了呢？
-
Virtual DOM
React利用Virtual DOM，讓每次渲染都只重新渲染最少的DOM元素
瀏覽器為了渲染HTML格式的網頁，會先將HTML文本解析以構建DOM樹，然后根據DOM樹渲染出用戶看到的界面，當要改變界面內容的時候，就去給編DOM樹上的節點
盡量減少DOM操作。DOM操作會引起瀏覽器對網頁進行重新布局，重新繪制，影響性能
DOM樹是對HTML的抽象，Virtual DOM就是對DOM樹的抽象。Virtual DOM不會觸及瀏覽器的部分，只是存在于JavaScript空間的樹形結構，每次自上而下渲染React組件時，會對比這一次產生的Virtual DOM和上一次渲染的Virtual Dom，對比就會發現差別，然后修改真正的DOM樹時就只需要觸及差別中的部分就行
