react入門學習筆記（一）

時間 2019-11-06

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

原文原文鏈接

這兩天得空，特地來折騰瞭如下時下火熱的前端框架react，至於爲何選react,做爲一個初學者react和vue在技術上的優劣我無權評論，也就不妄加評論了。選擇react的主要緣由大概是由於該框架出現較早，感受上會相對成熟，往後學習中遇到問題想要查找答案相對簡單一些，對，就是這麼簡單。javascript

在官網文檔作了簡單瞭解以後我，我想做爲初學者首先仍是從react基本知識瞭解，固然其中涉及到JSX語法和ES6的相關知識，這些我沒有太深刻了解，畢竟仍是要跟着學習react的主線來走的，跟着官方給的例子，大體瞭解用法就行，這個不難實現。至於網上說的react全家桶之類的，做爲初學者，我暫時也是沒去理會的。多說無益，接下來開始react的學習，我按照我學習中帶着的問題來一一解答，完成個人入門筆記。css

1、react在實際開發中能給咱們帶來什麼樣的便捷html

學一個新的庫或者新的框架，我老是先聯合實際，明白了我將要學習的東西能給我帶來什麼，我纔能有目的地去學習。不知道你們是否也是同樣。react主要是針對前端UI的組件化開發。就是前端的一個頁面包括Header,Content,footer,等等元素均可以是react裏面的一個組件，能夠屢次重複使用。若是你們作過頁面開發就知道，當然有bootstrap這樣的佈局神器，爲咱們搭建網頁節省了很多時間，可是想要作到一個組件的屢次重複使用依然是很難的。因此react正是來解決這個問題的，至於如何解決相信往下看了實際的例子就能明白了。前端

2、學習react須要瞭解的一些概念vue

一、react的安裝
本人最忌麻煩，因此沒有從react官網下載文件，直接用的網上的資源，一心一意寫dome，本文的例子引用下面三個文件就能夠了：java

<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

二、react中的最小單元組件的概念、建立方式
組件是react中用於呈現到頁面的元素，組件可大可小，下面是我所知道的四種建立方法：react

/*
   * 組件定義方法一
   */
  //react元素也能夠用來表示組件
  //const element = <h1>Hello World</h1>
  // ReactDOM.render(
  //   element,
  //   document.getElementById('example')
  // );
  
  /*
   * 組件定義方法二
   */
  //定義組件最簡單的方法就是定義一個javascript函數
  // function Welcome(props){
  //   return <h1>Hello {props.name}</h1>;
  // }
  // const element = <Welcome name="huanglw" />
  // ReactDOM.render(
  //   element,
  //   document.getElementById('example')
  // );
  
  /*
   * 方法三
   */
  //ES6類來定義一個組件
  // class Welcome extends React.Component {
  //   render() {
  //     return <h1>Hello, {this.props.name}</h1>;
  //   }
  // }
  // ReactDOM.render(
  //   <Welcome name="huanglw" />,
  //   document.getElementById('example')
  // );

  /*
   * 方法四
   */
  //react自帶的建立組件的方法
  var Welcome = React.createClass ({
    render:function(){
      return <h1>Hello, {this.props.name}</h1>;
    }
  });
  ReactDOM.render(
    <Welcome name="huanglw" />,
    document.getElementById('example')
  );

下面這張關於JSX對象的對應關係的圖片須要瞭解一下，有助於理解代碼：bootstrap

三、組件怎麼顯示到頁面上去
組件要顯示到頁面上去就要說起react中最重要的方法ReactDOM.render()方法了，經過該方法將react元素渲染到頁面中指定的DOM節點中去：前端框架

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  //此處只能用原生方法獲取DOM節點，不可用jq方法
  document.getElementById('root')
);

四、組件更新
組件也能夠更新，下面例子是一個實時更新顯示當前時間的組件babel

<script type="text/babel">
    function tick(){
      const element = (
        //相鄰的JSX元素必須包裹早封閉的標籤中，若是沒有<div>標籤會報語法錯誤
        <div>
          <h1>Hello World</h1>
          <h2>This is {new Date().toLocaleTimeString()}.</h2>
        </div>
        );
      ReactDOM.render(
        element,
        document.getElementById('example')
      );
    }
    //setInterval("tick()",1000);
    setInterval(tick,1000);
    </script>

