如何获取数据

要实现这个点

  1. 使用react的生命周期方法在类组件中获得数据
  2. 使用useEffect hook在函数组件中获取数据

取到数据后，将数据放入state，然后就可以使用render调用它了。

http库

这个库我选择使用Axios，你也可以选择fetch。

创建项目

  1. 使用sandbox
  2. 清空index.js
  3. 手敲以下代码
    1. import React from "react";
    2. import ReactDOM from "react-dom";
    3. function Reddit() {
    4. const [posts, setPosts] = React.useState([]);
    5. return (
    6.  <div>
    7.    <h1>/r/reactjs</h1>
    8.  </div>
    9. );
    10. }
    11. ReactDOM.render(<Reddit />, document.getElementById("root"));

创建了一个Reddit的组件来显示来自 /r/reactjs的帖子
用了一个名为useState的hook来创建一个块来存放Reddit的posts的数组，用了一个空数组来初始化状态，这个空数组很快就会被实时数据所取代。
接下来，添加一些代码

  1. function Reddit() {
  2.   const [posts, setPosts] = React.useState([]);
  3.   return (
  4.     <div>
  5.       <h1>/r/reactjs</h1>
  6.       <ul>
  7.         {posts.map(post => (
  8.           <li key={post.id}>{post.title}</li>
  9.         ))}
  10.       </ul>
  11.     </div>
  12.   );
  13. }

讲讲添加的代码做了什么:
在<ul>中,JS表达式被装在{}中,因为这是JSX中的规范.
‘ posts‘是上面初始化的posts的空数组，而’ map‘函数对posts进行循环，并为数组中的每一项返回一个<li>. (map:js 里的函数)
这是一种在React中呈现列表的方法.

获得数据

import axios from 'axios';
添加上面的代码到index.js的顶部来引入Axios.
然后在Reddit中return之前,调用useState之后插入代码

  1. React.useEffect(() => {
  2.   axios.get(`https://www.reddit.com/r/reactjs.json`)
  3.     .then(res => {
  4.       const newPosts = res.data.data.children.map(obj => obj.data);
  5.       setPosts(newPosts);
  6.     });
  7. }, []);

我们在这使用了useEffect hook:它的工作方式是，你传递一个函数，然后useEffect“排队”在该函数之后—即在render完成后运行。
这个效果会调用axios.get从Reddit的API中获取数据，它返回一个promise，然后.then处理程序将在获取完成后被调用。
(Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。)
Reddit的API返回的帖子是一个嵌套非常深的结构，res.data.data.children.map…是从嵌套的混乱中挑选出个别的帖子。
最后，它通过调用setPosts来更新posts状态。
值得注意到的另一件事是:我们将一个空数组[]作为useEffect的第二个参数传递给它. 这列表负责储存达到想要的效果需要依靠的变量.
该效果只会在数组发生变化时重新run，而且由于数组为空，该效果只会在组件第一次呈现后run一次。(run直接翻译为运行感觉怪怪的, 感觉能意会 但不能言传)
如果我们不传递数组，那么效果将在每个render上run.
我做的最终效果
大佬的样例(我也不知道为什么和他说的有些不同,可能是我没理解好吧,不过页面显示一样,也学到了一些从服务器获取数据的方法,就酱

原文来自该大佬 的免费开源五节课课程的第四天 这里你可以当是翻译,也算是分享,也算是记录自己. You can go to the original station for support