認(rèn)識(shí)React

noONE 發(fā)布于2019-08-19 18:01 / 1224人閱讀

摘要：認(rèn)識(shí)準(zhǔn)備寫有兩種方式通過通過寫起來感覺會(huì)更方便，但就需要用進(jìn)行編譯了。組件的兩個(gè)重要對(duì)象就是一個(gè)組件模板的數(shù)據(jù)對(duì)象。當(dāng)一個(gè)組件進(jìn)行了登錄之后，應(yīng)該通知其他需要更新登錄信息的組件。

認(rèn)識(shí)React 準(zhǔn)備 babel-cli

寫 React 有兩種方式：

通過 jsx

通過 js

jsx 寫起來感覺會(huì)更方便，但就需要用babel進(jìn)行編譯了。

用babel編譯 React 的 jsx 有三種方法( 關(guān)于 babel 的具體使用方法好像還是有很多疑問的。以后會(huì)再折騰下)

CLI工具編譯

Node.js運(yùn)行時(shí)編譯

瀏覽器（客戶端）運(yùn)行時(shí)編譯

這樣我打算用 babel-cli 進(jìn)行實(shí)時(shí)編譯，會(huì)比較方便。

安裝

將工具全局安裝了：

$ [sudo] npm i -gd babel-cli

插件多帶帶安裝：

$ npm i -d babel-preset-react

使用

ps:我這里之前說錯(cuò)了

這里有個(gè)坑，在 windows 系統(tǒng)的話，可以直接babel --presets react，但在 os x 會(huì)報(bào)錯(cuò)，要直接直接指定絕對(duì)路徑/usr/local/lib/node_modules/babel-preset-react，

babel-cli 的 --presets 參數(shù)是會(huì)向父級(jí)目錄尋找 node_module 里面的 babel-prest-xxx 插件，如果沒有找到，就會(huì)相對(duì)于當(dāng)前目錄路徑尋找插件。

除此之外，你也可以寫成絕對(duì)路徑的插件地址。

在多帶帶安裝了插件后，你就可以不用寫絕對(duì)路徑地址了。

$ babel --presets react jsx --watch --out-dir build

如果不想每次敲命令，可以在項(xiàng)目目錄（就是敲babel命令的目錄）中新建一個(gè).babelrc文件:

{
    "presets": ["react"]
}

這樣敲命令的時(shí)候就可以不要帶上--presets參數(shù)了。

$ babel jsx --watch --out-dir build

jsx是需要編譯的文件夾，build是編譯后產(chǎn)出的文件夾。

使用 React v0.14.x




  
  Document

ps：官網(wǎng)的示例中，react 核心 js 是放在標(biāo)簽里面的，因?yàn)檫@樣的話，在最后渲染 DOM 的時(shí)候就可以直接選擇在標(biāo)簽里面了。不然就要像我這樣，在標(biāo)簽里面給個(gè)節(jié)點(diǎn)供 react 進(jìn)行渲染。

組件 組件概念

先來個(gè) Input 組件。

var Input = React.createClass({
  render: function(){
    return(
      
        四月是誰的謊言
        
      
    )
  }
})

通過 Reac.createClass 創(chuàng)建的就是組件了。
rander 函數(shù) return 的東西可以稱作模板。
每個(gè)組件都是一個(gè)樹形結(jié)構(gòu)（有父級(jí)節(jié)點(diǎn)和子節(jié)點(diǎn)，也就是不能同時(shí)存在兩個(gè)頂級(jí)節(jié)點(diǎn)，react 是不允許的）。
在 React 里面就是一個(gè)個(gè)組件組成的，組合在一起就也是一個(gè)樹形結(jié)構(gòu)。

組件的渲染

ReactDOM.render(
  ,
  document.getElementById("JBody")
);

