Question

我开始学习Reactjs，我想了解最佳实践。我有以下页面： -家 -BMI计算器 -等等

我的问题是，我所有的逻辑，即“ calculateBmi”都应该存在于我的Bmi.js中吗？还是应该将它们放在App.js文件中？

最佳做法是什么？因为当我做更多的小项目时，App.js文件将包含许多不同的功能。

我认为最佳实践是将所有功能都放在Bmi.js中。但是您对此有何看法？我刚刚开始学习Reactjs。

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css';
import Header from './components/layout/Header';
import Homepage from './components/Homepage';

import Bmi from './components/bmiCalculator/Bmi';
import CalculateBmi from './components/bmiCalculator/CalculateBmi';


class App extends Component {

  calculateBmi = (length, weight) => {

    const lengthInMeters = length / 100;
    const bmi = weight / (lengthInMeters * lengthInMeters);

    console.log(bmi);
  }

  render() {
    return (
      <Router>
        <div className="App">
          <Header />
          <Route exact path="/" render={props => (
            <React.Fragment>
              <Homepage />
            </React.Fragment>
          )} />

          <Route path="/bmicalculator" render={props => (
            <React.Fragment>
              <Bmi calculateBmi={this.calculateBmi} />
            </React.Fragment>
          )} />
        </div>
      </Router>

    );
  }
}


export default App;

Bmi.js

import React, { Component } from 'react';

export class Bmi extends Component {

    state = {
        length: '',
        weight: ''
    }

    onSubmit = (e) => {
        e.preventDefault();
        this.props.calculateBmi(this.state.length, this.state.weight);
        this.setState({ length: '' });

    }

    onChange = (e) => this.setState({ [e.target.name]: e.target.value });

    render() {
        return (
            <div className="bmiborder">
                <h1 style={titleStyle}>BMI Healthy Weight Calculator</h1>
                <div style={resultStyle} className="bmiResultContainer">
                    <p>Body Mass Index(BMI) = 20.9</p>
                    <p>Normal weight</p>
                </div>
                <form onSubmit={this.onSubmit}>
                    <div className="background">
                        <div className="inputGroup">
                            Length (cm)<input type="number" name="length" placeholder="180" value={this.state.length} onChange={this.onChange}></input>
                        </div>
                    </div>
                    <div className="background">
                        <div className="inputGroup">
                            Weight (kg)<input type="number" name="weight" placeholder="75" value={this.state.weight} onChange={this.onChange}  ></input>
                        </div>
                    </div>
                    <div className="background">
                        <div className="inputGroup">
                            <input type="submit" value="Calculate" style={buttonStyle}></input>
                        </div>
                    </div>
                </form>
            </div >

        )
    }

}



const titleStyle = {
    color: "White"
}

const resultStyle = {
    margin: "0",
    padding: "0"
}

const buttonStyle = {
    backgroundColor: "#ff4081",
    color: "white",
    border: "none",
    width: "150px",
    height: "36px",
    borderRadius: "3px",
    cursor: "pointer",
}

export default Bmi;

Answer 1

您的方法应放置在尽可能低的位置，即在它们真正涉及的组件中，即在这种情况下，在Bmi.js中

我还考虑将域逻辑和表示形式（以及相应的域和ui存储）分开，这样您将最终获得一种可用于Web和移动版本的体系结构。

Answer 2

这已经可以了，但是除非没有其他组件可以共享calculateBmi函数，否则您也可以将其移至BMI组件中。

假设您有另一个组件将使用从calculateBMi返回的值，那么可以将其保留在主要的App组件中。否则，关注点分离的模式始终是最佳实践。

因此，您的App组件将没有状态，并且可以重构为简单的无状态函数。

所以现在您将得到以下内容：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css';
import Header from './components/layout/Header';
import Homepage from './components/Homepage';

import Bmi from './components/bmiCalculator/Bmi';


const App = () => {  
    return (
      <Router>
        <div className="App">
          <Header />
          <Route exact path="/" component={Homepage} />

          <Route path="/bmicalculator" component={Bmi} />
        </div>
      </Router>

    );
}

AND

import React, { Component } from 'react';
import CalculateBmi from './components/bmiCalculator/CalculateBmi';

export class Bmi extends Component {

    state = {
        length: '',
        weight: ''
    }
    calculateBmi = (length, weight) => {

       const lengthInMeters = length / 100;
       const bmi = weight / (lengthInMeters * lengthInMeters);

       console.log(bmi);
    }

    onSubmit = (e) => {
        e.preventDefault();
        this.calculateBmi(this.state.length, this.state.weight);
        this.setState({ length: '' });

    }

    onChange = (e) => this.setState({ [e.target.name]: e.target.value });

    render() {
        return (
            <div className="bmiborder">
                <h1 style={titleStyle}>BMI Healthy Weight Calculator</h1>
                <div style={resultStyle} className="bmiResultContainer">
                    <p>Body Mass Index(BMI) = 20.9</p>
                    <p>Normal weight</p>
                </div>
                <form onSubmit={this.onSubmit}>
                    <div className="background">
                        <div className="inputGroup">
                            Length (cm)<input type="number" name="length" placeholder="180" value={this.state.length} onChange={this.onChange}></input>
                        </div>
                    </div>
                    <div className="background">
                        <div className="inputGroup">
                            Weight (kg)<input type="number" name="weight" placeholder="75" value={this.state.weight} onChange={this.onChange}  ></input>
                        </div>
                    </div>
                    <div className="background">
                        <div className="inputGroup">
                            <input type="submit" value="Calculate" style={buttonStyle}></input>
                        </div>
                    </div>
                </form>
            </div >

        )
    }

}



const titleStyle = {
    color: "White"
}

const resultStyle = {
    margin: "0",
    padding: "0"
}

const buttonStyle = {
    backgroundColor: "#ff4081",
    color: "white",
    border: "none",
    width: "150px",
    height: "36px",
    borderRadius: "3px",
    cursor: "pointer",
}

export default Bmi;

这样，您将可以将表示性组件与有状态/数据驱动组件分离。这应该有助于组件的重用，并为您提供更具扩展性的体系结构，因此您可以在应用程序中的任何地方使用BMI组件，如果需要对BMI进行更改，则可以在BMI组件中的一位。无需始终在应用程序组件中传递calculateBMI道具

如果以这种方式编程，是否有更多概述？

2 个答案: