react 學習記錄（二）

寫在前面

加班幾天，懶了幾天，今天手癢，打打react

來源：http://www.ruanyifeng.com/blog/2015/03/react.html

demo6

屬性能夠接受任意值，字符串、對象、函數等等均可以

這時候忽然想不起屬性是什麼鬼   ┏┛墓┗┓...(((m -__-)m

ReactDOM.render(
        <MyTitle title={data} />,
        document.getElementById('example')
      );

title={data}叫屬性

組件類的PropTypes屬性，就是用來驗證組件實例的屬性是否符合要求

組件類——》複習下

var MyTitle = React.createClass({
        propTypes: {
          title: React.PropTypes.string.isRequired,
        },

        render: function() {
          return <h1> {this.props.title} </h1>;
        }
      });

propTypes: {
          title: React.PropTypes.string.isRequired,
        },

字符串，必須的，

注意最後還有個逗號‘，’

var data = 123;

ReactDOM.render(
  <MyTitle title={data} />,
  document.body
);

這樣一來，title屬性就通不過驗證了。控制檯會顯示一行錯誤信息。

注意這裏的不過不是沒辦法執行，而是在控制檯報錯。

 

getDefaultProps 方法能夠用來設置組件屬性的默認值

------------------------------------------------這裏加個分割線

demo7

react基於虛擬dom，可是像input這樣須要真實dom的狀況下才能夠獲取

順序是這樣的

在react中

建立類

var MyComponent = React.createClass({

    ... ...

    render:function(){

        return(  虛擬dom  );

    }

})

 

以後在虛擬dom中若是有須要被取值等之類的（真實dom）

<div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>

調用點擊時間，函數的調用注意以前講過的「{」以後當成js 因此在html中爲this.handleClick，調用方法

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

以後就是this，誰調用，指向誰，外面是經過this.handleClick調用的。因此顯而易見這是的this仍是指向整個構造類對象，this.refs.myTextInput.focus();

this.真實dom對象{}.對象名字.方法/屬性

------------------------------------------------這裏加個分割線

demo8

組件有個狀態機

this.state = {} //裏面存個對象

初始化用getInitialState 綠色

返回一個對象就是給this.state的

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

this.setState，修改狀態 紅色

ps：ps：ps：每次修改之後，自動調用 this.render 方法（更新dom）

this.props 表示那些一旦定義，就再也不改變的特性，

this.state 是會隨着用戶互動而產生變化的狀態。

 

 

未完待續