調(diào)用 ReactDOM.render 方法進(jìn)行渲染，第一個(gè)參數(shù)是組件了，第二個(gè)是裝載該組件的容器。
同樣的，第一個(gè)參數(shù)只支持樹形結(jié)構(gòu)，也就是只有一個(gè)頂級(jí)節(jié)點(diǎn)。

組件的兩個(gè)重要對(duì)象 props

props 就是一個(gè)組件模板的數(shù)據(jù)對(duì)象。里面儲(chǔ)存著靜態(tài)的數(shù)據(jù)，也就是只在調(diào)用時(shí)賦值，之后如果有數(shù)據(jù)的改變也不會(huì)再次進(jìn)行模板的渲染了。

props 的使用:

var Input = React.createClass({
  render: function(){
    return(
      // 使用 props
      
        四月是誰的謊言
        
      
    )
  }
})

ReactDOM.render(
  , // 賦值 props
  document.getElementById("JBody")
)

state

state 跟 props 是相對(duì)的。
state 是動(dòng)態(tài)的數(shù)據(jù)對(duì)象，也就是可以任何時(shí)候進(jìn)行賦值，之后如果有數(shù)據(jù)的改變會(huì)進(jìn)行模板的再次渲染（這里渲染的話就涉及到了 react 的 virtual DOM）了。

state 的使用：
這里定義個(gè)列表組件Items

var Items = React.createClass({
  getInitialState: function() {
    return {
      data: [12312,1231,45,51512312,2131]
    }
  },
  render: function(){
    return(
      
        {this.state.data.map((value,i) => {
          return {value}
        })}
      
    )
  }
})

getInitialState 用來定義 state 的初始數(shù)據(jù)。

還可以在組件的生命周期函數(shù)里可以從服務(wù)器獲取數(shù)據(jù)然后通過調(diào)用 this.setState 方法進(jìn)行對(duì) state 賦值。

this.setState 就是那個(gè) 可以任何時(shí)候進(jìn)行賦值 的方法了。

改造下 Input 組件，state示例：

var Input = React.createClass({
  getInitialState: function() {
    return {
      who: "我"
    }
  },
  change: function(e){
    let target = e.target
    this.setState({
      who : target.value
    })
  },
  render: function(){
    // 使用 props
    return(
      
        
          四月是誰的謊言？
          
        
        {`四月是${this.state.who}的謊言`}
      
    )
  }
})

ReactDOM.render(
  ,
  document.getElementById("JBody")
)

這里進(jìn)行了事件 onChange 的調(diào)用，當(dāng)觸發(fā) change 事件的時(shí)候，state 就會(huì)進(jìn)行改版了。
關(guān)于時(shí)間系統(tǒng)的文檔：

react 事件系統(tǒng)

react 表單事件

組件的文檔

組件API

組件生命周期

組件的通信

react 的核心中是沒有關(guān)于兩個(gè)不同組件之間的相互通信的方法的，但是官方給出了一種flux的通信概念、flux中文文檔，然而社區(qū)似乎并不覺得這一套方案很好用，于是有了另一種通信概念redux。

我對(duì)通信的理解

react 的組件化概念是很明確的，但對(duì)于組件之間通信可以說是基本沒有。

在我的理解里面，組件的通信可以更明確地理解為數(shù)據(jù)的通信，因?yàn)閿?shù)據(jù)和組件渲染分離是很重要的。
一個(gè)負(fù)責(zé)不同組件渲染的組件容器，會(huì)自行判斷數(shù)據(jù)的狀態(tài)從而進(jìn)行最終組件的渲染。這樣就能做到數(shù)據(jù)和組件渲染的分離了。這個(gè)概念就是Container Components
、Leveling Up With React: Container Components

在其他的一些mv*框架里面，每個(gè)組件都有自己的通信接口，從而可以在A組件里面跟B組件進(jìn)行數(shù)據(jù)通信，但 react 卻是沒有這樣的接口，從而我們就需要一個(gè)借助一些通信工具，比如手機(jī)、電腦什么的。

