资讯专栏INFORMATION COLUMN

React的组件模式

Muninn / 2661人阅读

摘要:有状态组件通常使用和生命周期相关事件。组件模式是使用时的最佳实践,最初引入组件模式是为了将数据逻辑和表现层进行分离。这是一种可以对输入组件的进行修改增删改查然后返回全新的修改后的组件强大模式,想想和。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!

组件是 React 的核心,因此了解如何利用它们对于创建优秀的设计结构至关重要。

什么是组件

根据 React 官网的介绍,“组件让你可以将 UI 分割成独立的、可重用的部分,并独立管理每个部分。”

当你第一次安装 npm install react 时,会得到一件事:组件及其 API。与 JavaScript 函数类似,组件接受名为 “props” 的输入并返回 React 元素,该元素描述(声明)用户界面(UI)的外观。这就是为什么 React 被称为声明性 API,因为你告诉它你希望 UI 是什么样子的,而 React 负责其余的工作。

可以把声明式想像成当打的去一个目的地时,只需要告诉司机去哪里,他就会开车把你送到那里。命令式编程正好相反—,你得自己驾车到那里。

组件的 API

当安装 React 后,便可以使用 React 提供的 API,基本可以分成 5 种。

render

state

props

context

lifecycle events

尽管一个组件可以使用上述所有 API,但一个组件通常用到只有少数几个 API,而其他组件则只使用其他 API。

可以对组件使用不同的 API 对组件进行划分,分为 有状态(stateful)无状态(stateless) 两种组件。

有状态组件通常使用 API: render, state 和生命周期相关事件。

无状态组件通常使用 API: render, props 和 context。

以上就是我们为佬要介绍 组件模式 的原因。组件模式是使用 React 时的最佳实践,最初引入组件模式是为了将数据逻辑和 UI 表现层进行分离。通过在组件之间划分职责,您以创建更多可重用的、内聚的组件,这些组件可用于组合复杂的 UI,这在构建可扩展的应用程序时尤其重要。

组件模式

通常组件模式有以下几种:

Container (容器组件)

Presentational (展示组件)

Higher order components (高级组件)

Render callback (渲染回调)

Container (容器组件)

“容器组件就是取数据,然后渲染子组件而已” —— Jason Bonta

容器组件是你的数据或逻辑层并利用 stateful API,使用生命周期事件,你可以连接 state
redux 或者 Fluxstorage 中,并将数据和回调作为 props 传递给子组件。

在容器组件的 render 方法中,你可以使用 展示组件 来渲染具体的样式。为了能够访问到所有状态 API,容器组件必须使用 class 的方式声明,而不是使用函数式方法声明。

在下面的示例中,我们有一个名为 Greeting 的类组件,它具有状态,生命周期事件componentDidMount()render 方法。

class Greeting extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "",
    };
  }

  componentDidMount() {
    // AJAX
    this.setState(() => {
      return {
        name: "William",
      };
    });
  }

  render() {
    return (
      

Hello! {this.state.name}

); } }

此时,该组件是一个有状态类组件,为了使 Greeting 成为一个容器组件,我们可以将 UI 拆分为一个 展示组件,将在下面进行说明。

展示组件

展示组件 使用 propsrendercontext (无状态API),并且由于不需要使用生命周期相关 Api,可以使用纯函数来简化表述它们:

const GreetingCard = (props) => {
  return (
    

Hello! {props.name}

) }

展示组件 仅从 props 接收数据和回调,这些数据和回调可以由其容器组件(父组件)提供。

容器组件和展示组件各自将数据/逻辑和展示部分封装到各自的组件中:

const GreetingCard = (props) => {
  return (
    

{props.name}

) } class Greeting extends React.Component { constructor() { super(); this.state = { name: "", }; } componentDidMount() { // AJAX this.setState(() => { return { name: "William", }; }); } render() { return (
); } }

如你所见,已经将 Greeting 组件中展示相关的部分移动到了它自己的函数式展示组件中。当然,这是一个非常简单的例子——对于更复杂的应用程序,这也是最基本的。

高阶组件

高阶组件是一种函数,它接受一个组件作为参数,然后返回一个新的组件。

这是一种可以对输入组件的 props 进行修改(增删改查)然后返回全新的修改后的组件强大模式,想想 react-router-v4redux 。用了 react-router-v4 后,你可以使用 withRouter() 来继承以 props 形式传递给组件的各种方法。同样,用了redux,就可以使用 connect({})() 方法来将展示组件和 store 中的数据进行连接。

