React 教程 在线

666React 教程

<p>Facebok(React)</p><p>Google(Angular)</p>

665React AJAX

可以通过箭头函数绑定 this:

class UserGist extends React.Component {
  constructor(props) {
      super(props);
      this.state = {username: '', lastGistUrl: ''};
  }
 
 
  componentDidMount() {
  //可以通过箭头函数绑定this
    this.serverRequest = $.get(this.props.source, (result)=> {
      var lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    });
  }
 
  componentWillUnmount() {
    this.serverRequest.abort();
  }
  
  
  render() {
      return (
        <div>
          {this.state.username} 用户最新的 Gist 共享地址:
          <a href={this.state.lastGistUrl} rel="nofollow">{this.state.lastGistUrl}</a>
        </div>
      );
    }
  }
 
  ReactDOM.render(
    <UserGist source="https://api.github.com/users/octocat/gists" />,
    document.getElementById('example')
  );

664React AJAX

<p>上述事件的另外一种写法:</p><pre style=""><span class="kwd">class</span><span class="pln"> </span><span class="typ">UserGist</span><span class="pln"> </span><span class="kwd">extends</span><span class="pln"> </span><span class="typ">React</span><span class="pun">.</span><span class="typ">Component</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> constructor</span><span class="pun">(</span><span class="pln">props</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">super</span><span class="pun">(</span><span class="pln">props</span><span class="pun">);</span><span class="pln"> </span><span class="com">//在state设置两个属性,以便后续通过state对象来对其进行修改</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">state </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">username</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> lastGistUrl</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">};</span><span class="pln"> </span><span class="com">//绑定挂载事件</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">componentDidMount </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">componentDidMount</span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> componentDidMount</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">//接下来操作state时上下文对象发生改变,此处拿到操作句柄</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> that </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">;</span><span class="pln"> </span><span class="com">//ajax请求</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">serverRequest </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">ajax</span><span class="pun">({</span><span class="pln"> url</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">props</span><span class="pun">.</span><span class="pln">source</span><span class="pun">,</span><span class="pln"> type</span><span class="pun">:</span><span class="str">"GET"</span><span class="pun">,</span><span class="pln"> dataType</span><span class="pun">:</span><span class="pln"> </span><span class="str">'jsonp'</span><span class="pun">,</span><span class="pln"> success</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">result</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">result</span><span class="pun">.</span><span class="pln">data</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> lastGist </span><span class="pun">=</span><span class="pln"> result</span><span class="pun">.</span><span class="pln">data</span><span class="pun">[</span><span class="lit">0</span><span class="pun">];</span><span class="pln"> </span><span class="com">//此处的上下文发生改变,this的指针指向发生了变化,通过上述定义的that来操作</span><span class="pln"> that</span><span class="pun">.</span><span class="pln">setState</span><span class="pun">({</span><span class="pln"> username</span><span class="pun">:</span><span class="pln"> lastGist</span><span class="pun">.</span><span class="pln">owner</span><span class="pun">.</span><span class="pln">login</span><span class="pun">,</span><span class="pln"> lastGistUrl</span><span class="pun">:</span><span class="pln"> lastGist</span><span class="pun">.</span><span class="pln">html_url </span><span class="pun">})</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">})</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">//卸载React组件时,把多余请求关闭,以免影响其他框架或组件的操作</span><span class="pln"> componentWillUnmount</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">serverRequest</span><span class="pun">.</span><span class="pln">abort</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> render</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="str"><div></span><span class="pln"> </span><span class="pun">{</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">state</span><span class="pun">.</span><span class="pln">username</span><span class="pun">}</span><span class="pln"> </span><span class="pun">用户最新的</span><span class="pln"> </span><span class="typ">Gist</span><span class="pln"> </span><span class="pun">共享地址:</span><span class="pln"> </span><span class="pun"><</span><span class="pln">a href</span><span class="pun">={</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">state</span><span class="pun">.</span><span class="pln">lastGistUrl</span><span class="pun">}</span><span class="pln"> rel</span><span class="pun">=</span><span class="str">"nofollow"</span><span class="pun">>{</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">state</span><span class="pun">.</span><span class="pln">lastGistUrl</span><span class="pun">}</</span><span class="pln">a</span><span class="pun">></span><span class="pln"> </span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln"> </span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="typ">ReactDOM</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="pln"> </span><span class="pun"><</span><span class="typ">UserGist</span><span class="pln"> source</span><span class="pun">=</span><span class="str">"https://api.github.com/users/octocat/gists"</span><span class="pln"> </span><span class="pun">/>,</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'example'</span><span class="pun">)</span><span class="pln"></span><span class="pun">);</span></pre><p><a target="_blank" href="/try/try.php?filename=usergist">尝试一下 »</a></p>

663React 组件 API

isMounted 的方法在 ES6 中已经废除。主要的原因是它经过实际使用与测试可能不足以检测组件是否挂载,尤其是对于有一些异步的程序情况,以及逻辑上造成混乱。现在用以下方法代替:

componentDidMount() {
    this.mounted = true;
}

componentWillUnmount() {
    this.mounted = false;
}

662React 组件 API

关于 setState() 这里有三件事情需要知道。

1、不要直接更新状态

例如,此代码不会重新渲染组件:

// Wrong
this.state.comment = 'Hello';

应当使用 setState():

// Correct
this.setState({comment: 'Hello'});

构造函数是唯一能够初始化 this.state 的地方。

2、状态更新可能是异步的

React 可以将多个 setState() 调用合并成一个调用来提高性能。

因为 this.props 和 this.state 可能是异步更新的,你不应该依靠它们的值来计算下一个状态。

例如,此代码可能无法更新计数器:

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

要修复它,请使用第二种形式的 setState() 来接受一个函数而不是一个对象。 该函数将接收先前的状态作为第一个参数,将此次更新被应用时的props做为第二个参数:

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

上方代码使用了箭头函数,但它也适用于常规函数:

// Correct
this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.increment
  };
});

3、状态更新合并

当你调用 setState() 时,React 将你提供的对象合并到当前状态。

例如,你的状态可能包含一些独立的变量:

constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

你可以调用 setState() 独立地更新它们:

componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

这里的合并是浅合并,也就是说 this.setState({comments}) 完整保留了 this.state.posts,但完全替换了 this.state.comments。