Question

我是React的新手，因此很抱歉提出一个愚蠢或基本的问题。

将默认状态存储在外部文件中是明智且可行的解决方案吗？

所以，如果我有一个这样的应用程序容器：-

import React, { Component } from 'react';
import Spy from '../spies/weather/Spy';
import Local from '../local/Local';
import './app.css';
import { state } from './state'

class App extends Component {

  constructor() {
        super()
        this.state = state
  }

  onLocationChange = event => {
    this.setState({ location: event.target.value })
    }       
  setWeather() {
    //this.setState( { weather: { weather }});
    console.log(`this is ${this}`);
  }



  render() {
    return (
      <React.Fragment>
        <Local locationChange={this.onLocationChange}/>
        <Spy location={this.state.location} setWeather={this.setWeather}/>
      </React.Fragment>
    );
  }
}

export default App;

以及这样的state.js文件：-

export const state = {
    location: '',
    weather: {}
};

它显然运行良好，我的子组件“ Local”具有一个OnChange事件，该事件更新了状态的location属性，该状态在React Dev工具中清晰可见。到目前为止，我所看到的所有内容都在父容器中处于状态，或者使用过Redux，如果我能绕过React，我可能会这样做。

我只是对如何管理可伸缩性的一些建议提出了建议，这种可伸缩性可能会成为功能强大的App容器，尤其是带有一些默默无闻的默认值的大型状态对象。

您建议如何允许App合理地增长-您是否会以这种方式对状态进行划分，甚至可能将其进一步分解？它会减慢速度或造成问题吗？

谢谢！

菲尔

Answer 1

在项目结构方面，React非常灵活。我过去曾经看到过这样的解决方案。如果那对您有效，那么我认为将其保存在单独的文件中并不是一个“坏习惯”

在这里看看：

https://en.reactjs.org/docs/faq-structure.html

请记住，Redux可以帮助您组织状态，但是它不适合小型项目。当您发现自己处于以下状态时：您拥有过多的本地组件状态，并且将过多的数据作为道具传递给子组件，这对于您开始考虑像Redux这样的状态管理器应该是一个黄色警报：）

另一种常见方法是拥有一个“包装器组件”，该组件负责保持并传递在多个组件之间共享的状态。仅与一个特定组件相关的简单状态块可以作为组件级别状态存储在该组件内部。

我希望以某种方式回答您的问题。

React-是否可以将状态存储在单独的文件中？

1 个答案: