成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ReactJS問題集結(jié)

lwx12525 / 2541人閱讀

摘要：引入數(shù)據(jù)，初始化，設(shè)置同步可以獲取數(shù)據(jù)，如何在獲取結(jié)束后進(jìn)行條件渲染根據(jù)條件的變化，初始化加載一種情況，數(shù)據(jù)加載完成后，改變條件，渲染另一種情況多個同級兄弟組件渲染，如果沒有父級標(biāo)簽包裹要求必須有且僅有一個節(jié)點，如何處理不用創(chuàng)建冗余的父級標(biāo)

Issue1：

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

Response：

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

Issue2：

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

Response

不用創(chuàng)建冗余的父級標(biāo)簽，創(chuàng)建一個函數(shù)return這些同級組件，在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()
  }
  
  
  renderBody() {
    return (
      

        {
          _.map(this.state.data.data, (v, i) => 
{v}
)
        }
      

    )
  }
  
render() {
    return (
      

        {
          this.state.data.loading
            ? 
            : this.renderBody()
        }
      

    )
  }

Issue3：

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

Response

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

Issue4：

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

Response

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

Issue5：

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

Response

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

Issue6：

生命周期的使用情況；

Response

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

Issue7：

Jest測試有必要么；

Response

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

Issue8：

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

Response

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

Issue9：

React初始化State對象時

this.state = {
  data: {
    data: [1, 2, 4, 5, 6, 7, 9],
    loading:true
  }
}

通過：

this.setState({
  data:{
    loading:false
  }
})

并不會重新渲染，ReactJS檢測this.state.data的改變，即State對象頂層屬性名的值的改變，這里改變的是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)
    ]
  }
})

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

Issue10：

React會把State狀態(tài)更新操作放在一起，批量執(zhí)行，是如何執(zhí)行的？
不同生命周期的State狀態(tài)更新是在渲染階段一起，依次執(zhí)行，還是在該生命周期方法結(jié)束后執(zhí)行，每個生命周期都是獨立的；

Response

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

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

Issue11：

react-router怎么用;

Response

引入依賴：
import { Router, Route, hashHistory } from "react-router"

Router的使用：

render(
  
    
    
  
  , document.getElementById("container")
)

-----------
引入依賴：
import { Link } from "react-router"

Router的使用：


render() {
    return (
      

        Detail
        Detail2
      

    )
}

-----------

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81560.html

相關(guān)文章

  • Reactjs 列表優(yōu)化的一些心得。

    摘要：前言在應(yīng)用開發(fā)中，列表是我們使用頻率非常高的一種展現(xiàn)形式，在項目中更是如此。無處不在的使用更是需要我們小心觸發(fā)性能瓶頸的深水炸彈。不要用索引當(dāng)值要求我們對列表中的每一項設(shè)置一個唯一的值，這個虛擬的算法有很大關(guān)系。 前言 在應(yīng)用開發(fā)中，列表是我們使用頻率非常高的一種展現(xiàn)形式，在reactjs項目中更是如此。無處不在的使用更是需要我們小心觸發(fā)性能瓶頸的深水炸彈。 下面就我最近的總結(jié)出的幾點...

    劉玉平 評論0 收藏0

  • ReactJs入門教程

    摘要：組件關(guān)注的只應(yīng)該是狀態(tài)，不同的狀態(tài)呈現(xiàn)不同的表現(xiàn)形式。組件一切都是組件倡導(dǎo)開發(fā)者將切分成一個個組件從而達(dá)到松耦合及重用的目的。只不過的命名是進(jìn)入狀態(tài)之前跟進(jìn)入狀態(tài)之后。 前端已不止于前端－ReactJs初體驗 原文寫于 2015-04-15 https://github.com/kuitos/kuitos.github.io/issues/21 要說2015年前端屆最備受矚目的技術(shù)是啥...

    bingo 評論0 收藏0

  • 哈姆雷特之 React

    摘要：最近兩三周在主要在寫，在這里寫一下，算是個總結(jié)。但是打算換成，它是推薦用或，就這樣決定把之前的換成了。這里面主要的問題是作用域?？傊膊]有那么難。目前看來確實是非常適合于前后端分離的。 最近兩三周在主要在寫 React，在這里寫一下，算是個總結(jié)。 webpack 我們的后端語言用的是 Go, 對于寫網(wǎng)站來說，Go 并沒有好的前端資源（js, css，image）的管理方式(打包，壓縮...

    ?xiaoxiao, 評論0 收藏0

  • ReactJS組件之間通信

    摘要：最近在學(xué)習(xí)，不得不說第一次接觸組件化開發(fā)很神奇，當(dāng)然也很不習(xí)慣。 最近在學(xué)習(xí)react.js，不得不說第一次接觸組件化開發(fā)很神奇，當(dāng)然也很不習(xí)慣。react的思想還是蠻獨特的，當(dāng)然圍繞react的一系列自動化工具也是讓我感覺亞歷山大今天總結(jié)一下react組件之間的通信，權(quán)當(dāng)是自己的學(xué)習(xí)筆記： reactJs中數(shù)據(jù)流向的的特點是：單項數(shù)據(jù)流 react組件之間的組合不知道為什么給我一種數(shù)...

    codecook 評論0 收藏0

  • ReactJS 開發(fā)過程中的一些使用心得

    摘要：目前開發(fā)的項目中為了仿原生效果如果自己去通過重新實現(xiàn)的話成本極大所以不得不使用來作為前端庫?？梢栽谶@個函數(shù)中清理在綁定的事件這個方式很有用。在開發(fā)過程中這些生命周期函數(shù)是我使用最頻繁最常見的操作。 ReactJS作為目前最火的構(gòu)建用戶界面的前端框架，為什么有那么多的前端工程師去追逐它，不僅因為它簡單，而且它提供了一系列強(qiáng)大的API讓我們擺脫以前繁瑣的DOM操作，使我們的邏輯更加清晰，代...

    MangoGoing 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<