повторный рендеринг запущен в componentDidMount

Question

Если в жизненном цикле компонента повторный рендеринг инициируется какой-либо синхронной операцией в componentDidMount (), будет ли у пользователя возможность увидеть первый контент рендеринга в браузере?Например, если я переключаю начальный загрузочный логический флаг в componentDidMount () через redux, который затем вызывает повторную визуализацию, потому что флаг сопоставлен для redux для компонента.

------- Update Info-----

Операция синхронизации просто меняет флаг начала загрузки на true, и флаг сопоставляется с компонентом, где флаг проверяется для определения содержимого JSX в render ().В redux, сразу после того, как флаг установлен в true, начинается операция загрузки.Когда загрузка завершена, redux устанавливает флаг в false.Рассмотрим следующую последовательность жизненных циклов:

render() //JSX A  
componentDidMount() // the flag is set  
render() // re-render JSX B  

Будет ли JSX A отображаться в браузере, независимо от того, насколько он быстр?
создатель действия вызвал componentDidMount ():

export const downloadArticleList = () => {
        return (dispatch, getState) => {
        // set start flag to true synchronously, before axios.get
            dispatch(listDownloadStart());  
            axios.get('/articles')
                .then(response => {
                //set the flag to false and update the data
                    dispatch(saveArticleList(response.data))
                })
                .catch(err => {
                    dispatch(serverFail(err))
                    console.log("[downloadArticleList]] axios", err);
                })
        }
    }

Это СПА, без ССР.

Answer 1

Как мы обсудим в комментарии, вот пример:

interface ExampleComponentProps {

}
interface ExampleComponentState {
    loading: boolean;
}

export class ExampleComponent extends React.Component<ExampleComponentProps, ExampleComponentState>{
    constructor(props, context) {
        super(props, context);

        this.state = { loading: true };
    }

    componentDidMount() {
        //some method {}

        //after get result 
        this.setState({
            loading: false
        })
    }

    render() {
        return (
            <div>
                <Spin spinning={this.state.loading} >
                    //Your COmponent here
                </Spin>
            </div>
        )
    }
}

Answer 2

Если ваш проект сложный, самый простой способ - использовать

setTimeout(() => {
    this.setState({
          // your new flag here
    })
}, 0);

Answer 3

Это зависит от нескольких вещей:

• Сколько времени занимает операция синхронизации
• Делаете ли вы SSR (таким образом, для регидратации DOM будет выделено время)

Как правило, я бы считал это антипаттерном