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

我会做两件事。首先将handleCostChange移至其他非反应文件。我通常有一个名为utils的文件夹，其中保存着复杂的方程式。然后，您可以像这样导入它：

import {calculateCostChange} from '../utils/CostCalculations.js'

或类似的东西。

第二个是您可能不需要所有这些简单的状态编写功能。相反，您可以使用一个具有键和值并以这种方式保存状态的函数：

handleStateChange = (key, value) => {
  let mystate =  this.state;
  mystate[key] = value
  this.setState(mystate);
}

这将在您可以调用的状态下更新或创建键值对：

onChange={(e) => this.handleStateChange('houseCost',e)

Answer 2

在阅读完第一句话之后，请不要将此答案标记为无用的：)可能有一些可以使用的东西。

让我们看一下React文档。有一小部分描述了该框架的原理：

React包含以下事实：渲染逻辑固有地耦合   与其他UI逻辑：事件如何处理，状态如何变化   随着时间的流逝，以及如何准备显示数据。

不是通过标记和人为地分离技术   逻辑在单独的文件中，React通过松散耦合将关注点分离   包含两者的称为“组件”的单元。

他们推荐this resource，使您对这些设计决策感到更满意。

另一点是，如果您具有用于与UI逻辑一起来获取数据（比如说与后端通信）的逻辑。为此，React提供了一些建议。

有些东西叫做#include <stdio.h> struct pix{ unsigned int r,g,b; }; #define TAM 10000 struct pix color[TAM][TAM]; void main(){ int i,j; for(i=0; i<TAM;i++) for(j=0;j<TAM;j++){ color[i][j].r= ( color[j][i].r+ color[j][i].g+ color[j][i].b ) / 3; } }和presentational components。

基本上，

Presentational组件-外观（标记，样式）

和

容器组件-工作方式（数据获取，状态更新）

我建议您看看Dan Abramov's original article describing the concept of presentational and container components，他有点像React Jedi：）

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

我认为仅仅获取代码并对其进行重构不是一个好主意，我相信，如果您想创建更好的React Apps，这些资源对您来说将更有价值。

快乐黑客：)

单一责任原则React重构

2 个答案: