react 學習記錄（四）

寫在前面

新的一週，夜晚開始新的學習。

咦~貌似這周從昨天就開始了 /(ㄒoㄒ)/~~

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

demo11

<script type="text/babel">
var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },

  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      var lastGist = result[0];
      if (this.isMounted()) {
        this.setState({
          username: lastGist.owner.login,
          lastGistUrl: lastGist.html_url
        });
      }
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        {this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  document.getElementById('example')
);
    </script>

getInitialState 初始化State

return對象即爲State，包含全部會動的屬性

componentDidMount 生命週期插入dom以後執行

裏面jq ajax 仍是引入的jq   <script src="../build/jquery.min.js"></script>

ps：React 自己沒有任何依賴

.bind(this) 這種異步的方法實際裏面的的匿名函數調用的都是window，用bind（this）就能夠把外面的this傳進去

回調關鍵在於改變this.setState

demo12

Promise對象是啥。。。？？矇蔽臉

promise

英[ˈprɒmɪs]

美[ˈprɑ:mɪs]

vt.	允諾，許諾; 給人以…的期望或但願;

vi.	許諾; 有期望，有前途;

n.	許諾; 但願，期望; 允諾的東西;

 

一個ES6定義的新對象

var promise = new Promise(function(resolve, reject) {
 if (/* 異步操做成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});

promise.then(function(value) {
 // success
}, function(value) {
 // failure
});

做者：流星狂飆
連接：http://www.jianshu.com/p/063f7e490e9a
來源：簡書
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

而後在例子中是用箭頭函數寫的

<script type="text/babel">
var RepoList = 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 repos = this.state.data.items;
      var repoList = repos.map(function (repo, index) {
        return (
          <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>
        );
      });
      return (
        <main>
          <h1>Most Popular JavaScript Projects in Github</h1>
          <ol>{repoList}</ol>
        </main>
      );
    }
  }
});

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

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

 

value => this.setState({loading: false, data: value}),

至關於

function(value){

    return this.setState({loading: false, data: value});

}

function(value){

    this.setState({loading: false, data: value});

}.bind(this)

ps1:雖然沒有要求return的說,這裏若是沒有return也是正常的，由於只要執行了this.setState(。。。）就會從新刷新render

ps2;這裏還發現一個箭頭函數的好處實際箭頭函數會保持上下文不發生改變，若是咱們要確切的相等要加上一個.bind(this)

補充

jq中map

$("p").append( $("input").get().join(", ") );.map(function(){
  return $(this).val();
})

.map(callback(index,domElement))

http://www.w3school.com.cn/jquery/traversing_map.asp

map第一個是索引，第二個參數纔是項

 

而例子中用的map是屬於jsx中的map

文檔原文

JSX allows embedding any expressions in curly braces so we could inline the map() result

改寫了下樣例代碼

function ListItem(props) {
  return <li>{props.number}{props.index}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number,index) =>
        <ListItem key={number.toString()}
                  number={number} index={index}/>
      )}
    </ul>
  );
}

const numbers = ['a','b','c','d','e'];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

發現jsx中也是第一個爲項，第二個爲索引。。！！

demo13

睡覺覺zzz