React 教程 - FACESOHO知行者

React 教程在线

666React 教程

Facebok（React）Google（Angular）

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

上述事件的另外一种写法：<pre style="">class UserGist extends React.Component { constructor(props) { super(props); //在state设置两个属性，以便后续通过state对象来对其进行修改 this.state = {username: '', lastGistUrl: ''}; //绑定挂载事件 this.componentDidMount = this.componentDidMount.bind(this); } componentDidMount() { //接下来操作state时上下文对象发生改变，此处拿到操作句柄 var that = this; //ajax请求 this.serverRequest = $.ajax({ url: this.props.source, type:"GET", dataType: 'jsonp', success: function (result) { console.log(result.data); var lastGist = result.data[0]; //此处的上下文发生改变，this的指针指向发生了变化，通过上述定义的that来操作 that.setState({ username: lastGist.owner.login, lastGistUrl: lastGist.html_url }) } }) } //卸载React组件时，把多余请求关闭，以免影响其他框架或组件的操作 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'));</pre><a target="_blank" href="/try/try.php?filename=usergist">尝试一下 »</a>

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。

React 教程 在线

666React 教程

665React AJAX

664React AJAX

663React 组件 API

662React 组件 API

分类导航

Advertisement

微信关注

React 教程在线