React 基礎入門，基礎知識介紹

React不管在demo渲染還是UI上，都是十分方便，本人菜鳥試試學習一下，結合阮一峰老師的文章，寫下一點關於自己的學習react的學習筆記，有地方不對的地方，希望各位大牛評論指出； PS：代碼包下載： react包引入，在標簽里引入包；首先，最後一個 <script> 標簽的 type 屬性為 ...

React不管在demo渲染還是UI上，都是十分方便，本人菜鳥試試學習一下，結合阮一峰老師的文章，寫下一點關於自己的學習react的學習筆記，有地方不對的地方，希望各位大牛評論指出；

PS：代碼包下載：

react包引入，在標簽里引入包；

<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>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

首先，最後一個 <script> 標簽的 type 屬性為 text/babel 。這是因為 React 獨有的 JSX 語法，跟 JavaScript 不相容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。

其次，上面代碼一共用了三個庫： react.js 、react-dom.js 和 Browser.js ，它們必須首先載入。其中，react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關的功能，Browser.js 的作用是將 JSX 語法轉為 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到伺服器完成。

當然在最後編譯的時候可以直接使用JSx ，引入一個 JSXTransformer.js 就可以直type中看使用text/Jsx 這樣的好處是在我的編譯器（webstorm）中有關鍵詞的顏色區分；

<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
          ReactDOM.render(
            <h1>Hello, world! </h1>,
            document.getElementById('example')
          );
</script>
</body>
</html>

1.基礎語法：

ReactDom.render 工三個參數，第一個元素，第二個是綁定的元素，第三個是回調函數

JSX語法：遇到<>開頭用 HTML語法解析，遇到{} 用javascript 解析；

ReactDom.render(

<div>

{

names.map(function (name) {

//這裡可以定義變數

return <div>Hello, {name}!</div>

})

}

</div>,

document.getElementById('example')

)

2.組件

var NewString = React.createClass({
    render: function () {
var s=<h1 className="two" id="two">
     <i id="one" >MMMMMM{this.id},{this.props.name},{this.props.id},{this.props.className}
     </i></h1>;
        return s;
    }
})

組件的屬性可以在組件類的 this.props 對象上獲取。

就是 class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，

必須包括一個且只能包括一個頂層標簽；

組件可使用單雙標簽，沒區別，但是當需要獲取組件的子元素的時候，必須使用雙標簽。

雙標簽獲取組件下麵的子類：

我們可以用 React.Children.map 來遍歷子節點，而不用擔心 this.props.children 的數據類型是 undefined 還是 object

3.PropTypes

var MyTitle = React.createClass({

propTypes: {

title: React.PropTypes.string.isRequired,

render: function() {

return <h1> {this.props.title} </h1>;

}});

上面的Mytitle組件有一個title屬性。PropTypes 告訴 React，這個 title 屬性是必須的，而且它的值必須是字元串。現在，我們設置 title 屬性的值是一個數值。

這樣一來，title屬性就通不過驗證了

4.getDefaultProps

getDefaultProps : function () {

return {

title : 'Hello World'

};

render: function() {

return <h1> {this.props.title} </h1>;

}});

getDefaultProps 設置預設title的值。

ReactDOM.render(

<MyTitle />,

document.body);

當組件上沒有title，this.props.title的值等於預設值：Hello World；

ReactDOM.render(

<MyTitle title=“New title”/>,

document.body);

當組件上有title，this.props.title的值：New title；

5、獲取真實的DOM節點（ref）

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput111.focus();
    this.refs.pp.style.color="red";
  },
  output:function(){
    alert("wo xtet")
  },
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput111" onClick={this.output} />
        <input type="button" value="Focus the text input" onClick={this.handleClick}/>
        <p ref="pp">{this.props.title}</p>
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

文本輸入框必須有一個 ref 屬性，然後 this.refs.[refName] 就會返回這個真實的 DOM 節點。並且可以操作這個DOM，和原生操作Js一樣

6、This.state

在組件內可以定義狀態，當用戶改變這個狀態的時候，頁面會重新渲染。

getInitialState 是關鍵字，來定義組件狀態

var LikeButton = React.createClass({
  getInitialState: function() {
    return {
      liked11: false,
      love:true
    };
  },
  handleClick: function(event) {
    this.setState({liked11: !this.state.liked11});
    this.setState({love:!this.state.love})
  },
  render: function() {
    var text = this.state.liked11 ? 'like' : 'haven\'t liked';
   var text1=this.state.love?"love":"hate";
    return (
      <p>
        You {text} this. Click to toggle.
        <br/>
        <span onClick={this.handleClick}>you {text1} this.clcik to tpggle</span>
      </p>
    );
  }
});

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

由於 this.props 和 this.state 都用於描述組件的特性，可能會產生混淆。一個簡單的區分方法是，this.props 表示那些一旦定義，就不再改變的特性，而 this.state 是會隨著用戶互動而產生變化的特性。

7.表單

this.props.value 讀取組件的屬性（代碼黃色處），而要定義一個 onChange 事件的回調函數，通過表單元素用 event.target.value

非表單用event.target.innerHTMl 操作節點一樣方式

ReactDOM.render(<Input value="!@21"/>, document.getElementById('example'));

8.組件的生命周期

組件的生命周期分成三個狀態：

Mounting：已插入真實 DOM
Updating：正在被重新渲染
Unmounting：已移出真實 DOM

React 為每個狀態都提供了兩種處理函數，will 函數在進入狀態之前調用，did 函數在進入狀態之後調用，三種狀態共計五種處理函數。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

此外，React 還提供兩種特殊狀態的處理函數。

componentWillReceiveProps(object nextProps)：已載入組件收到新的參數時調用
shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時調用

附帶代碼：

   var Hello = React.createClass({
        getInitialState: function () {
          console.log(this);
          return {
            opacity: 1.0
          };
        },
        componentWillMount: function () {
          this.timer = setInterval(function () {
            var opacity = this.state.opacity;
            opacity -= .05;
            if (opacity < 0.1) {
              opacity = 1.0;
            }
            this.setState({
              opacity: opacity
            });
//bind(this) 你可以當做是使用外部的this(React組件的)覆蓋函數中的this.
          }.bind(this), 100);
        },
        render: function () {
          return (
            <div style={{opacity: this.state.opacity}}>
              Hello {this.props.name}
            </div>
          );
        }
      });