JS - To my gril

  1 /*
  2 
  3     
  4     这个程序的流程是 , 首先执行 构造函数 (), 然后 就去执行那个 render 渲染 , 在  render 哪里 的if else 转向应该执行的渲染方法 , 例如 commitsrender
  5 然后当 标签对应的渲染方法执行完毕之后 就over了 . 
  6 */
  7 
  8 
  9 import React from ‘react‘;
 10 import ajax from ‘superagent‘;
 11 
 12 class Detail extends React.Component { // 声明一个 Detail 类 通过关键字 extend 继承自 React.Component
 13     constructor(props) {  // construtor 是 构造函数的意思 在任何语言之内 当你用这个类 实例化一个对象之后 ， 就会自动执行 构造函数（优先级很高） 。 
 14         super(props);    // 通过 super 关键字 将 props 这个属性给 该类 的父亲 React.Component
 15      
 16         this.state = {        // 给 this 所指向的对象 , 绑定方法 . 
 17             mode: ‘commits‘,  // mode 是指定默认的 模式 , 也就是当你打开网页的时候 你首先看到的是 commits 中的内容 . 
 18             commits: [],     //  现在 声明 this的属性 (state) , (其实 : 后面的内容随意 , 但是为了容易理解下文 所以这里就是 [] 表明这是一个数组 ) 
 19             forks: [],
 20             pulls: []
 21             };
 22         }
 23     componentWillMount() {
 24         ajax.get(‘http://192.168.1.100:3000/test1‘)  // 通过这个方法 来获取 地址中的内容 . 
 25             .end((error, response) => {      // error 来 储存上面的获取内容是否成功 , response 来储存 获取的内容 . 
 26                 if (!error && response) {            // 如果 没有发生错误 , 并且有内容的话 
 27                     this.setState({ commits: response.body }); //  这里是将 , 上文中的 response.body 的内容 绑定到 , this 下面的conmits 属性 . 
 28                 } else {
 29                         console.log(‘Error fetching commits‘, error); // 如果 获取内容出问题的话 就 在web控制台 输出 这里的内容 . 
 30                 }
 31               }
 32             );
 33     ajax.get(‘http://192.168.1.100:3000/test2‘)    // 同上
 34         .end((error, response) => {
 35             if (!error && response) {
 36                 this.setState({ forks: response.body });
 37             } else {
 38                 console.log(‘Error fetching forks‘, error);
 39             }
 40         }
 41     );
 42     ajax.get(‘http://192.168.1.100:3000/test3‘)   // 同上 
 43         .end((error, response) => {
 44             if (!error && response) {
 45                 this.setState({ pulls: response.body });
 46             } else {
 47                 console.log(‘Error fetching pulls‘, error);
 48                     }
 49             }
 50         );
 51     }
 52     showCommits() {                //   这个方法的意思是 展现出来commits的内容 . 
 53          this.setState({ mode: ‘commits‘ });   // 在这里 我们昨天说过 可以通过 setstate 这个方法 来监测当 内容改变的时候 会自动刷新页面 . 
 54     }
 55     showForks() {
 56           this.setState({ mode: ‘forks‘ });   // 同上 
 57     }
 58     showPulls() {
 59          this.setState({ mode: ‘pulls‘ });
 60     }
 61     renderCommits() {        //  这里是 渲染 commits的内容 . 
 62           return this.state.commits.map((commit, index) => {        //  在上面 (15-24) commits , 可以看到commits的储存的 第一个网页中的内容 . index的数值 是从 0 开始 最大值根据 commits的大小来确定 .   // 在括号里面 commit 储存 commits的内容 相当于 commit=this.state.commits
 63               const author = commit.author ? commit.author : ‘xpower‘;  // 因为 网页中的是 author 所以当 commit 代表 就等于了 网页的内容 . 可以通过 . 的方法来调用其中和属性 
 64              return (<p key={index}> // 这里是 因为采用了匿名函数 , react 不能识别出来 , 网页标签的代号 . 所以在这里需要手动设置 . 
 65                  <strong>{author}</strong>:
 66                   <a href={commit.url}>{commit.url}</a>.//  第一个 commit.url 是实质上点击之后 导向的地址 . 第二个 commit.url是网页上面显示的地址 . 
 67               </p>);
 68           });
 69     }
 70     renderForks() {
 71          return this.state.forks.map((fork, index) => {
 72             const owner = fork.owner ? fork.owner : ‘Anonymous‘;
 73             
 74             return (<p key={index}>
 75             <strong>{owner}</strong>: forked to
 76             <a href={fork.url}>{fork.url}</a> at {fork.created_at}.
 77             </p>);
 78          });
 79     }
 80     renderPulls() {
 81             return this.state.pulls.map((pull, index) => {
 82                   const user = pull.user ? pull.user : ‘Anonymous‘;
 83                          return (<p key={index}>
 84                          <strong>{user}</strong>:
 85                  <a href={pull.url}>{pull.url}</a>.
 86              </p>);
 87          });
 88     }
 89     render() {
 90          let content;
 91               if (this.state.mode === ‘commits‘) {     //这几个 if else 适用于检查现在 . 是执行的的哪一个标签 . 
 92                   content = this.renderCommits();    // 然后开始调用 , 相应标签对应的函数 . 
 93                  } else if (this.state.mode === ‘forks‘) {
 94                       content = this.renderForks();
 95               } else {
 96              content = this.renderPulls();
 97             }
 98             return (<div>
 99                 <button onClick={this.showCommits.bind(this)}>Show Commits</button>
100                 <button onClick={this.showForks.bind(this)}>Show Forks</button>
101                 <button onClick={this.showPulls.bind(this)}>Show Pulls</button>
102                 {content}
103             </div>);
104     }
105 }
106 export default Detail;