- 動態(tài)生成的元素，需要唯一父元素，如果父元素沒有意義，用什么作為父元素比較合適
<Fragment></Fragment>
<></>
- 更新頁面有哪些方式
state改變
props改變
context改變
- 單頁面為了保證類名稱唯一，防止不同文件類名沖突，啟用什么樣式方案來解決類名稱污染。
CSS Modules
文件名+hash值
- react中在使用es6時，通過什么方式兼容老版本瀏覽器
babel轉(zhuǎn)化
- 有一個數(shù)組，用什么方式來動態(tài)生成元素
map()
- 何時使用無狀態(tài)組件和有狀態(tài)組件
當(dāng)組件需要自身維護(hù)自己的狀態(tài)時，用有狀態(tài)組件，如tab組件
當(dāng)組件不需要自己維護(hù)狀態(tài)，頁面只由外部屬性變化來更新時，使用無狀態(tài)組件
- react 生命周期 新生命周期方法
- getDerivedStateFromProps和componentWillReceiveProps什么時候會被調(diào)用
錯誤：當(dāng)props改變時會調(diào)用。
正確：父組件重新渲染時就會被調(diào)用，不管props是否和之前一樣。
解決辦法：shouldComponentUpdate中判斷。
ps：shouldComponentUpdate最好作為性能優(yōu)化使用，而不是為了確保派生狀態(tài)的正確。
- render中調(diào)用了一個比較耗時的循環(huán)，有什么辦法可以進(jìn)行優(yōu)化
使用第三方組件 memoize-one
- 使用哪些第三方框架
- 更新頁面的方式 （state 改變、props改變、context）
- setState是異步的，如何在一個state更新后再做另一個操作
第二個參數(shù)是回調(diào)
this.setState({},()=>{})
redux
- redux 原理
-
redux 中間鍵
image.png
- redux-saga 原理
redux-saga 使用了es6里的Generator功能，讓異步流程更易閱讀、維護(hù)。
讓異步代碼看起來像是同步執(zhí)行，類似于 async/await
- redux-saga 使用 常用方法和使用
call：同步請求接口，阻塞代碼執(zhí)行；
put：相當(dāng)于分發(fā)一個action；
takeEvery：可以同時啟動多個請求
takeLatest：只得到最新的請求的相應(yīng)。任何時候takeLatest只允許一個fetchRequet任務(wù)在執(zhí)行，并且這個任務(wù)是最后被啟動的那個，之前的任務(wù)會被取消。
take：阻塞監(jiān)聽action，只會執(zhí)行一次，如果要一直監(jiān)聽，需要while(true)循環(huán)調(diào)用。
fork：無阻塞調(diào)用，在fork的第一個參數(shù)方法里處理返回值，如果要取消執(zhí)行 yield cannel(task)，類似clearTimeout；
all：yield all([call api1,call api2])并行請求多個接口，結(jié)果都返回后再執(zhí)行下邊代碼
race：只要有一個接口返回結(jié)果就執(zhí)行下邊代碼，忽略其他接口返回的結(jié)果。
import { race, call, put } from 'redux-saga/effects'
import { delay } from 'redux-saga'
function* fetchPostsWithTimeout() {
const {posts, timeout} = yield race({
posts: call(fetchApi, '/posts'),
timeout: call(delay, 1000)
})
if (posts)
put({type: 'POSTS_RECEIVED', posts})
else
put({type: 'TIMEOUT_ERROR'})
}
- 頁面里dispatch一個action后，等待返回結(jié)果，拿著返回結(jié)果來更新state，如何實(shí)現(xiàn)
dispatch之后返回的是一個promise函數(shù)，可以用then回調(diào)
dispatch().then(){}
- 如何獲取另一個命名空間下的state
yield select(state=>state.namespace.statename);
- yield 和 yield* 的區(qū)別
yield 可以調(diào)用saga提供的方法
yield* 可以調(diào)用多個sagas
