从 Reddit/REST API 获取和呈现数据 [关闭]

Question

免责声明：我是一名试图学习更多 JavaScript 的设计师。对我放轻松。

我正在创建一个站点，该站点从 reddit api 获取和呈现帖子，并以 CSS 网格/报纸样式布局显示数据。类似于 The Verge。到目前为止，这是我的代码：

const url = "https://www.reddit.com/r/upliftingnews.json?raw_json=1&limit=10"

fetch(url)
    .then(res => res.json())
    .then(res => res.data.children)
    .then(res => res.map(post => ({
        author: post.data.author,
        link: post.data.url,
        img: (typeof (post.data.preview) !== 'undefined') ? post.data.preview.images[0].source.url : null,
        // img: post.data.thumbnail,
        title: post.data.title
    })))
    .then(res => res.map(render))
    .then(res => console.log(res))

// fetch(url)
//     .then(response => response.json())
//     .then(response => {
//         console.log(response.data.children[1].data.preview.images[0].resolutions[1].url);
//     });


const app = document.querySelector('#app');

const render = post => {
    //console.log(post.data);
    const node = document.createElement('div');
    node.innerHTML = `
    <h2>
      <a href="${post.link}">
        <img src="${post.img}" />
        ${post.title}
      </a>
    </h2>`;
    app.appendChild(node);
}

所以这很好用，但是我应该这样做吗？我的问题是：

1. 我对单个渲染帖子的标记没有任何控制权。我可以使用 CSS 和 nth-child 来单独设置帖子的样式，但这似乎效率低下。
2. 它的性能似乎不是很好。 html 在页面加载后 1 或 2 秒内呈现，导致空白屏幕闪烁。

谷歌搜索与 fetch api's/rendering json 相关的任何内容都会显示与 react/vue/angular/insertJSLibraryHere 相关的结果。

我真的应该使用这些框架之一吗？如果我刚刚学会了如何使用 React 会更容易/更有效吗？我一直在避免学习 React/Vue，因为我发现自己很难理解，但也许这是一个很好的起点？

当每个搜索结果都与某个 JS 框架相关时，很难找到答案。因此，我为什么在这里问。

Answer 1

React 中的基本获取示例。

最好将 api 调用的响应保存在 componentWillMount 生命周期方法的状态数组中。我也想使用axios 而不是 fetch。

这是一个例子：

import axios from 'axios';

class someComponent extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            redditItems: [];
        }
    }

    componentWillMount = () => {
        axios.get(API_URL).then(res => {
            this.setState({ redditItems: res.data.data.children });
        }).catch(err => {
            // CODE WHEN FAILS.
        });
    }

    renderList = () => {
        return this.state.reditItems.map((item, i) => (
            <div key={ i }>
                <p>{ item.data.url }</p>
                <p>{ item.data.author }</p>
            </div> // HOW YOU WANT TO DISPLAY YOUR ITEM
        ));
    }

    render = () => {
        return (
            <div>
                { this.renderList() }
            </div>
        )
    }
}

希望对你有帮助。