Где я должен хранить данные, которые не должны вызывать Rerender React - PullRequest
Новая
       1

Где я должен хранить данные, которые не должны вызывать Rerender React

0 голосов
/ 02 ноября 2019

Я занимаюсь разработкой приложения React.js. Я почти понимаю, какой мир данных должен храниться в состоянии компонента, но как мне справиться с некоторыми из них:

1) Например, в целях отладки мне нужно знать, сколько раз был вызван какой-либо метод, поэтому ясделал бы это следующим образом 

class SomeComponent extends React.Component{
    constructor(props){
        super(props);
        this.state={...};
        let counter = 0;
    }

    someFunc = () => {this.counter++; ......}
}

2) Или мне нужно получить некоторые данные из localstorage, которые не имеют ничего общего с рендерингом 

class SomeComponent extends React.Component{
    constructor(props){
        super(props);
        this.state={...};
                this.headers = localStorage.getItem("Authorization") ? {headers: {"Authorization": localStorage.getItem("Authorization")}} : null;

    }

    componentDidMount(){axios.post("http:/blabla.com", payload, this.headers).then(...)}
}

Это хорошая практика для обработки данных этопуть. Я могу сказать, что таким образом SomeComponent теряет свою масштабируемость, например, если я хочу разделить его на подкомпоненты или переписать в компонент функции. Является ли это хорошей практикой хранения данных в виде полей класса компонента?

3) Что если я захочу сохранить некоторые статические данные, относящиеся только к этому компоненту (скажем, бэкэнд еще не готов, и я использую какой-то жестко заданный фиктивный массивпоказать что-то на экране). Должен ли я инициировать его вне компонента в том же файле, например 

const dummyArray=[{...},{...},{...}]

class SomeComponent extends React.Component{
    constructor(props){
        super(props);
        this.state={...};
    }
    render(){
        let arrayToRender = this.state.arrayToRender ? this.state.arrayToRender : dummyArray
        return(
            arrayToRender.map(item=><div>....</div>)
        )
    }

        someFunc = () => {this.counter++; ......}
    }

, или в качестве альтернативы написать метод, который обеспечивает эти фиктивные данные 


class SomeComponent extends React.Component{
    constructor(props){
        super(props);
        this.state={...};
    }

    getDummyArray = () => [{...},{...},{...}];

    render(){
        let arrayToRender = this.state.arrayToRender ? this.state.arrayToRender : this.getDummyArray();
        return(
            arrayToRender.map(item=><div>....</div>)
        )
    }

        someFunc = () => {this.counter++; ......}
    }

Могут ли быть проблемы с babel при использовании file-stored (могут быть импортированы) данные за method-generated?

Любой совет или лучшая практика приветствуются.

1 Ответ

0 голосов
/ 02 ноября 2019

1) Если вы хотите легко узнать, сколько раз вы выполняете функцию, вы можете использовать console.count .

2) Нет ничего плохого в том, чтобы хранить данные внеЯ бы сказал, что еще лучше: оставьте в состоянии только те данные, которые вам нужны для повторного рендеринга.

Что касается вашего примера, то я бы переместил вызов axios в отдельный модуль иимпортируйте его туда, где вам это нужно. Получение Авторизации может быть выполнено при настройке axios или в перехватчике запросов axios , зависит от того, что вам нужно сделать.

3) Это действительно зависит от вас и архитектуры проекта,Лично я предпочитаю хранить статические данные в файлах JSON, которые я могу импортировать, где мне нужно.

Я бы посоветовал, если у вас еще нет бэкэнда для чего-то, что вам нужно собрать, чтобы просто высмеивать его (еслиэто API, например, вы можете использовать такие вещи, как JSON Server ) и построить все, как будто это уже сделано, поэтому, как только он будет готов, вам просто нужно изменить небольшой кусок.

Там должно бытьне будет никаких проблем с Babel.

...