學習react教程_ZenDei技術網路在線

網址收藏 : "React官網" ， "React的Github" ， "React的中文文檔" 1.react是什麼？ React 起源於Facebook的內部項目，因為該公司對市場上所有的Javascript MVC框架都不滿意，決定自己寫一套，用來架設Instargm的網站。做完以後，發現很好 ...

網址收藏: React官網，React的Github，React的中文文檔

1.react是什麼？

React起源於Facebook的內部項目，因為該公司對市場上所有的Javascript MVC框架都不滿意，決定自己寫一套，用來架設Instargm的網站。做完以後，發現很好用，就在2013年5月開源。

2.安裝react

全局安裝react腳手架工具npm install create-react-app -g
安裝阮一峰老師的教程 git clone [email protected]:ruanyf/react-demos.git下載下來

3.react特性

重點：組件，狀態
核心：狀態

4.語法。

4.1 html模板

<!DOCTYPE html>
<html>
  <head>
    <!-- 這是核心js -->
    <script src="../build/react.js"></script>
    <!-- 這是處理虛擬dom相關的js -->
    <script src="../build/react-dom.js"></script>
    <!-- 這是把JSX語法轉換為js語法 （註意：JSX就是可以把html寫在js裡面。） -->
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <!-- 這裡加type就是告訴游覽器，這裡使用的是JSX語法模板。 -->
    <script type="text/babel">
      //這裡寫
    </script>
  </body>
</html>

4.2 ReactDOM.render()

React最基本的方法，用於把模板轉換成html語言，並且插入指定的節點。

例如：

ReactDOM.render(
    <h2>Welcome to React World!</h2>,
    document.getElementById('myapp')
)

4.3 JSX語法

