Javascript 如果我用这种方式编程，我会有更多的概述吗？

我开始学习Reactjs，我想知道最佳实践。我有以下几页： -家 -体重指数计算器 -等

我的问题是，我所有的逻辑，如“calculateBmi”，是否都应该在我的Bmi.js中？或者我应该把它们放在App.js文件中吗

这方面的最佳做法是什么？因为当我制作更多的小项目时，App.js文件将包含许多不同的函数

我认为最好的做法是将所有函数都放在Bmi.js中。但你的看法是什么？我刚开始学英语

App.js

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route}；
导入“/App.css”；
从“./components/layout/Header”导入标题；
从“./组件/主页”导入主页；
从“./components/Bmi Calculator/Bmi”导入Bmi；
从“./components/bmiCalculator/CalculateBmi”导入CalculateBmi；
类应用程序扩展组件{
calculateBmi=（长度、重量）=>{
常数长度表=长度/100；
常数bmi=重量/（长度米*长度米）；
控制台日志（bmi）；
}
render（）{
返回(
(
)} />
(
)} />
);
}
}
导出默认应用程序；

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;

import React，{Component}来自'React'；
导出类Bmi扩展组件{
状态={
长度：''，
权重：“”
}
onSubmit=（e）=>{
e、 预防默认值（）；
this.props.calculateBmi（this.state.length，this.state.weight）；
this.setState（{length:'}）；
}
onChange=（e）=>this.setState（{[e.target.name]：e.target.value}）；
render（）{
返回(
体重指数健康体重计算器
体重指数（BMI）=20.9

正常重量

长度（厘米）
重量（千克）
)
}
}
常数标题样式={
颜色：“白色”
}
常量结果样式={
边距：“0”，
填充：“0”
}
常量按钮样式={
背景颜色：“ff4081”，
颜色：“白色”，
边界：“无”，
宽度：“150px”，
高度：“36px”，
边界半径：“3px”，
光标：“指针”，
}
导出默认Bmi；

您的方法应该放在尽可能低的位置，即放在它们真正关心的组件中，即在本例中放在Bmi.js中

---

我也会考虑将域逻辑和演示文稿（与相应的域和UI存储区分开），这样您就可以得到一个可以重用Web和移动版本的架构。

< P>这已经很好了，但是除非其他组件不会共享<代码> CaltuaBMI < /Cuff>函数，您还可以将其移动到

BMI

组件中

假设您有另一个组件将使用从

calculateBMi

返回的值，那么可以将其保留在主

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>

    );
}

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route}；
导入“/App.css”；
从“./components/layout/Header”导入标题；
从“./组件/主页”导入主页；
从“./components/Bmi Calculator/Bmi”导入Bmi；
常量App=（）=>{
返回(
);
}

及

import React，{Component}来自'React'；
从“./components/bmiCalculator/CalculateBmi”导入CalculateBmi；
导出类Bmi扩展组件{
状态={
长度：''，
权重：“”
}
calculateBmi=（长度、重量）=>{
常数长度表=长度/100；
常数bmi=重量/（长度米*长度米）；
控制台日志（bmi）；
}
onSubmit=（e）=>{
e、 预防默认值（）；
this.calculateBmi（this.state.length，this.state.weight）；
this.setState（{length:'}）；
}
onChange=（e）=>this.setState（{[e.target.name]：e.target.value}）；
render（）{
返回(
体重指数健康体重计算器
体重指数（BMI）=20.9

正常重量

长度（厘米）
重量（千克）
)
}
}
常数标题样式={
颜色：“白色”
}
常量结果样式={
边距：“0”，
填充：“0”
}
常量按钮样式={
背景颜色：“ff4081”，
颜色：“白色”，
边界：“无”，
宽度：“150px”，
高度：“36px”，
边界半径：“3px”，
光标：“指针”，
}
导出默认Bmi；

通过这种方式，您将实现表示组件与有状态/数据驱动组件的分离。这将促进组件重用，并为您提供一个更具可伸缩性的体系结构，因此您可以使用

BMI

组件ev

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;