html元素内的内容延迟呈现 - ReactJS

Question

我正在通过创建我的博客的 ReactJS 版本来学习 ReactJS。当我测试谷歌页面速度时，我注意到“优先考虑可见内容”，很好，在加载文章时，我添加了一个占位符文章，其中包含加载消息的标题和 lorem ipsum 描述以及示例默认标题图像。我再次运行页面速度，仍然是相同的问题，但有一点不同。占位符文章被渲染，但标题、图像和描述没有被渲染。这是一个静态文本，无法想象它为什么不显示。我试图模拟低互联网连接并重新加载页面，是的，组件内的文本呈现有一些延迟，即使它只是静态文本。

代码可在此处获得：https://github.com/erikkubica/reactjs-simple-blog-test 请参阅 src/modules/article/ArticleListItemPlaceholder.js 和 ArticleList.js

我还注意到此时徽标也丢失了。无法想象为什么，如果在非反应网站上它不是。样式也被加载，导航组件被渲染......

查看实际操作http://reactjs.netlime.eu/

问题截图：

谢谢你，我很乐意得到任何解释、良好做法……以了解更多信息。

更新： 问题已解决。

问题是，当没有加载自定义字体时，浏览器使文本不可见。我已将 fontFamily: "Arial" 添加到元素的内联样式中，从而解决了该问题。感谢李斯特先生。

也非常感谢 John Ruddell 提供了一些最佳实践。

Answer 1

您的问题是您正在设置状态异步但尝试以半同步方式呈现事物。

async fetchData() {

    //const response = await fetch("/static/articles.json");

    let data = null; //await AsyncStorage.getItem('@MySuperStore:articles_storage_' + this.state.category);

    if (data === null) {
        const response = await fetch("https://www.netlime.eu/wp-json/get-posts/v2/all/");
        data = await response.json();
        await AsyncStorage.setItem('@MySuperStore:articles_storage_' + this.state.category, JSON.stringify(data));
    }

    try {
        data = JSON.parse(data);
    } catch (e) {

    }
// your issue is here
______________________________________________
    this.setState({articles: data});

    this.createArticleList();
______________________________________________

// change to this.
    this.setState({articles: data}, () => {
        this.createArticleList();
    });
}

因为 setState 是异步的，所以您在文章设置为状态之前创建 articleList 状态项。所以 UI 永远不会更新

编辑

说实话，您不应该使用辅助状态变量来保存要呈现的文章数组。即时创建它们。

export default class ArticleList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            articles: [],
            category: this.props.category ? this.props.category : 0
        };
    }

    async fetchData() {
        let data = null; //await AsyncStorage.getItem('@MySuperStore:articles_storage_' + this.state.category);
        if (data === null) {
            const response = await fetch("https://www.netlime.eu/wp-json/get-posts/v2/all/");
            data = await response.json();
            await AsyncStorage.setItem('@MySuperStore:articles_storage_' + this.state.category, JSON.stringify(data));
        }

        try {
            data = JSON.parse(data);
        } catch (e) {

        }

        this.setState({articles: data});
    }
    componentDidMount() {
        this.fetchData();
    }
    render() {
        const articles = this.state.articles.map((article) => {
            return (
                <ArticleListItem
                    key={article.ID}
                    article={article}
                />
            );
        });

        return (
            <div>
                { articles.length ? articles : <ArticleListItemPlaceholder/>}
            </div>
        );
    }
}