認識React

noONE 發布于2019-08-19 18:01 / 1216人閱讀

摘要：認識準備寫有兩種方式通過通過寫起來感覺會更方便，但就需要用進行編譯了。組件的兩個重要對象就是一個組件模板的數據對象。當一個組件進行了登錄之后，應該通知其他需要更新登錄信息的組件。

認識React 準備 babel-cli

寫 React 有兩種方式：

通過 jsx

通過 js

jsx 寫起來感覺會更方便，但就需要用babel進行編譯了。

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

CLI工具編譯

Node.js運行時編譯

瀏覽器（客戶端）運行時編譯

這樣我打算用 babel-cli 進行實時編譯，會比較方便。

安裝

將工具全局安裝了：

$ [sudo] npm i -gd babel-cli

插件多帶帶安裝：

$ npm i -d babel-preset-react

使用

ps:我這里之前說錯了

這里有個坑，在 windows 系統的話，可以直接babel --presets react，但在 os x 會報錯，要直接直接指定絕對路徑/usr/local/lib/node_modules/babel-preset-react，

babel-cli 的 --presets 參數是會向父級目錄尋找 node_module 里面的 babel-prest-xxx 插件，如果沒有找到，就會相對于當前目錄路徑尋找插件。

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

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

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

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

{
    "presets": ["react"]
}

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

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

jsx是需要編譯的文件夾，build是編譯后產出的文件夾。

使用 React v0.14.x




  
  Document

ps：官網的示例中，react 核心 js 是放在標簽里面的，因為這樣的話，在最后渲染 DOM 的時候就可以直接選擇在標簽里面了。不然就要像我這樣，在標簽里面給個節點供 react 進行渲染。

組件 組件概念

先來個 Input 組件。

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

通過 Reac.createClass 創建的就是組件了。
rander 函數 return 的東西可以稱作模板。
每個組件都是一個樹形結構（有父級節點和子節點，也就是不能同時存在兩個頂級節點，react 是不允許的）。
在 React 里面就是一個個組件組成的，組合在一起就也是一個樹形結構。

組件的渲染

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

調用 ReactDOM.render 方法進行渲染，第一個參數是組件了，第二個是裝載該組件的容器。
同樣的，第一個參數只支持樹形結構，也就是只有一個頂級節點。

組件的兩個重要對象 props

props 就是一個組件模板的數據對象。里面儲存著靜態的數據，也就是只在調用時賦值，之后如果有數據的改變也不會再次進行模板的渲染了。

props 的使用:

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

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

state

state 跟 props 是相對的。
state 是動態的數據對象，也就是可以任何時候進行賦值，之后如果有數據的改變會進行模板的再次渲染（這里渲染的話就涉及到了 react 的 virtual DOM）了。

state 的使用：
這里定義個列表組件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 的初始數據。

還可以在組件的生命周期函數里可以從服務器獲取數據然后通過調用 this.setState 方法進行對 state 賦值。

this.setState 就是那個 可以任何時候進行賦值 的方法了。

改造下 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")
)

這里進行了事件 onChange 的調用，當觸發 change 事件的時候，state 就會進行改版了。
關于時間系統的文檔：

react 事件系統

react 表單事件

組件的文檔

組件API

組件生命周期

組件的通信

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

我對通信的理解

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

在我的理解里面，組件的通信可以更明確地理解為數據的通信，因為數據和組件渲染分離是很重要的。
一個負責不同組件渲染的組件容器，會自行判斷數據的狀態從而進行最終組件的渲染。這樣就能做到數據和組件渲染的分離了。這個概念就是Container Components
、Leveling Up With React: Container Components

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

沒錯，我們可以把 Flux、Redux 這些工具當成通信工具來看待，如果你喜歡，你完全可以用寫信的方式（自己寫一個觀察者模式的函數）。當A組件的數據要與B組件的數據進行打電話的時候，撥通B組件的電話號碼，然后把數據告訴B組件就可以了。數據會在運營商的系統里面走一遭，然后傳到B組件那里的。

通信場景

例如登錄。

在一個頁面上，如果存在兩個或兩個以上需要獲取登錄信息的組件，就將需要進行通信了。
當一個組件進行了登錄之后，應該通知其他需要更新登錄信息的組件。這樣就產生了通信的需求了。

組件的抽象與封裝

這塊到沒有太多的實踐，組件的拆分、定義是一門深思熟慮的藝術。等有實踐經驗找到門路之后再做補充。
但這塊可能是很多人會忽略的，優秀的抽象封裝首先應該是針對方便開發和維護的，其次才是復用。

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

GPU云服務器云服務器認識認識你深刻認識正確認識

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79102.html

React入門系列 - 4. 認識無狀態組件

摘要：讓他增加一個內部維持的狀態另外有一點需要注意，由于是無狀態組件，所以，無論是否變更，都會重新刷新這個組件。 4.1 什么是無狀態組件在開發React組件的時候，大家可能會遇到就是我使用的這個組件純粹就是渲染使用，里面并沒有自己的狀態、方法、生命周期等等操作。而為這種組件創建完整的實例有一種浪費機器性能的感覺。那么，讓我們來看看，如何創建一個easy react component...

cgspine 2019-08-26 18:09 評論0 收藏0
React系列之一起認識Render Prop

摘要：比如有個組件，它用來實時的獲取鼠標的位置。命名空間，多個修改同一個導致的命名沖突。據說源碼里面為每個組件增加路由屬性就是通過該方法好了大功完成了，歡迎一起討論學習個人博客地址意卿 1.mixins 寫過react項目的應該都碰到過，不同組件復用相同代碼的問題，在react早期使用React.createClass創建組件的時代，我們經常使用的是mixins來實現代碼復用。比如有個組件A...

LMou 2019-08-22 14:58 評論0 收藏0
說說對JSX的認識

摘要：認識引子最近幾個月做的一個項目，使用了技術體系，自然而然的用到了。下面就總結一下自己對的認識。而這無疑增加了框架的門檻和復雜度。在被渲染之前，所有的數據都被轉義成為了字符串處理。以避免跨站腳本攻擊。表示對象將編譯成調用。 JSX認識引子最近幾個月做的一個項目，使用了react技術體系，自然而然的用到了JSX。下面就總結一下自己對JSX的認識。什么是JSX 即JavaScript...

clasnake 2019-08-20 16:20 評論0 收藏0
React學習之認識Flux架構模式

摘要：是用戶建立客戶端應用的前端架構，它通過利用一個單向的數據流補充了的組合視圖組件，這更是一種模式而非正式框架，你能夠無需許多新代碼情況下立即開始使用。結構和數據流一個單向數據流是模式的核心。 Flux是Facebook用戶建立客戶端Web應用的前端架構，它通過利用一個單向的數據流補充了React的組合視圖組件，這更是一種模式而非正式框架，你能夠無需許多新代碼情況下立即開始使用Flux。 ...

EasonTyler 2019-08-23 18:37 評論0 收藏0
React 重要的一次重構：認識異步渲染架構 Fiber

摘要：在之前的叫，是新的，這次更新到架構是一次重量級的核心架構的替換，為了完成這次替換已經準備了兩三年的時間了。因此團隊引入了異步渲染這個概念，而采用架構可以實現這種異步渲染的方式。官方目前已經把和標記為，并使用新的生命周期函數和進行替換。 Diff 算法熟悉 react 的朋友都知道，在 react 中有個核心的算法，叫 diff 算法。web 界面由 dom 樹組成，不同的 dom 樹...

cppowboy 2019-08-26 12:23 評論0 收藏0