原理固体，亲吻，干燥和Yagni适用于React的开发
#javascript #网络开发人员 #solidjs #designpatterns

软件开发是一项复杂的活动，需要组织，维护和可扩展性。为了满足这些要求，多年来已经制定了许多原则和概念。

在本文中，我们将探讨在使用React开发应用程序时如何有效地应用固体，亲吻，干燥和Yagni原则。

PrincãpiosSolid：

可靠的原则是一组指南，旨在创造更可读，灵活和狂热的维护。让我们来处理他们中的每个及其对项目的应用：

（单一责任原则）：反应组件必须具有重大责任。这有助于维护和重复使用，因为每个组件的比例都很好。

示例： 

// Componente com uma única responsabilidade: renderizar um botão
function Botao({ texto, onClick }) {
  return <button onClick={onClick}>{texto}</button>;
}

o（打开/关闭的原理）： react组件必须开放以进行扩展，但要进行修改。

示例： 

// Componente aberto para extensão
function Botao({ onClick, cor, children , ...rest }) {
  return <button {...rest} onClick={onClick}>{children}</button>;
}

l（liskov替换原理）：应将儿童组成部分由父亲组成的组成部分代替，而不会影响系统的完整性。

示例： 

// Interfaces segregadas para diferentes tipos de botões
interface BotaoPadraoProps {
  texto: string;
  onClick: () => void;
}

interface BotaoDestaqueProps {
  texto: string;
  onClick: () => void;
  cor: string;
}

function BotaoPadrao({ texto, onClick }: BotaoPadraoProps) {
  return <button onClick={onClick}>{texto}</button>;
}

function BotaoDestaque({ texto, onClick, cor }: BotaoDestaqueProps) {
  return <button style={{ backgroundColor: cor }} onClick={onClick}>{texto}</button>;
}

i（接口隔离王子）：建议创建实现特定接口的反应组件，重点关注每个上下文的必要条件。

示例： 

// Interface para um botão comum
interface BotaoComumProps {
  texto: string;
  onClick: () => void;
}

// Interface para um botão destacado
interface BotaoDestacadoProps {
  texto: string;
  onClick: () => void;
  cor: string;
}

// Componente de Botão Comum
function BotaoComum({ texto, onClick }: BotaoComumProps) {
  return <button onClick={onClick}>{texto}</button>;
}

// Componente de Botão Destacado
function BotaoDestacado({ texto, onClick, cor }: BotaoDestacadoProps) {
  return <button style={{ backgroundColor: cor }} onClick={onClick}>{texto}</button>;
}

在此示例中，我们为每种类型的植物体使用隔离的接口，确保每个组件仅实现其特定上下文所需的内容。

d（依赖性反转原理）：反应组件应取决于抽象，而不是具体的实现。依赖的注射是达到这一原则的常见实际实用性。

// Interface do serviço de API
interface ApiService {
  buscarDados(): Promise<any>;
}

// Implementação concreta do serviço de API
class ApiServiceImpl implements ApiService {
  async buscarDados() {
    // Lógica para buscar dados da API
  }
}

// Componente que utiliza o serviço de API
function ComponenteQueUtilizaApi({ apiService }: { apiService: ApiService }) {
  const [dados, setDados] = useState<any>(null);

  useEffect(() => {
    apiService.buscarDados().then((response) => {
      setDados(response);
    });
  }, [apiService]);

  return <div>{dados ? /* Renderiza os dados */ : 'Carregando...'}</div>;
}

在此示例中，组件组件达到抽象（ apiservice ），而不是直接在API服务的混凝土实现上。这可以更大的灵活性，在必要时通过不同的实现来促进API服务的更换，而无需更改主组件。

PrincãpioKiss（保持简单，愚蠢）：

主要KISS强调了软件设计和开发的简单性和清晰度。应用于反应，这意味着：

责任分开：使单独业务的停机时间与演示文稿的介绍有关。将您的应用程序分为较小且可重复使用的组件。

避免不必要的复杂性：在真正必要之前不要引入复杂的功能。从简单的方法开始，并随着需求的发展而增加复杂性。

责任分开的示例： 

// Componente de lógica de negócios
function Calculadora({ numeros, operacao }) {
  const resultado = operacao === 'soma' ? numeros.reduce((a, b) => a + b, 0) : 0;
  return <div>Resultado: {resultado}</div>;
}

// Componente de apresentação
function App() {
  const numeros = [2, 3, 5];
  const operacao = 'soma';
  return (
    <div>
      <Calculadora numeros={numeros} operacao={operacao} />
    </div>
  );
}

避免不必要的复杂性的示例： 

// Inicialmente, uma abordagem simples para exibir um texto
function Mensagem() {
  return <div>Olá, mundo!</div>;
}

// À medida que os requisitos evoluem, adiciona-se a complexidade
function Mensagem() {
  const horaAtual = new Date().getHours();
  const saudacao = horaAtual < 12 ? 'Bom dia' : 'Boa tarde';
  return <div>{saudacao}, mundo!</div>;
}

princemãpiodry（不要重复自己）：

原理干燥当然促进了重复使用和消除重复。在反应的背景下：

组件：创建可重复使用的组件以避免代码重复。这有助于维护并提高整个应用程序的一致性。

共享羊毛：中心共享羊毛作为功利功能，以避免重复。

组件和共享羊毛的示例： 

// Componentes reutilizáveis para exibição de mensagens
function Mensagem({ texto }) {
  return <div>{texto}</div>;
}

function DestaqueMensagem({ texto }) {
  return <div style={{ backgroundColor: 'yellow' }}>{texto}</div>;
}

PrincãpioYagni（您不需要它）：

Yagni原则建议您不应实现仍然需要的功能。在开发中反应：

从必需品开始：不要预期复杂的未来需求。从viável妈妈开始，并在要求时添加功能。

避免过度工程：请勿添加对于当前应用功能并不重要的复杂功能。

从要点开始的示例： 

// Começa com um componente simples para exibir informações básicas
function PerfilUsuario({ nome }) {
  return <div>Olá, {nome}!</div>;
}

Evitar的典范过度工程： 

// Evita adicionar recursos complexos antes de serem necessários
function PerfilUsuario({ nome, mostrarDetalhes }) {
  return (
    <div>
      <div>Olá, {nome}!</div>
      {mostrarDetalhes && (
        <div>
          <p>Email: usuario@example.com</p>
          <p>Telefone: (123) 456-7890</p>
          {/* Outros detalhes */}
        </div>
      )}
    </div>
  );
}

总而言之，在反应开发中应用固体，亲吻，干和Yagni的原理会导致清洁，模块化，灵活和狂热。

这些原则鼓励创建结构井的组成部分，促进重新使用并防止引入不必要的复杂性。

在内部化这些打印机并始终如一地应用它们时，开发人员可以创建高质量的应用程序，以有效地满足当前和未来的需求。

参考：

https://www.freecodecamp.org/portuguese/news/os-principios-solid-da-programacao-orientada-a-objetos-explicados-em-bom-portugues/

https://acervolima.com/7-principios-de-programacao-comuns-que-todo-desenvolvedor-deve-seguir/