React 學習一

時間 2019-12-06

標籤 react 學習欄目 React 简体版

原文原文鏈接

說實話，我是被innerHTML等方式搞的受不了了纔開始研究模板引擎的。。。。。。。。
如今市面上有許多的模板框架，像EasyTemplate，Angular什麼的真的不少，爲了選擇一個適合本身的框架，我也是煞費苦心啊。
Angular確實是一個跨時代的產品，可是我是真的不適應她的語法，總以爲本身寫的很彆扭，無心之中發現了React，發現這貨非常對個人胃口啊。好了，廢話很少說，直接上料。javascript

1.安裝

React官網,我本身的開發環境是windos，只說一說地址就行了。html

2.helloWorld

好吧，這是慣例QAQ
在這以前，咱們看看目錄結構

下面是React的HTML模板java

<!DOCTYPE html>
<html>
  <head>
    <script src="react/build/react.js"></script>
    <script src="react/build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/jsx">
        var name = "World";
        React.render(
          <p>hello {name}</p>,
          document.getElementById("example")
        );
    </script>
  </body>
</html>

以上的代碼就是一個最簡單的React應用了，其中react.js是React的基本文件，JSXTransformer.js是一個JSX語法翻譯器（我是這麼叫的。。。）或者叫作解析器（JSX是一個javascript語法糖，有興趣的自行百度）。這兩個文件必須先行引入，由於必須將咱們系的JSX翻譯成源生的JavaScript。特別提示：在講JSX翻譯成JS的時候特別的費時，建議在上線以前直接翻譯。
以上的代碼，是HTML和JavaScript混合在一塊兒的寫法，固然React也支持原生的JS語法，以下react

<!DOCTYPE html>
<html>
  <head>
    <script src="react/build/react.js"></script>
    <script src="react/build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/jsx">
        var p = React.createElement('p', null, 'hello World'); 
        React.render(p, document.getElementById('example'));
    </script>
  </body>
</html>

我的比較推薦JSX的寫法，由於看起來比較爽，寫起來簡單並且並不須要那麼多的回調。。。。git

組件

React 容許將代碼封裝成組件（component），而後像插入普通 HTML 標籤同樣，在網頁中插入這個組件。React.createClass 方法就用於生成一個組件類，以下github

JS代碼
/**
 * reactJS 組件類
 */
var H = React.createClass({
  render: function () {
    return <p className="className">{this.props.name} hello world</p>;
  }
});
React.render(
  <H name="ReactJS" />,
  document.getElementById("example")
);
HTML代碼：
<!DOCTYPE html>
<html>
  <head>
    <script src="react/build/react.js"></script>
    <script src="react/build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/jsx" src="test.js"> </script>
  </body>
</html>

在寫組件的過程當中，我發現組件的命名首字母必須大寫，我不知道這是什麼緣由，求哪位大神指導一些，不勝感激。。
在構建模板的時候，class和for屬性必須寫成className和htmlFor，由於class和for是JavaScript的保留字。
下面，來一發時間註冊。React的時間註冊相似於原生的onclick等方式api

/**
 * reactJS 組件類
 */
var H = React.createClass({
  click: function () {
    alert("click")
  },
  over: function () {
    alert("over")
  },
  render: function () {
    var c =  "click",
      o = "over";
    return (
      <div>
        <p onClick={this.click}>{c}</p>
        <p onMouseOver={this.over}>{o}</p>
      </div>
    );
  }
});
React.render(
  <H name="ReactJS" />,
  document.getElementById("example")
);

在註冊完成以後，查看DOM節點，發現依舊使用的是addEventListener方式。
支持行內樣式書寫，就是直接在dom的style後面賦值便可框架

var divStyle = {
  color: 'white',
  backgroundColor: 'red',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

React.render(

<div style={divStyle}>Hello World!</div>

, document.getElementById("example"));

關於if else，首先我覺得它能夠這樣。。。dom

/**
 * reactJS 組件類
 */
var H = React.createClass({
  render: function () {
    var d = false;
    return (
      <div>
        if (d) {
          <p>123</p>
        } else {
          <p>321</p>
        }      
      </div>
    );
  }
});
React.render(
  <H name="ReactJS" />,
  document.getElementById("example")
);

然而這一切並無卵用！
看看官方文檔。。。人家是這麼寫的。ui

var loginButton;
if (loggedIn) {
  loginButton = <LogoutButton />;
} else {
  loginButton = <LoginButton />;
}

return (
  <nav>
    <Home />
    {loginButton}
  </nav>
)

我本身試了試

/**
 * reactJS 組件類
 */
var H = React.createClass({
  render: function () {
    var d = false;
    var val;
    if (d) {
      val = <div><p>123</p></div>;
    } else {
      val = <div><p>321</p></div>;
    }
    return val;
  }
});
React.render(
  <H name="ReactJS" />,
  document.getElementById("example")
);

這個仍是有卵用的。
看樣子哈，這個JSX中XML語法內是不能夠夾雜javascript語法的，不知道對不對，我再查查看。。。。
在官方文檔中，這個也是不容許的

// This JSX:


<div id={if (condition) { 'msg' }}>Hello World!</div>



// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

在這裏要麼使用3元表達式，要麼老老實實的拆成兩段寫。