JSX是可以在js中寫html，遇到html標簽（例如：<）就用html解析，遇到代碼塊（例如：{）就用javascript規則解析。

例如：

<!DOCTYPE html>
<html>
  <head>
    <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>
    <div id="food"></div>
    <script type="text/babel">
      var names = ['Alice', 'Emily', 'Kate'];
      var foods = ['meal','sala','milk'];

      ReactDOM.render(
        <div>
        {
          names.map(function (name, index) {
            return <div key={index}>Hello, {name}!</div>
          })
        }
        </div>,
        document.getElementById('example')
      );
      ReactDOM.render(
        <div>
        {
          foods.map(function (food, index) {
              return <div key={index}>I like eat {food}!</div>
          })
        }
        </div>,
        document.getElementById('food')
      )
    </script>
  </body>
</html>

4.4 組件 React.createClass()

React允許將代碼封裝成組件(component)，然後把它當成html標簽插入到網頁中。React.createClass()就是可以創建一個組建類。

例如：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
      var LikeFood = React.createClass({  //創建組件類
        render: function() {
          return <p>I like eat <mark>{this.props.name}</mark></p>;
        }
      });

      ReactDOM.render(
        <LikeFood name="Apple"/>,
        document.getElementById('foods')
      )
    </script>
  </body>
</html>

4.5 this.props.children

this.props對象的屬性與組件的屬性基本上是一致的，特殊在於this.props.children屬性，它表示組件的所有子節點。

註意： this.props.children有三個可能，如果當前組件沒有子節點，就是顯示undefined;如果有一個子節點，數據類型就是object；如果有多個子節點，就是array，所以要小心。
但React提供了一個方法遍歷所有子節點，React.Children,通過this.props.children來遍歷。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
        var FoodList = React.createClass({
            render: function() {
            return (
                <ul>
                {
                    React.Children.map(this.props.children,function (child) {
                    return <li>{child}</li>;
                    })
                }
                </ul>
            )
            }
        })

        ReactDOM.render(
            <FoodList>
            <span>Hello,</span>
            <span>I like eat</span>
            <span>Apple!</span>
            </FoodList>,
            document.getElementById('foods')
        )
    </script>
  </body>
</html>

4.6 PropTypes

組件的屬性可以接受任何值，如字元串，數字，數組，對象，函數，但是需要一種機制來驗證使用組件提供的參數是否符合要求，PropTypes就是用來驗證這個的。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
      var str = 123;
      var MyNum = React.createClass({
        propTypes: {
          num: React.PropTypes.number.isRequired,
        },

        render: function() {
          return <h2>{this.props.num}</h2>
        }
      });

      ReactDOM.render(
        <MyNum num={str} />,
        document.getElementById('foods')
      )
    </script>
  </body>
</html>

補充：還可以添加預設值。'

getDefaultProps: function() {
    return {
    num: 1818
    }
}

例如：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
      var str;
      var MyNum = React.createClass({
        getDefaultProps: function() {
            return {
                num: 1818
            }
        }
        propTypes: {
          num: React.PropTypes.number.isRequired,
        },

        render: function() {
          return <h2>{this.props.num}</h2>
        }
      });

      ReactDOM.render(
        <MyNum num={str} />,
        document.getElementById('foods')
      )
    </script>
  </body>
</html>

4.7 獲取真實的DOM節點

組件並不是真的dom節點，只是存在記憶體中的數據結構，叫做虛擬DOM(virtual)。當它插入到文檔以後，才會變成真實的DOM。

所有的DOM變動，先是在虛擬DOM上發生變動，然後再在實際發生變動的部分，反映在真實的DOM，這種叫做DOM diff,它可以極大提高網頁的性能表現。

有時需要從組件獲取真實的DOM的節點，這個時候就要用到ref屬性。

註意：React還支持許多事件，更多請訪問事件。

例如：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
        var MyFoods = React.createClass({
          showContent: function() {
            this.refs.myFoodInput.focus();
          },
          render: function() {
            return (
              <div>
                <input type="text" ref="myFoodInput" />
                <input type="button" value="自動聚焦" onClick={this.showContent} />
              </div>
            )
          }
        })

        ReactDOM.render(
          <MyFoods />,
          document.getElementById('foods')
        )

    </script>
  </body>
</html>

4.8 this.state 狀態管理

組件免不了要和用戶互動，React的一大創新就是把組件看成是一個狀態機，一開始有個初始狀態，然後用戶互動，導致狀態變化，從而重新出發渲染UI。

註意： getInitialState 方法用於定義初始狀態，但同時它是一個對象，這個可以通過this.state屬性讀取。

當用戶點擊組件，導致狀態發生變化，this.setState 方法就會修改狀態值，每次修改完，會自動調用this.render方法，再次渲染組件。

this.props和this.state都是描述組件的特性，但是不同的是this.props是指一旦定義好了，就不再發生變化的特性，而this.state是會隨著用戶互動而產生變化的特性。

例如：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="foods"></div>
    <script type="text/babel">
      var FoodButton = React.createClass({
        getInitialState: function() {
          return {food: false};
        },
        callClick: function(event) {
          this.setState({food: !this.state.food});
        },
        render: function() {
          var text1 = this.state.food ? 'like eat apple' : 'hate eat apple';
          return (
            <p onClick={this.callClick}>
              You {text1}!  
            </p>
          );
        }
      });

      ReactDOM.render(
        <FoodButton />,
        document.getElementById('foods')
      )
    </script>
  </body>
</html>

4.9 表單

用戶在表單填入的內容，屬於用戶和組件之間的互動，所以不能用this.state，而要定義一個onChange事件的回調函數，通過event.target.value讀取用戶的值。

註意：textarea,select,radio都屬於這種情況。

例如：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="food"></div>
    <script type="text/babel">

      var Food = React.createClass({
        getInitialState: function() {
          return {val: 'Welcome to React!'};
        },
        hanChange: function(event) {
          this.setState({val:event.target.value});
        },
        render: function() {
          var val = this.state.val;
          return (
            <div>
              <input type="text" value={val} onChange={this.hanChange} />
              <p>{val}</p>  
            </div>
          );
        }
      })
      ReactDOM.render(<Food />,document.getElementById('food'))
    </script>
  </body>
</html>

4.10 組件的生命周期

React中組件的生命周期分為三個狀態，Mounting是已經插入真實DOM，Updating是正在被重新渲染，Unmounting是已移出真實DOM。

每個狀態都有兩種處理函數，will函數是進入狀態之前，did函數是進入狀態之後，三種狀態共計五種函數。

註意：組件的樣式style不能寫成<div style={opacity: this.state.opacity}>，要寫成<div style={{opacity: this.state.opacity}}>。

因為React組件樣式是個對象，所以第一個大括弧表示Javascript語法，第二個大括弧表示樣式對象。

五種函數

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentWillUpdate(object prevState, object prevState)
componentWillUnMount()

例如：第二種，在已插入真實DOM之後觸發。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="food"></div>
    <script type="text/babel">
      var Food = React.createClass({
        getInitialState: function() {
          return {
            opacity: 0
          }
        },
        componentDidMount: function() {
          this.timer = setInterval(function() {
            var opacity = this.state.opacity;
            opacity += .05;
            if (opacity > 1) {
              opacity = 0;
            }
            this.setState({
              opacity: opacity
            })
          }.bind(this),100);
        },

        render: function() {
          return (
            <div style={{opacity: this.state.opacity}}>
              Hello, {this.props.title}
            </div>
          );
        }
      });

      ReactDOM.render(
        <Food title="apple"/>,
        document.getElementById('food')
      )
    </script>
  </body>
</html>

4.11 Ajax的使用

組件的數據來源一般都是通過Ajax請求從伺服器獲取，可以使用componentDidMount()方法設置Ajax請求，等到請求成功，再用this.setState方法重新渲染UI。

例如：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
    <script src="../build/jquery.min.js"></script>
  </head>
  <body>
    <div id="food"></div>
    <script type="text/babel">
      var ClientGits = React.createClass({
        getInitialState: function() {
          return {
            id: '',
            addr: ''
          };
        },
        componentDidMount: function() {
          $.get(this.props.source,function (result) {
            var gits = result[0];
            this.setState({
              id: gits.id,
              addr: gits.git_pull_url
            });
          }.bind(this));
        },

        render: function() {
          return (
            <div>
              UserId is <a href='#userId'>{this.state.id}</a>, Git Address is <a href={this.state.addr}>{this.state.addr}</a>!
            </div>
          );
        }
      });

      ReactDOM.render(
        <ClientGits source="https://api.github.com/users/octocat/gists" />,
        document.getElementById('food')
      )
    </script>
  </body>
</html>

註意：上面採用了jquery的Ajax，還可以採用其他的庫。我們甚至可以把Promise對象傳入組件。

例如：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
    <script src="../build/jquery.min.js"></script>
  </head>
  <body>
    <div id="projects"></div>
    <script type="text/babel">
        var Projects = React.createClass({
          getInitialState: function() {
            return {
              loading: true,
              error: null,
              data: null
            };
          },

          componentDidMount() {
            this.props.promise.then(
              value => this.setState({loading: false, data: value}),
              error => this.setState({loading: false, error: error})
            )
          },

          render: function() {
            if (this.state.loading) {
              return <span>Loading...</span>;
            } else if (this.state.error != null) {
              return <span>Error:{this.state.error.message}</span>;
            } else {
              var res = this.state.data.items;
              var resList = res.map(function (res,index) {
                return (
                  <li key={index}><a href={res.html_url} target="_blank">{res.name}</a>({res.stargazers_count} stars)<br/>{res.description}</li>
                );
              });
              return (
                <main>
                  <h1>Github上最受歡迎的JS項目</h1>
                  <ul>{resList}</ul>
                </main>
              );
            }
          }
        });

        ReactDOM.render(
          <Projects promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
          document.getElementById('projects')
        )
    </script>
  </body>
</html>