沒錯(cuò)，我們可以把 Flux、Redux 這些工具當(dāng)成通信工具來看待，如果你喜歡，你完全可以用寫信的方式（自己寫一個(gè)觀察者模式的函數(shù)）。當(dāng)A組件的數(shù)據(jù)要與B組件的數(shù)據(jù)進(jìn)行打電話的時(shí)候，撥通B組件的電話號(hào)碼，然后把數(shù)據(jù)告訴B組件就可以了。數(shù)據(jù)會(huì)在運(yùn)營商的系統(tǒng)里面走一遭，然后傳到B組件那里的。

通信場景

例如登錄。

在一個(gè)頁面上，如果存在兩個(gè)或兩個(gè)以上需要獲取登錄信息的組件，就將需要進(jìn)行通信了。
當(dāng)一個(gè)組件進(jìn)行了登錄之后，應(yīng)該通知其他需要更新登錄信息的組件。這樣就產(chǎn)生了通信的需求了。

組件的抽象與封裝

這塊到?jīng)]有太多的實(shí)踐，組件的拆分、定義是一門深思熟慮的藝術(shù)。等有實(shí)踐經(jīng)驗(yàn)找到門路之后再做補(bǔ)充。
但這塊可能是很多人會(huì)忽略的，優(yōu)秀的抽象封裝首先應(yīng)該是針對(duì)方便開發(fā)和維護(hù)的，其次才是復(fù)用。

github:https://github.com/jincdream/jincdream.g...

云服務(wù)器 GPU云服務(wù)器認(rèn)識(shí) 認(rèn)識(shí)你深刻認(rèn)識(shí) 正確認(rèn)識(shí)

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

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

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

登陸后可評(píng)論

0條評(píng)論

noONE

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

css中的尺寸和單位

閱讀 3590·2019-08-30 15:55
前端每日實(shí)戰(zhàn)：100# 視頻演示如何用純 CSS 創(chuàng)作閃閃發(fā)光的霓虹燈文字

閱讀 1387·2019-08-29 16:20
網(wǎng)頁圖片縮放的深入剖析

閱讀 3669·2019-08-29 12:42
setTimeout和setInterval的使用

閱讀 2675·2019-08-26 10:35
ajxa和axios的區(qū)別

閱讀 1025·2019-08-26 10:23
編程范式與函數(shù)式編程

閱讀 3422·2019-08-23 18:32
基于 Node.js 的輕量級(jí)云函數(shù)功能實(shí)現(xiàn)

閱讀 914·2019-08-23 18:32
NodeJs+Express+Mysql + Vuejs 項(xiàng)目實(shí)戰(zhàn) - 大綱

閱讀 2906·2019-08-23 14:55

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

認(rèn)識(shí)React

相關(guān)文章

React入門系列 - 4. 認(rèn)識(shí)無狀態(tài)組件

React系列之一起認(rèn)識(shí)Render Prop

說說對(duì)JSX的認(rèn)識(shí)

React學(xué)習(xí)之認(rèn)識(shí)Flux架構(gòu)模式

React 重要的一次重構(gòu)：認(rèn)識(shí)異步渲染架構(gòu) Fiber

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

0條評(píng)論

noONE

男|高級(jí)講師

TA的文章

css中的尺寸和單位

前端每日實(shí)戰(zhàn)：100# 視頻演示如何用純 CSS 創(chuàng)作閃閃發(fā)光的霓虹燈文字

網(wǎng)頁圖片縮放的深入剖析

setTimeout和setInterval的使用

ajxa和axios的區(qū)別

編程范式與函數(shù)式編程

基于 Node.js 的輕量級(jí)云函數(shù)功能實(shí)現(xiàn)

NodeJs+Express+Mysql + Vuejs 項(xiàng)目實(shí)戰(zhàn) - 大綱

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

認(rèn)識(shí)React

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！