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