代码演示:

import {withRouter} from "react-router-dom";

class App extends React.Component {
  constructor() {
    super();
    this.state = {path: ""}
  }
  
  componentDidMount() {
    let pathName = this.props.location.pathname;
    this.setState(() => {
      return {
        path: pathName,
      }
    })
  }
  
  render() {
    return (
      

Hi! I"m being rendered at: {this.state.path}

) } } export default withRouter(App);

导出组件时,使用用 react-router-v4withRouter()方法封装它。 在 组件 App 的生命周期事件 componentDidMount() 方法中,我们使用this.props.location.pathname 提供的值来更新 state。 由于我们使用了 withRouter 高阶组件,我们可以直接访问 this.props.locationlocation,而不需要直接将 location 作为 props 直接传入,非常方便。

渲染回调

与高阶组件类似,渲染回调或渲染 props 被用于共享或重用组件逻辑。虽然许多开发人员倾向于使用 高阶组件 的可重用逻辑,但是使用 渲染回调 仍然有一些非常好的理由和优势——这是在 Michael Jackson 的“永不写另一个高阶组件”中得到了最好的解释。简而言之,渲染回调减少了命名空间冲突,并更好的说明了逻辑来源。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState(prevState => {
      return {
        count: prevState.count + 1,
      };
    });
  };

  render() {
    return (
      
{this.props.children(this.state)}
); } } class App extends React.Component { render() { return ( {state => (

The count is: {state.count}

)}
); } }

Counter 类中,在 render 方法中嵌入 this.props.children 并将 this.state 作为参数。在 App 类中,我们可以将我们组件封装在 Counter 组件中,因此我可以操作 Counter 组件内的逻辑。

Counter 组件的本质是暴露了 children 这个外部属性,将 children 具体的渲染细节交个 Counter 的使用者,使用的时候只需要将组件传入到 Counterchildren 中,当然可以使用其他参数,如果 children 不够的话。

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文:

https://medium.com/teamsubcha...

你的点赞是我持续分享好东西的动力,欢迎点赞!

欢迎加入前端大家庭,里面会经常分享一些技术资源。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101856.html

相关文章

  • React 深入系列7:React 常用模式

    摘要:本篇是深入系列的最后一篇,将介绍开发应用时,经常用到的模式,这些模式并非都有官方名称,所以有些模式的命名并不一定准确,请读者主要关注模式的内容。 React 深入系列,深入讲解了React中的重点概念、特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React。 本篇是React深入系列的最后一篇,将介绍开发React应用时,经常用到的模式,这些模式并非都有...

    Chao 评论0 收藏0
  • [译] React.js 模式

    摘要:此时,我将它写下来讨论和分享这些我发现的模式。正确的姿势应该是通过的方式获取子组件的一些信息。高阶组件是需要另外一个有用的模式依赖注入。也有部分人称它是一种模式。最直接的方式是通过每一层通过来传递。 原文出自:http://krasimirtsonev.com/blog/article/react-js-in-design-patterns 前言 我想找一个好的前端前端框架,找了很久。...

    mumumu 评论0 收藏0
  • 精益 React 学习指南 (Lean React)- 1.1 React 介绍

    摘要:单向数据流应用的核心设计模式,数据流向自顶向下我也是性子急的人,按照技术界的惯例,在学习一个技术前,首先得说一句。然而的单向数据流的设计让前端定位变得简单,页面的和数据的对应是唯一的我们可以通过定位数据变化就可以定位页面展现问题。 书籍完整目录 1.1 React 介绍 showImg(https://segmentfault.com/img/bVvJgS); 1.1.1 React ...

    lsxiao 评论0 收藏0
  • With TypeScript 2.8+ :更好 React 组件开发模式

    摘要:近两年来一直在关注开发,最近也开始全面应用。首先,我们从无状态组件开始。渲染回调模式有一种重用组件逻辑的设计方式是把组件的写成渲染回调函数或者暴露一个函数属性出来。最后,我们将这个回调函数的参数声明为一个独立的类型。 近两年来一直在关注 React 开发,最近也开始全面应用 TypeScript 。国内有很多讲解 React 和 TypeScript 的教程,但如何将 TypeScri...

    simon_chen 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<