Question

我已经使用FreeCodeCamp项目制作了this far，并且在一些已经走过react.js道路的人们的帮助下获得了一些帮助。然而，在我继续之前，有人可以向我解释一下“this.handleData”在下面的代码中完成了什么吗？（这是我允许使用的其他人的代码，它帮助我获取我从api抓取的数据以在页面上呈现，但handleData究竟在做什么？）

var LeaderList = React.createClass({  
    render:function(){
    return(
      <div >
    <h1>Here is the data...</h1>
    <AllData />
    </div>
    );
  }
});

var AllData = React.createClass({

    dataUrl: 'https://fcctop100.herokuapp.com/api/fccusers/top/recent',
    getInitialState: function() { 
        return {data: []}
    },
    componentDidMount: function(){
        $.getJSON(this.dataUrl, this.handleData)
    },
    handleData: function(data){
        this.setState({data: data});
    },

    render: function(){
        var elems = [];
        for(var i=0; i<this.state.data.length; i++){
          var subelems = [];
          subelems.push(<div><p>{this.state.data[i].img}</p></div>);
          subelems.push(<div><p>{this.state.data[i].username}</p></div>);
          subelems.push(<div><p>{this.state.data[i].recent}</p></div>);
          subelems.push(<div><p>{this.state.data[i].alltime}</p></div>);
          elems.push(subelems);
        }
        return (<div>{elems}</div>);
    }

});

ReactDOM.render(
  <LeaderList />,
  document.getElementById('content')
);

Answer 1

在该代码中handleData是一个调用setState的自定义方法。 setState是React Component API的一部分。它使Component重新呈现，使用传递给它的数据来设置组件可用的this.state属性。可以使用this.state方法访问render，因此传递给data的{{1}}可用于handleData方法。

正如您在render方法中所看到的，访问render来控制创建DOM的位置。

Answer 2

首先，cython调用您的组件的componentDidMount()，并获取一些数据。 dataUrl获取该数据并使用它来设置组件的状态或内部数据存储。

然后在组件的handleData函数中使用它，只要状态发生变化就会调用它。

Answer 3

我认为从这里开始的地方是componentDidMount功能。如果您查看React组件生命周期，您会看到在将组件放入DOM时，在初始渲染后调用此函数：https://facebook.github.io/react/docs/component-specs.html

文档建议：

如果要与其他JavaScript框架集成，请设置计时器使用setTimeout或setInterval，或发送AJAX请求，执行这些这种方法的操作。

看起来我们正在这里进行Ajax调用（通过我假设是JQuery）从服务器获取一些数据。我们传入handleData作为回调，一旦Ajax请求完成，将调用结果，这样做：

this.setState({data: data});

要了解React中的state是什么，这里有几个很好的链接：

https://facebook.github.io/react/docs/thinking-in-react.html https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html

状态仅保留用于交互性，即随时间变化的数据

这适用于我们，因为Ajax请求的结果将改变这些数据 - 从无到有，只有一次，但它仍然会改变。当你致电setState时，React会触发＆＃34;状态转换＆＃34;它最终会再次调用render，它将使用您的数据填充elems变量并将其显示在屏幕上。

handleData在reactjs脚本中究竟做了什么？

3 个答案: