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").map(function(){
  return $(this).val();
}).get().join(", ") );

.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