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是异步的，所以在文章设置为state之前创建articleList状态项。用户界面永远不会得到更新

修改

说实话，你不应该使用辅助状态变量来保存要渲染的文章数组。动态创建它们。

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>
        );
    }
}

html元素内的内容会延迟渲染 - ReactJS

1 个答案:

修改