五、組件能夠包含子組件，從而構建一個大的組件
組件可大可小，一個大的組件能夠拆分紅不少小的組件，一個個小的組件能夠經過層層包含構成一個大的組件甚至應用，而且各個小組件都是相互獨立的，可屢次複用，這也是react的重要思想之一吧！

<script type="text/babel">
      //這是定義好了的一個組件
      function Welcome(props){
        return <h1>Hello {props.name}</h1>;
      }
      //這是另一個組件，而且能夠引用組件Welcome
      function App(){
        return (
          <div>
            <Welcome name="Jack" />
            <Welcome name="Sara" />
            <Welcome name="Rose" />
          </div>
          )
      }
      ReactDOM.render(
        <App />,
        document.getElementById('example')
      );
    </script>

六、react事件處理
首先須要瞭解如下js的bind的用法和箭頭函數。

其次還須要瞭解ES6的相關語法，因爲我自身也還在學習，因此不敢深刻講解，主要講講reac事件處理中主要能夠設置組件的初始狀態，以及一些點擊事件什麼的設定。具體例子能夠看官網文檔，我自知對這章理解不深。因此ES6的知識提早掌握仍是比較好的。

七、react實現一個評論模塊

<script type="text/jsx">
var data = [
        {author: "Pete Hunt", text: "This is one comment"},
        {author: "Jordan Walke", text: "This is *another* comment"},
        {author: "Huanglw", text: "I like JavaScript"}
];

    // 建立React組件
var CommentBox = React.createClass({
        // 在組件的生命週期中僅執行一次，用於設置初始狀態
        getInitialState: function() {
            return {data: []};
        },
        onCommentSubmit: function(comment) {

            data.push(comment);

            var self = this;
            setTimeout(function() {
                // 動態更新state
                self.setState({data: data});
            }, 500);
        },
        // 當組件render完成後自動被調用
        componentDidMount: function() {
            var self = this;
            setTimeout(function() {
                // 動態更新state
                self.setState({data: data});
            }, 2000);
        },
  render: function() {
    return (
      // 並不是是真正的DOM元素，是React的div組件，默認具備XSS保護
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm onCommentSubmit={this.onCommentSubmit} />
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function(comment) {
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });

    return (
      <div className="commentList">
        {commentNodes}    
      </div>
    );
  }
});

    var converter = new Showdown.converter();
    var Comment = React.createClass({
        render: function() {

            // 經過this.props.children訪問元素的子元素
            var rawHtml = converter.makeHtml(this.props.children.toString());
            return (
                // 經過this.props訪問元素的屬性
                // 不轉義，直接插入純HTML
                <div className="comment">
                    <h2 className="commentAuthor">{this.props.author}</h2> 
                    <span dangerouslySetInnerHTML={{__html: rawHtml}} />
                </div>
            );
        }
});

var CommentForm = React.createClass({
        handleSubmit: function(e) {

            e.preventDefault();
            // e.returnValue = false;
            var author = this.refs.author.getDOMNode().value.trim();
            var text = this.refs.text.getDOMNode().value.trim();

            if(!text || !author) return;
            
            this.props.onCommentSubmit({author: author, text: text});

            // 獲取原生DOM元素
            this.refs.author.getDOMNode().value = '';
            this.refs.text.getDOMNode().value = '';
        },
  render: function() {
    return (
                // 爲元素添加submit事件處理程序
                // 用ref爲子組件命名，並能夠在this.refs中引用
      <form className="commentForm" onSubmit={this.handleSubmit}>
                    <input type="text" placeholder="Your name" ref="author"/>
                    <input type="text" placeholder="Say something..." ref="text"/>
                    <input type="submit" value="Post"/>
                </form>
    );
  }
});

    // render方法建立組件的根元素，並注入到DOM元素中（第二個參數）
React.render(
  <CommentBox />,
  document.getElementById('content')
);

 </script>

寫文章不易，主要是做爲本身學習的筆記，又恐有遺漏不對的地方誤導了像我同樣的初學者。心裏惶恐啊，因此若有不對的地方還望你們指正，我必然及時更正。