react學習筆記1

時間 2019-11-11

標籤 react 學習筆記欄目 React 简体版

原文原文鏈接

1.reactJs簡介javascript

　　react起源於faceboo的內部項目，由於該公司對市場全部的javascript mvc框架都不滿意，因而決定本身寫一條，用來架設Instagram的網站。作出來之後，發現這套東西和好用，就在2013年5月開源了。因爲其代碼邏輯很是簡單，性能出衆，因此用的人愈來愈多，認爲它多是未來web開發的主流工具。html

　　reactJs官網地址： http://facebook.github.io/react/前端

　　github地址：https://github.com/facebook/reactjava

　　react不是完整的mvc框架，最可能是mvc種的view；react的服務器端render能力算得上是一個錦上添花的功能。react有獨特的JSX語法，和javascript不兼容。react

　　在web開發過程當中，咱們總的藥將變化的數據實時反應到UI上，這時候就須要對DOM進行操做。而複雜或頻繁的DOM操做一般是性能瓶頸產生的緣由（如何進行高性能的複雜DOM操做一般是衡量一個前端開發人員技能的重要指標）。git

　　react中爲此引入了虛擬DOM（virtual dom）的機制：在遊覽器端用javascript實現了一套DOM API。基於react進行開發時全部DOM構造都是經過virtual dom的機制，每當數據變化時，react都會從新構建整個dom樹，而後react將當前整個dom樹和上一次dom樹進行對比。獲得dom的變化後，僅僅將須要變化的部分進行實際的遊覽器dom更新。github

　　並且，react可以批處理dom的刷新，在一個事件循環（event loop）內的兩次數據變化合並。好比，你先將A變成B，而後又將B變成A，那麼react認爲UI不發生任何變化。任何變化都是經過總體刷新完成的。web

　　react推薦以組建的方式去從新思考UI的構成，將UI每個功能相對獨立的模塊定義成組件，而後將小的組件經過組合或者嵌套的方式構成大的組件。而組件應該有以下特徵：npm

　　（1）可組合：能夠和其餘組件一塊兒使用，也能夠嵌套在另外一個組件內部。服務器

　　（2）可重用：每一個都是有獨立的功能

　　（3）可維護性：包含自身的邏輯，容易被理解和維護

　　若是說mvc的思想讓你作到視圖－數據－控制器的分離，那麼組件化的思考方式則是帶來了UI功能模塊之間的分離。

2.getting Started

　　browser.min.js : 將JSX語法轉爲javascript

　　react.js : 是react的核心庫

　 react-dom.js : 提供與DOM相關功能

　　(1)代碼總覽

　　（2）遊覽器裏看到的效果

　　（3）代碼（引入文件夾build去官網下載react文件就能夠了,或者經過npm安裝）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

3.jsx語法

　　HTML語言直接寫在javascript語言中，不加任何引導，這就是JSX的語法。它容許HTML與javascript的混寫。好比：

　　(1)代碼預覽

　　（2）遊覽器裏效果

　　（3）源碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var names = ['cynthia','wupore','selene'];
      ReactDOM.render(
        <div>
          {
            names.map(function(name){
              return <div>hello,{name}</div>
            })
          }
        </div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

4.react組件屬性

　　舉個例子：

　　（1）代碼預覽

　　（2）遊覽器裏效果

　　（3）源碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/babel">
      var Component = React.createClass({
        displayName : 'Component',
        render:function(){
          return React.createElement('div',null,"Component",this.props.name);
        }
      });

      ReactDOM.render(
        React.createElement(Component,{name:"+cynthia"}),
        document.getElementById('example')
      );
    </script>
  </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。