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

資訊專欄INFORMATION COLUMN

React知識(shí)梳理

GitChat / 810人閱讀

摘要：只是一個(gè)語法糖，它可以將文件里的轉(zhuǎn)換成所以對(duì)于方法使用要知道。組件的傳遞給內(nèi)部組件，內(nèi)部組件傳遞給內(nèi)內(nèi)部組件。沒有解決什么問題如何構(gòu)建大型項(xiàng)目沒有解決，如何管理大型項(xiàng)目的數(shù)據(jù)狀態(tài)沒有解決。

React解決了什么問題？

首先React是單頁應(yīng)用時(shí)期出現(xiàn)的框架，它適合開發(fā)單頁應(yīng)用，隨之配套的構(gòu)建工具webpack、node環(huán)境。

傳統(tǒng)UI操作關(guān)注太多DOM的API細(xì)節(jié)。
React幫助我們不必過多關(guān)注DOM的API實(shí)現(xiàn)細(xì)節(jié)，React對(duì)DOM進(jìn)行了更高級(jí)別的抽象。
使用React元素，描述我們的頁面，細(xì)節(jié)的渲染，交給React去做。我們只需要告訴React,我寫了什么組件，什么標(biāo)簽，什么事件就好了。

使我們開發(fā)頁面，是組件化思想去開發(fā)，HTML、CSS、JS合為一體。比如我們創(chuàng)建一個(gè)標(biāo)簽，并給它樣式和事件

  let div = document.createElement("div")
  div.style.color = "red"
  div.innerHTML = "HTML標(biāo)簽"
  div.onclick = function() {
    //描述這個(gè)標(biāo)簽做什么交互
  }

  class App extends Component {

     makeAction = () => {
     // div標(biāo)簽做的交互
     }
     
     render() {
         return 
 React元素

     }
  }

React是什么？
React是一個(gè)UI庫，可以幫你描述頁面標(biāo)簽該如何展示。
React以組件化的方式，寫標(biāo)簽。所有的頁面都可以拆分成一塊塊組件。

React的出現(xiàn)，讓前端開發(fā)者可以不用過多關(guān)注DOM的API細(xì)節(jié)，我們只需要聲明式的使用React寫入我們想要的標(biāo)簽，React就會(huì)幫我們?nèi)ヤ秩舅?/p>

如果建立一個(gè)React項(xiàng)目呢？首先去官網(wǎng)，需要Node的環(huán)境，加上Git的環(huán)境。都可以去官網(wǎng)下載。

第一步：使用npx create-react-app命令創(chuàng)建一個(gè)React項(xiàng)目
我知道使用JSX語法加上React.createElement、ReactDOM.render、React.Component，只需要兩個(gè)API就可以把我們寫的標(biāo)簽，瀏覽器便可以展示出來。

JSX只是一個(gè)語法糖，它可以將javaScript文件里的

轉(zhuǎn)換成React.createElement("div")

所以對(duì)于React.createElement、ReactDOM.render方法使用要知道。

React.createElement(eleType, attribute, text)
ReactDOM.render(fn, string, class, node)

React.createElement(type,)創(chuàng)建和返回固定的元素。
React.render()方法，傳入兩個(gè)參數(shù)，第一個(gè)是對(duì)象，第二個(gè)是根節(jié)點(diǎn)
React.Component組塊化方式開發(fā)頁面里面的render方法
this.setState配合有狀態(tài)組件更新整個(gè)DOM？
組件傳入?yún)?shù)都在props里面

    
    
    function App(props){
        return 
{props.name}

    }
    
    class App extends React.Component {
        render() {
            return 
{this.props.name}

        }
    }

JSX語法是JavaScript語法糖，本質(zhì)動(dòng)態(tài)創(chuàng)建React組件，也是React.createElement新一層封裝

const menu = {Item: function(){return 
來吧
} }

//JSX語法
ReactDOM.render()
//JavaScript原生語法
ReactDOM.render(React.createElement(menu.Item))
JSX語法本質(zhì)和使用 組件的生命周期和方法 組件通信

