React开发的设计模式及原则

简介: 设计模式是最常见的,通用问题的可复用解决方案的归纳总结,通常被认为是解决该类问题的最佳实践,使用设计模式能帮助我们写出更容易维护,更健壮的代码。设计模式有很多,通常它们都会遵循一些共同的设计原则,接下来我们一起回顾下React社区里出现过的一些设计模式,以及它们所遵循的设计原则。

介绍

设计模式是对常见的,通用问题的可复用解决方案的归纳总结,通常被认为是解决该类问题的最佳实践,使用设计模式能帮助我们写出更容易维护,更健壮的代码。设计模式有很多,通常它们都会遵循一些共同的设计原则,接下来我们一起回顾下React社区里出现过的一些设计模式,以及它们所遵循的设计原则。

一些设计原则

  1. 单一职责原则(Single-responsibility responsibility) : 每个实体(class, function, module)只应该有一个职责。例如当一个组件接收了太多的props,我们应该考虑组件是不是做了太多的事情,有没有必要进行拆分。
  2. 开闭原则(Open-closed principle):实体(class, function, module) 应该对扩展开放,但是对修改关闭。开闭原则意味着应该存在不直接修改的方式扩展实体的功能。
  3. 依赖反转原则(Dependency inversion principle):依赖于抽象,而不是具体的实现。依赖注入是一种实现依赖反转的方式。
  4. 不要自我重复 (Don't repeat yourself):重复代码会造成代码维护的困难。
  5. Composition over inheritance: 通过组合集成的两个组件是松耦合关系,通过props来约束。但是有继承关系的两个组件是强耦合关系,对父组件的修改可能会导致子组件的未预期的结果。

React设计模式

Container & presentational component

把业务组件划分成container组件和presentational组件。 Presentational component中负责组件的ui渲染,Container component负责数据的获取和事件的响应。

遵循的设计原则:
  1. 单一职责原则: Presentational component负责ui,Container component负责数据和行为。
  2. Don't repeat yourself: Presentational component是纯ui组件,不包含业务逻辑,通常可以被复用。
示例
importReactfrom"react";
// Presentational componentexportdefaultfunctionImageList({ images, onClick }) {
returnimages.map((img, i) =><imgsrc={img} key={i} onClick={onClick} />);
}
// Container componentexportdefaultclassImageListContainerextendsReact.Component {
constructor() {
super();
this.state= {
images: []
    };
  }
componentDidMount() {
fetch("https://images.com")
      .then(res=>res.json())
      .then(({ images }) =>this.setState({ images }));
  }
handleClick() {
// ...  }
render() {
return<ImageListimages={this.state.images} onClick={handleClick} />;
  }
}

HOC

Higher-order component 是一个以组件为参数,返回一个新组件的函数,用于复用组件的逻辑,Redux的 connect 和 Relay的createFragmentContainer都有使用HOC模式。

遵循的设计原则:
  1. Don't repeat yourself:把可复用的逻辑放到HOC中,实现代码复用。
  2. Composition over inheritance: hoc中传入的组件和返回的组件是组合的关系, 也可以把多个HOC进行多次的嵌套组合。
示例
importReactfrom"react";
exportdefaultfunctionwithLoader(Component, url) {
returnclassHOCextendsReact.Component {
constructor(props) {
super(props);
this.state= {
loading: true,
data: {},
      };
    }
componentDidMount() {
fetch(url)
        .then((res) =>res.json())
        .then(({ data }) =>this.setState({ data }))
        .finally(() =>this.setState({loading: false}))
    }
render() {
if (this.state.loading) {
return<div>Loading...</div>;
      }
return<Component {...this.props} data={this.state.data} />;
    }
  };
}

Render prop

Render prop是指组件的使用者通过组件暴露的函数属性来参与定制渲染相关的逻辑。使用Render prop模式的库包括: React Router, Downshift and Formik.

遵循的设计原则:
  1. Don't repeat yourself:把可复用的逻辑放到组件中,实现代码复用。
  2. 依赖反转原则:通过render prop注入渲染相关的实现。
  3. 开闭原则(Open-closed principle): 通过render prop暴露扩展点,而不是直接定制组件。
示例
importReactfrom"react";
classLoaderextendsReact.Component {
constructor(props) {
super(props);
this.state= {
loading: true,
data: {},
    };
  }
componentDidMount() {
fetch(url)
      .then((res) =>res.json())
      .then(({ data }) =>this.setState({ data }))
      .finally(() =>this.setState({ loading: false }));
  }
render() {
if (this.state.loading) {
return<div>Loading...</div>;
    }
returnthis.props.renderData(this.state.data);
  }
}

