我应该在哪里存储数据，这不会引起React的重新渲染

Question

我正在开发React.js应用。我几乎了解应该在组件状态下存储哪些数据安全性，但是我该如何处理其中的一些问题：

1）例如，出于调试目的，我需要知道某个方法被调用了多少次，因此我将按照以下方式进行操作

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

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

2）或者我需要从本地存储中获取一些与渲染无关的数据

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++; ......}
    }

file-stored上使用method-generated（可以导入）数据时，babel可能有任何问题吗？

任何建议或最佳做法将不胜感激。

Answer 1

1）如果您想轻松地知道执行一个函数的次数，可以使用console.count。

2）将数据保留在状态之外没有任何问题，我想说这更好，只保留重新呈现所需的数据在状态中。

关于您的示例，我要做的是将axios调用移至一个单独的模块，并将其导入您需要的位置。在配置axios时或在axios request interceptor中，可以完成授权的检索，具体取决于您需要执行的操作。

3）这实际上取决于您和项目体系结构，我个人更喜欢将静态数据保存在JSON文件中，可以将其导入到需要的位置。

我建议您是否还没有后端，您需要构建一些东西来模拟它（例如，如果是api，则可以使用json server之类的东西）并像构建已经存在的那样构建所有内容这样做后，一旦准备好，您只需要更改一小部分即可。

通天塔根本没有问题。