javascript - 单一职责原则 React 重构

Question

了解单一职责原则后，我需要将逻辑与呈现分开。此代码接受输入并计算您可以负担的房屋抵押贷款利率。我正在努力思考如何以最佳方式重构以下代码并使我的代码易于阅读和重用。有任何想法吗？

 import React, { Component } from 'react';


class MonthlyPay extends Component {
  state = {
    cost: 0,
    houseCost: 0,
    downPayment: 0,
    termOfLoan: 0,
    annualInterestRate: 0
  }
   handleHouseCostChange = (e) => {
        this.setState({
            houseCost: e.target.value,
        });
   }

   handleDownPayment = (e) => {
        this.setState({
            downPayment: e.target.value,
        });
   }

   handleannualInterestRate = (e) => {
        this.setState({
           annualInterestRate : e.target.value,
        });
   }

   handleTermOfLoan = (e) => {
        this.setState({
            termOfLoan: e.target.value,
        });
   }
   handleCostChange = () => {
        const { houseCost, downPayment, termOfLoan, annualInterestRate } = this.state;
        const principal = houseCost - downPayment
        const lengthOfLoan = 12 * termOfLoan;
        const percentageRate = annualInterestRate / 1200
        console.log(lengthOfLoan);
        // Formula M = P[i(1+i)^n]/[(1+i)^n -1]
        const cost = (principal * percentageRate) / (1 - (Math.pow((1 + percentageRate) , lengthOfLoan * -1))).toString();
        this.setState({
            cost: cost.toFixed(2)
        })
    }
  render() {
    return (
        <div className="counter">
          <div>
            <span className="counter-score">House Cost</span>
            <input type="number" placeholder="House Cost" onChange={(e) => this.handleHouseCostChange(e)}></input>
         </div>  
         <div>
            <span className="counter-score">Down Payment</span>
            <input type="number" placeholder="Down Payment" onChange={(e) => this.handleDownPayment(e)}></input>
        </div> 
        <div>
            <span className="counter-score">Mortgage Period (years)</span>
            <input type="number" placeholder="Mortgage Period" onChange={(e) => this.handleTermOfLoan(e)}></input>
        </div>
         <div>
            <span className="counter-score">Interest Rate</span> 
            <input type="number" placeholder="Interest Rate" onChange={(e) => this.handleannualInterestRate(e)}></input>
        </div> 
                <button className="counter-action" onClick={this.handleCostChange}>Calculate</button>
                <span className="counter-score">{ this.state.cost }</span>
            </div>
            );
  }
}

export default MonthlyPay;

Answer 1

请不要在阅读第一句话后立即将此答案标记为无用 :) 可能有一些您可以使用的东西。

让我们看一下 React 文档。有一小部分描述了框架的哲学:

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both.

他们推荐this resource让您对这些设计决策感到更自在。

另一点是，如果您有获取数据的逻辑(比方说与后端通信)以及 UI 逻辑。为此，React 有一些建议。

有一种叫做展示组件和容器组件的东西。

基本上，

Presentational components - How things look (markup, styles)

和

Container components - How things work (data fetching, state updates)

我建议看一下 Dan Abramov's original article describing the concept of presentational and container components ，他有点像 React Jedi :)

在这里您可以找到 https://redux.js.org/basics/usagewithreact 的代码示例，我真的认为值得在这里花几分钟。

我认为仅仅获取代码并重构它不是一个好主意，我相信如果您想创建更好的 React 应用程序，这些资源对您来说会更有值(value)。

快乐黑客:)