Question

我对Reactjs还是一个陌生的人，我正为一件事而苦苦挣扎。我构建了一个小型的React应用，其中包括：

最顶部的App.js –唯一可控制所有状态的类组件
3个无状态组件（在App.js中呈现的no1，no2，no3（所有组件中都包含较小的组件，但这无关紧要）

App.js状态包括3个数组，所有3个数组均由所呈现的3个无状态组件使用。

然后，在App.js中，我有大约400行方法通过调用setState修改状态。那很长。。。

我的问题是：是否仍要拆分此文件？要将方法移至其各自的组件：否1、2和3。

对我来说似乎是不可能的，因为在一个类中拥有所有状态仅需要在同一类中调用setState（具有setState方法）。

这可能是一个愚蠢的问题，但是：

是否可以在拥有此状态（App.js）的父级之外修改状态，例如，在无状态组件1中对其进行修改，并且仍使父级保持有关该更改的最新信息，以便它可以通知无状态组件2并没有3的变化。

我的最佳做法是什么？

谢谢

Answer 1

我要做的代码/逻辑拆分是：

保持App.js尽可能简单
如果文件/组件中包含很多逻辑，我将文件拆分为index.js和Component.js，并将逻辑保留在index.js中，并将JSX / HTML保留在Component.js中

根据您的情况，您可以：

从App.js中删除所有逻辑
创建3个文件夹no1，no2和no3
在每个文件夹内创建两个文件-index.js和ComponentNo1.js等
在index.js中创建一个具有状态的Component，在ComponentNo1.js中创建一个返回JSX / HTML的无状态组件。

这就是我的建议。如果您发现这样做困难，请发布您的App.js逻辑，以便我可以帮助您。

Answer 2

确保类似这样的方法是完全有效的，并且是React的常见做法。

我已经编写了一个沙箱，以使您了解其工作原理： https://codesandbox.io/s/zxl2owp2np

但是为了详细说明，我们假设您具有以下组件：

class App extends React.Component {
  state = {
    value: 5
  };

  increaseValue = () => {
    this.setState({
      value: this.state.value + 1
    });
  };

  render() {
    return (
      <div className="App">
        <Example1 value={this.state.value} increaseValue={this.increaseValue} />
        <Example2 value={this.state.value} />
        <Example3 value={this.state.value} />
      </div>
    );
  }
}

const Example1 = (props) => {
  const value = props.value;
  return (
    <div>
      I am Example1. The value is {value}
      <button onClick={() => props.increaseValue()}>Click</button>
    </div>
  );
}

const Example2 = (props) => {
  const value = props.value;
  return (
    <div>
      I am Example2. The value is {value}
    </div>
  );
}

const Example3 = (props) => {
  const value = props.value;
  return (
    <div>
      I am Example3. The value is {value}
    </div>
  );
}

我们的主要App组件的状态值为5，我们将其传递给3个子组件。子组件都使用该值来显示数据。在App组件中，我们定义了一个状态更新功能，称为递增值，将其作为属性传递给Example1。现在Example1可以通过调用props.increaseValue()

来使用递增值

props.increaseValue（）绑定到我们的App组件的执行上下文。因此它将更新App组件状态下的值。现在，有了更新后的值，它便可以在我们所有示例组件中共享使用。

关于将方法移动到正在使用它们的组件的问题。这不是常见的做法。通常，您在组件中定义要更新状态的函数。意思是，如果您具有要更新App组件的功能，则应在app组件中对其进行定义。

React的类组件中的方法太多–问题重构

2 个答案: