本文和大家分享的主要是ReactJS開(kāi)發(fā)中常見(jiàn)的一些問(wèn)題，一起來(lái)看看吧，希望對(duì)大家學(xué)習(xí)和使用有所幫助。

　　Issue1：

　　ajax引入數(shù)據(jù)，初始化data==null，設(shè)置ajax同步async＝false可以獲取數(shù)據(jù)，如何在ajax獲取結(jié)束后render；

　　Response：

　　進(jìn)行條件渲染：根據(jù)條件（State）的變化，初始化加載一種情況，數(shù)據(jù)加載完成后，改變條件（State），渲染另一種情況；

　　Issue2：

　　多個(gè)同級(jí)兄弟組件渲染，如果沒(méi)有父級(jí)標(biāo)簽包裹（ReactJS要求必須有且僅有一個(gè)Root節(jié)點(diǎn)），如何處理？

　　Response

　　不用創(chuàng)建冗余的父級(jí)標(biāo)簽，創(chuàng)建一個(gè)函數(shù) return 這些同級(jí)組件，在render()函數(shù)中返回 函數(shù)返回值 即可；

　　示例代碼：

　　this.state.data.loading條件判斷解決Issue1；

　　this.renderBody()函數(shù)解決Issue2；

　　constructor() {

　　super()

　　// data: [1,2,4,5,6,7,9]

　　this.state = {

　　data: {

　　loading: true

　　}

　　}

　　}

　　componentDidMount() {

　　setTimeout(() => {

　　this.setState({

　　data: {

　　data: [1, 2, 4, 5, 6, 7, 9]

　　}

　　})

　　}, 3000);

　　}

　　clickHandler() {

　　let index = 2

　　, newValue = Date.now() % 9;

　　this.setState({

　　data: {

　　data: [

　　...this.state.data.data.slice(0, index),

　　newValue,

　　...this.state.data.data.slice(index + 1)

　　]

　　}

　　})

　　this.state.data.data[index] = newValue;

　　this.forceUpdate()

　　}

　　render() {

　　return (

　　

　　{

　　this.state.data.loading

　　?

　　: this.renderBody()

　　}

　　

　　)

　　}

　　Issue3：

　　ES6如何實(shí)現(xiàn)按需加載？

　　Response

　　React不必需要按需加載，封裝成組件，在不需要的時(shí)候根本就不會(huì)下載該組件和該組件的依賴；

　　Issue4：

　　React實(shí)現(xiàn)服務(wù)器端渲染？需要在服務(wù)器端(nodejs)運(yùn)行js，使用renderToStaticMakeup()將組件返回字符串，前端如何獲取并轉(zhuǎn)成組件？

　　Response

　　React沒(méi)有需求實(shí)現(xiàn)服務(wù)器端渲染，如果要求SEO，則可以后臺(tái)腳本實(shí)現(xiàn)靜態(tài)化，效率等各方面比React好很多；

　　Issue5：

　　數(shù)據(jù)從父組件一層層傳下來(lái)，如何精準(zhǔn)快速的查找到哪個(gè)組件定義的state；

　　Response

　　Flux或者Redux架構(gòu)；

　　Issue6：

　　生命周期的使用情況；

　　Response

　　盡可能的不要使用生命周期，唯一常用的是componentDidMount()；

　　Issue7：

　　Jest測(cè)試有必要么；

　　Response

　　實(shí)現(xiàn)交互函數(shù)的測(cè)試即可，頁(yè)面顯示通過(guò)看效果即可測(cè)試；

　　Issue8：

　　this.state.property=val和setState()都可以改變state數(shù)據(jù)，它們有什么區(qū)別？

　　Response

　　使用this.state.property=val改變state數(shù)據(jù)，需要使用 forceUpdate() 強(qiáng)制渲染，渲染時(shí)會(huì)銷(xiāo)毀原有的State對(duì)象并創(chuàng)建新的（復(fù)制原對(duì)象并更新this.state.property的值），而不是對(duì)原有State對(duì)象的更改；

　　Issue9：

　　React初始化State對(duì)象時(shí)

　　this.state = {

　　data: {

　　data: [1, 2, 4, 5, 6, 7, 9],

　　loading:true

　　}

　　}

　　通過(guò)：

　　this.setState({

　　data:{

　　loading:false

　　}

　　})

　　并不會(huì)重新渲染，ReactJS檢測(cè)this.state.data的改變，即State對(duì)象頂層屬性名的值的改變，這里改變的是this.state.data.loading的結(jié)果

　　Response

　　this.setState({

　　data: {

　　data: [

　　...this.state.data.data.slice(0, index),

　　newValue,

　　...this.state.data.data.slice(index + 1)

　　]

　　}

　　})

　　通過(guò)重新組裝this.state.property對(duì)象并賦值，引發(fā)View的重新渲染；

　　Issue10：

　　React會(huì)把State狀態(tài)更新操作放在一起，批量執(zhí)行，是如何執(zhí)行的？

　　不同生命周期的State狀態(tài)更新是在渲染階段一起，依次執(zhí)行，還是在該生命周期方法結(jié)束后執(zhí)行，每個(gè)生命周期都是獨(dú)立的；

　　Response

　　首先，不推薦頻繁的使用生命周期函數(shù)；

　　其次，在生命周期函數(shù)中調(diào)用this.setState()函數(shù)，ReactJS會(huì)將this.setState()加入隊(duì)列中，優(yōu)先執(zhí)行完自定義的腳本后，執(zhí)行State對(duì)象的更新；每個(gè)生命周期都是獨(dú)立的；

　　注意：在componentWillMount()函數(shù)中調(diào)用this.setState()函數(shù)沒(méi)有意義，這時(shí)沒(méi)有進(jìn)行渲染，還沒(méi)有DOM節(jié)點(diǎn)，無(wú)法進(jìn)行數(shù)據(jù)的更新——數(shù)據(jù)的更新需要在渲染完DOM后進(jìn)行；

　　Issue11：

　　react-router怎么用;

　　Response

　　引入依賴：

　　import { Router, Route, hashHistory } from 'react-router'

　　Router的使用：

　　render(

　　<Router history={hashHistory}>

　　<Route path="/" component={MainView} />

　　<Route path="/detail" component={Detail} />

　　Router>

　　, document.getElementById('container')

　　)

　　-----------

　　引入依賴：

　　import { Link } from 'react-router'

　　Router的使用：

　　render() {

　　return (

　　<div>

　　<Link to="/detail">DetailLink>

　　<a href="#/detail">Detail2a>

　　div>

　　)

　　}

　　-----------

　　也可以在函數(shù)中使用Location.href.push("/detail")進(jìn)行跳轉(zhuǎn)；

 

 

來(lái)源：SegmentFault