React(1)

gghyoo 發布于2019-08-01 17:47 / 1482人閱讀

摘要：有以下特點聲明式設計采用聲明范式，可以輕松描述應用。高效通過對的模擬，最大限度地減少與的交互。靈活可以與已知的庫或框架很好地配合。內嵌了對的支持。通過與用戶的交互，實現不同狀態，然后渲染，讓用戶界面和數據保持一致。

?????????????????????????????????????????React入門

?????????????????????????????????React 是一個用于構建用戶界面的 JAVASCRIPT 庫。有以下特點：
???1.聲明式設計 ?React采用聲明范式，可以輕松描述應用。
???2.高效 ?React通過對DOM的模擬，最大限度地減少與DOM的交互。
???3.靈活 ?React可以與已知的庫或框架很好地配合。
???4.JSX ? JSX 是 JavaScript 語法的擴展。React 開發不一定使用 JSX ，但速度快。
???5.組件 ? 通過 React 構建組件，使得代碼更加容易得到復用，能夠很好的應用在大項目的開發中。
???6.單向響應的數據流 ? React 實現了單向響應的數據流，從而減少了重復代碼，這也是它為什么比傳統數據綁定更簡單。

Hello world例子:



  
    
    Hello React!

實例中我們引入了三個庫： react.min.js 、react-dom.min.js 和 babel.min.js：
react.min.js - React 的核心庫
react-dom.min.js - 提供與 DOM 相關的功能
babel.min.js - Babel 可以將 ES6 代碼轉為 ES5 代碼，這樣我們就能在目前不支持 ES6 瀏覽器上執行 React 代碼。Babel 內嵌了對 JSX 的支持。通過將 Babel 和 babel-sublime 包（package）一同使用可以讓源碼的語法渲染上升到一個全新的水平。

JSX語法:

 ReactDOM.render(
        Hello, world!,
        document.getElementById("example")
      );

上述代碼為獲取id 為example的標簽添加render里寫的html標簽或者執行js

props -> properties 屬性們
render -> 渲染
ReactDom.render(實例化的組件，要渲染到得對象)

我們可以在 JSX 中使用 JavaScript 表達式。表達式寫在花括號 {} 中。如下：

ReactDOM.render(
    
      {alert(1)}
    
    ,
    document.getElementById("example")
);

在 JSX 中不能使用 if else 語句，但可以使用 conditional (三元運算) 表達式來替代。

ReactDOM.render(
    
      {i == 1 ? "True!" : "False"}
    
    ,
    document.getElementById("example")
);

React 推薦使用內聯樣式。我們可以使用 camelCase 語法來設置內聯樣式. React 會在指定元素數字后自動添加 px ：

var style = {
   background-color: blue;
};
ReactDOM.render(
    hello,
    document.getElementById("example")
);

React 通過React.createClass新建組件，如果我們需要向組件傳遞參數，可以使用 this.props 對象：

var HelloWorld = React.createClass({
  render: function() {
    return Hello {this.props.world}！;
  }
});
 
ReactDOM.render(
  ,
  document.getElementById("example")
);

React 復合組件：



  
    
    Hello React!

???????React 把組件看成是一個狀態機（State Machines）。通過與用戶的交互，實現不同狀態，然后渲染 UI，讓用戶界面和數據保持一致。
React 里，只需更新組件的 state，然后根據新的 state 重新渲染用戶界面（不要操作 DOM）。
以下實例中創建了 LikeButton 組件，getInitialState 方法用于定義初始狀態，也就是一個對象，這個對象可以通過 this.state 屬性讀取。當用戶點擊組件，導致狀態變化，this.setState 方法就修改狀態值，每次修改以后，自動調用 this.render 方法，再次渲染組件。

GPU云服務器云服務器 react _React React 源碼 react cdn

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

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

精益 React 學習指南（Lean React）- 1.1 React 介紹

摘要：單向數據流應用的核心設計模式，數據流向自頂向下我也是性子急的人，按照技術界的慣例，在學習一個技術前，首先得說一句。然而的單向數據流的設計讓前端定位變得簡單，頁面的和數據的對應是唯一的我們可以通過定位數據變化就可以定位頁面展現問題。書籍完整目錄 1.1 React 介紹 showImg(https://segmentfault.com/img/bVvJgS); 1.1.1 React ...

lsxiao 2019-08-19 18:20 評論0 收藏0
React 深入系列1：React 中的元素、組件、實例和節點

摘要：中的元素組件實例和節點，是中關系密切的個概念，也是很容易讓初學者迷惑的個概念。組件和元素關系密切，組件最核心的作用是返回元素。只有組件實例化后，每一個組件實例才有了自己的和，才持有對它的節點和子組件實例的引用。 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。 React 中的元素、組件、實...

LeviDing 2019-08-22 17:26 評論0 收藏0
React Native 升級到版本到0.25.1

摘要：的更新策略是兩個星期迭代一個新版本使用的沒有多長時間就需要升到最新版本了，這里介紹下如何升級到版本以及其以上。使用首先要添加的依賴，如果把的版本直接升高到當前版本，比如。 React Native的更新策略是兩個星期迭代一個新版本,使用的React Natvie沒有多長時間就需要升到最新版本了，這里介紹下如何升級到版本0.25.1以及其以上。 React Native 25，一個顯著的...

jeffrey_up 2019-08-20 10:15 評論0 收藏0
精益 React 學習指南（Lean React）- 1.3 React 組件

摘要：無狀態組件除了可以通過來創建組件以外，組件也可以通過一個普通的函數定義，函數的返回值為組件渲染的結果。這就是為什么要有屬性，屬性能夠幫助定位與數組元素的關系，在重渲染的時候能夠實現渲染優化。書籍完整目錄 1.3 React 組件 showImg(https://segmentfault.com/img/bVvLOW); 1.3.1 React 組件介紹在 React 中組件是第一元...

cyrils 2019-08-02 15:54 評論0 收藏0