Compound components

Compound components是指通过多个组件的组合来完成特定任务,这些组件通过共享的状态、逻辑进行关联。典型的例子是Select和Select.Option组件。使用Compound components模式的库包括:semantic ui;

遵循的设计原则:
  1. 单一职责原则(Single-responsibility responsibility): 拆分成多个组件,每个组件承担自己的职责。
  2. 开闭原则(Open-closed principle): 需要迭代增强功能时,可以通过创建新的子组件的方式进行扩展。
示例
importReactfrom"react";
constSelectContext=React.createContext({});
exportfunctionSelect({ value, onChange, children }) {
const [open, setOpen] =React.useState(false);
const [val, setValue] =React.useState(value);
return (
<divclassName={`select`}><divclassName="select-value"onClick={() => {
setOpen(true);
        }}
>        {val}
</div><SelectContext.Providervalue={{
value: val,
setOpen,
setValue: (newValue) => {
setValue(newValue);
if (value!==newValue) {
onChange(newValue);
            }
          },
        }}
>        {open&&children}
</SelectContext.Provider></div>  );
}
functionOption({ children, value }) {
const {
setOpen,
setValue,
value: selectedValue,
  } =React.useContext(SelectContext);
return (
<divclassName={`select-option ${value===selectedValue?"selected" : ""}`}
onClick={() => {
setValue(value);
setOpen(false);
      }}
>      {children}
</div>  );
}
functionOptionGroup({ children, label }) {
return (
<divclassName="select-option-group"><divclassName="select-option-group-label">{label}</div>      {children}
</div>  );
}
Select.Option=Option;
Select.OptionGroup=OptionGroup;
functionDemo() {
const [city, setCity] =React.useState("北京市");
return (
<Selectvalue={city} onChange={setCity}><Select.Optionvalue="北京市">北京市</Select.Option><Select.OptionGrouplabel="河北省"><Select.Optionvalue="石家庄市">石家庄市</Select.Option><Select.Optionvalue="保定市">保定市</Select.Option></Select.OptionGroup></Select>  );
}

Custom hooks

自定义hooks可以做到把与state和生命周期关联的可复用逻辑封装到独立的函数中, 上面的提及的一些模式都是基于组件的方案,自定义hooks是更细粒度的解决方案。

遵循的设计原则:
  1. Don't repeat yourself:把可复用的逻辑放到自定义hooks中,实现代码复用。
  2. 单一职责原则:每个自定义hooks是都是一个独立的逻辑单元。
示例:
import { useState, useEffect } from"react";
functionuseLoader(url) {
const [data, setData] =useState({});
const [loading, setLoading] =useState(false);
useEffect(() => {
setLoading(true);
fetch(url)
      .then((res) =>res.json())
      .then(({ data }) => {
setData({ data });
      })
      .finally(() =>setLoading(false));
  }, [url]);
return { data, loading };
}

结尾

上面提及的曾经在社区流行的设计模式,往往遵守了一些设计原则,从而能帮助开发者写出健壮,易维护的代码。但是我们需要能根据实际的场景做出判断,是否需要引入这些模式,毕竟还有一个设计原则是YAGNI (You aren't gonna need it)。

目录
相关文章
|
4天前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
1月前
|
存储 移动开发 前端开发
【第35期】一文学会React-Router开发权限
【第35期】一文学会React-Router开发权限
32 0
|
2月前
|
前端开发 数据库 Docker
一款可以直接使用的招聘网站, react django开发招聘网站,docker 部署
一款可以直接使用的招聘网站, react django开发招聘网站,docker 部署
36 0
|
4月前
|
监控 前端开发 JavaScript
前端代码技巧react篇,代码技巧大揭秘,让你轻松成为开发高手!
前端代码技巧react篇,代码技巧大揭秘,让你轻松成为开发高手!
|
2天前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
5月前
|
前端开发 JavaScript 算法
React | React组件化开发(三)
React | React组件化开发(三)
|
1月前
|
前端开发 JavaScript
你可能需要的React开发小技巧!(下)
你可能需要的React开发小技巧!(下)
|
1月前
|
前端开发 API
你可能需要的React开发小技巧!(上)
你可能需要的React开发小技巧!(上)
|
1月前
|
设计模式 前端开发 JavaScript
如何在React中应用SOLID原则?
如何在React中应用SOLID原则?
|
2月前
|
前端开发 JavaScript
React vscode 开发插件与代码补全提示
React vscode 开发插件与代码补全提示
39 0

相关产品

  • 云迁移中心