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