React通信，也是單向數(shù)據(jù)傳遞的。組件的props傳遞給內(nèi)部組件，內(nèi)部組件傳遞給內(nèi)內(nèi)部組件。
使用Context的API進(jìn)行跨層組件的通信，也挺繁瑣，使用在根組件，但其它深層次嵌套的組件，都需要引入，所以這個(gè)Context適合多帶帶成為一個(gè)模塊，被其它組件引用，降低復(fù)雜度。

React沒有解決什么問題？

如何構(gòu)建大型項(xiàng)目沒有解決，如何管理大型項(xiàng)目的數(shù)據(jù)狀態(tài)沒有解決。

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

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

相關(guān)文章

  • 01.react入門必備，知識(shí)點(diǎn)梳理，生命周期全講解

    摘要：生命周期在版本中引入了機(jī)制。以后生命周期圖解不包含官方不建議使用的事件處理事件的命名采用小駝峰式，而不是純小寫。只是在兄弟節(jié)點(diǎn)之間必須唯一受控組件使的成為唯一數(shù)據(jù)源。 react 基礎(chǔ) JSX JSX是一個(gè) JavaScript 的語法擴(kuò)展,可以很好地描述 UI 應(yīng)該呈現(xiàn)出它應(yīng)有交互的本質(zhì)形式。 React DOM 在渲染所有輸入內(nèi)容之前，默認(rèn)會(huì)進(jìn)行轉(zhuǎn)義。它可以確保在你的應(yīng)用中，永遠(yuǎn)...

    Jiavan 評(píng)論0 收藏0

  • 前端開發(fā)收集 - 收藏集 - 掘金

    摘要：責(zé)編現(xiàn)代化的方式開發(fā)一個(gè)圖片上傳工具前端掘金對(duì)于圖片上傳，大家一定不陌生。之深入事件機(jī)制前端掘金事件綁定的方式原生的事件綁定方式有幾種想必有很多朋友說種目前，在本人目前的研究中，只有兩種半兩種半還有半種的且聽我道來。 Ajax 與數(shù)據(jù)傳輸 - 前端 - 掘金背景 在沒有ajax之前，前端與后臺(tái)傳數(shù)據(jù)都是靠表單傳輸，使用表單的方法傳輸數(shù)據(jù)有一個(gè)比較大的問題就是每次提交數(shù)據(jù)都會(huì)刷新頁面，用...

    ygyooo 評(píng)論0 收藏0

  • JavaScript - 收藏集 - 掘金

    摘要：插件開發(fā)前端掘金作者原文地址譯者插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內(nèi)優(yōu)雅的實(shí)現(xiàn)文件分片斷點(diǎn)續(xù)傳。 Vue.js 插件開發(fā) - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡單的方式。插....

    izhuhaodev 評(píng)論0 收藏0

  • React知識(shí)地圖--ES6

    摘要：預(yù)計(jì)會(huì)有，實(shí)時(shí)更新目錄。聲明一個(gè)只讀的常量，用來聲明變量，和都是塊級(jí)作用域。模板字符串模板字符串是增強(qiáng)版的字符串，用反引號(hào)標(biāo)識(shí)。 原文在我的博客：https://github.com/YutHelloWo...如果喜歡請(qǐng)start或者watch。這將是我繼續(xù)寫下去的動(dòng)力。 這里梳理下React技術(shù)棧需要的最小知識(shí)集，讓你可以最短時(shí)間掌握React,Redux,React-Router,...

    SillyMonkey 評(píng)論0 收藏0

  • 玩轉(zhuǎn) React（一）- 前言

    摘要：本人計(jì)劃編寫一個(gè)針對(duì)中初級(jí)前端開發(fā)者學(xué)習(xí)的系列教程玩轉(zhuǎn)。使用的原因是新的語言規(guī)范開發(fā)效率更高代碼更優(yōu)雅，尤其是基于開發(fā)的項(xiàng)目。其次也是目前特別流行的一個(gè)前端框架，截止目前，上有將近萬，國內(nèi)一二線互聯(lián)網(wǎng)公司都有深度依賴開發(fā)的項(xiàng)目。 本人計(jì)劃編寫一個(gè)針對(duì)中初級(jí)前端開發(fā)者學(xué)習(xí) React 的系列教程 - 《玩轉(zhuǎn) React》。 文章更新頻率：每周 1 ~ 2 篇。 目錄 玩轉(zhuǎn) React（...

    waltr 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<