React组件略讲

React是前端组件化开发的开山鼻祖，这种开发方式彻底解决了的前端组件复用的痛点。今天，就来研究一下React组件开发。

前端同学一般都会从Vue入门，因为Vue使用的<template>的组件开发方式让前端人员更容易的平滑过渡。Vue的组件很简单，一般来说，一个.vue文件就是一个组件。就像webpack的模块化开发，一个文件就是一个组件。我们在使用组件时也很容易，通过 ES6 的import导入、注册（components），就可以直接使用。

上面简单说了Vue的组件模式，其实，React的使用方式也差不多，毕竟是借鉴它的组件思想。最明显的差别就是声明方式，React用的是JSX语法，这让React变的很灵活。当然，使用方式的灵活也意味着使用者的脑子也要足够的灵活，从而增加了入门的难度。玩的6的人是真喜欢，未入门的是真不能理解为啥把html标签写到js里面呢。

好了，上面扯了那么多，下面就来一探React组件的究竟...

React组件基础

最开始，让我们先来了解一下React组件是如何定义的和分类的。

组件定义

React组件的声明方式有两种（React.createClass已弃用）：函数组件和class组件。它们的区别是什么呢？

如果一个组件只根据props渲染页面，没有内部状态state，我们完全可以用函数组件的形式来实现。也就是说，函数组件只是简单的负责展示数据，它里面没有生命周期函数和state状态，不能做业务逻辑处理。

函数组件（无状态组件）：

import React from "react";

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class组件：

import React, { Component } from "react";

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    // 设置 initial state
    this.state = {
      text: props.initialValue || 'placeholder'
    };
    // ES6 类中函数必须手动绑定
    this.handleChange = this.handleChange.bind(this);
  }
  handleClick(event) {
    this.setState({
      text: event.target.value
    });
  }
  componentDidMount() {
  // do something
  }
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}</h1>;
        <button onClick={this.handleClick}></button>
      </div>
    )
  }
}

注意：

  1. React自义定的组件均为大写字母开头
  2. Props是只读的，如果要改变状态，需要使用状态提升

组件分类

React的组件分成两种类型：展示组件和容器组件。 将组件分成这两类之后，你会发现它们容易更被重用和理解。通常，展示组件负责展示内容，容器组件负责处理业务逻辑。是不是很像上面的函数组件和class组件的区别。

容器组件和展示组件名词都来自于redux中文文档。

  • 展示组件

    1. 关注页面的展示效果（外观）
    2. 内部可以包含展示组件和容器组件，通常会包含一些自己的DOM标记和样式(style)
    3. 通常允许通过this.props.children方式来包含其他组件
    4. 对应用程序的其他部分没有依赖关系，例如Flux操作或store
    5. 不用关心数据是怎么加载和变动的
    6. 只能通过props的方式接收数据和进行回调(callback)操作
    7. 很少拥有自己的状态，即使有也是用于展示UI状态的
    8. 会被写成函数式组件除非该组件需要自己的状态，生命周期或者做一些性能优化

Example：Page、Header、Sidebar、List、UserInfo...

  • 容器组件

    1. 关注应用的是如何工作的
    2. 内部可以包含容器组件和展示组件，但通常没有任何自己的DOM标记 （除了一些包装用的 div） ，并且从不具有任何样式
    3. 提供数据和行为给其他的展示组件或容器组件
    4. 调用Flux操作并将它们作为回调函数提供给展示组件
    5. 往往是有状态的，因为它们倾向于作为数据源
    6. 通常使用高阶组件生成，例如React Redux的connect()，Relay的createContainer()或Flux Utils的Container.create()，而不是手工编写

    Example：UserPage、StoryContainer、 FollowedUserList...

  • 优点
    1. 更好分离关注点。用这种方式写组件，可以更好理解你的应用程序和 UI
    2. 重用性高，展示组件可以用于多个不同数据源。
    3. 展示组件就是你的调色板，可以把他们放到单独的页面，在不影响应用程序的情况下，让设计师调整UI。
    4. 这迫使您提取诸如侧边栏，页面，上下文菜单等“布局组件”并使用this.props.children，而不是在多个容器组件中复制相同的标记和布局。

现在，我们已经知道了展示组件和容器组件的不同点。容器组件倾向于有状态，展示组件倾向于无状态，这不是硬性规定，因为容器组件和展示组件都可以是有状态的。 通常，展示组件被容器组件包裹的，因为容器组件内可以处理业务逻辑，将处理好的数据传递给展示组件。

当不重要或说很难分清时,不要把分离容器组件和展示组件当做教条， 如果你不确定该组件是容器组件还是展示组件是，就暂时不要分离，写成展示组件吧。

高阶组件

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

具体而言，高阶组件是参数为组件，返回值为新组件的函数。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。还记得上面说的容器组件吗？高阶函数和容器组件有相似之处，都能将相同的逻辑抽离出来复用，都需要包裹展示组件。

高阶组件来源于JavaScript的高阶函数—— 高阶函数就是接受函数作为输入或者输出的函数。高阶组件仅仅只是是一个接受组件组作输入并返回组件的函数。看上去并没有什么，那么高阶组件能为我们带来什么呢？首先看一下高阶组件是如何实现的，通常情况下，实现高阶组件的方式有以下三种：

属性代理

操作props

const HOC = (WrappedComponent) =>
    class WrapperComponent extends Component {
      render() {
        const newProps = {
          name: 'HOC'
        }
        return <WrappedComponent
          {...this.props}
          {...newProps}
        />;
      }
    }

我们看到之前要传递给被包裹组件WrappedComponent的属性首先传递给了高阶组件返回的组件(WrapperComponent)，这样我们就获得了props的控制权(这也就是为什么这种方法叫做属性代理)。我们可以按照需要对传入的props进行增加、删除、修改(当然修改带来的风险需要你自己来控制)。

? 抽象state

? 属性代理的情况下，我们可以将被包裹组件(WrappedComponent)中的状态提到包裹组件中，一个常见的例子就是实现不受控组件到受控的组件的转变。

class WrappedComponent extends Component {
    render() {
        return <input name="name" {...this.props.name} />;
    }
}

const HOC = (WrappedComponent) =>
    class extends Component {
        constructor(props) {
            super(props);
            this.state = {
                name: '',
            };

            this.onNameChange = this.onNameChange.bind(this);
        }

        onNameChange(event) {
            this.setState({
                name: event.target.value,
            })
        }

        render() {
            const newProps = {
                name: {
                    value: this.state.name,
                    onChange: this.onNameChange,
                },
            }
            return <WrappedComponent {...this.props} {...newProps} />;
        }
    }

上面的例子中通过高阶组件，我们将不受控组件(WrappedComponent)成功的转变为受控组件。

? 组合方式

const HoC = (WrappedComponent, LoginView) => {
    const WrappingComponent = () => {
        const {user} = this.props;
        if (user) {
            return <WrappedComponent {...this.props} />
        } else {
            return <LoginView {...this.props} />
        }
    };
    return WrappingComponent;
};

上述代码中有两个组件，WrappedComponent 和 LoginView，如果传入的props中存在user，则正常显示的 WrappedComponent 组件，否则显示 LoginView 组件，让用户去登录。HoC 传递的参数可以为多个，传递多个组件定制新组件的行为，例如用户登录状态下显示主页面，未登录显示登录界面；在渲染列表时，传入 List 和 Loading 组件，为新组件添加加载中的行为。

反向继承

反向继承是指返回的组件去继承之前的组件

操作props和state

在某些情况下，我们可能需要为高阶属性传入一些参数，那我们就可以通过柯里化的形式传入参数，例如:

import React, { Component } from 'React';

const HOCFactoryFactory = (...params) => {
    // 可以做一些改变 params 的事
    return (WrappedComponent) => {
        return class HOC extends Component {
            render() {
                return <WrappedComponent {...this.props} />;
            }
        }
    }
}

可以通过下面方式使用：

HOCFactoryFactory(params)(WrappedComponent)

这种方式是不是非常类似于React-Redux库中的connect函数，因为connect也是类似的一种高阶函数。反向继承不同于属性代理的调用顺序，组件的渲染顺序是: 先WrappedComponent再WrapperComponent(执行ComponentDidMount的时间)。而卸载的顺序也是先WrappedComponent再WrapperComponent(执行ComponentWillUnmount的时间)。

总结

写到这里算是结束了，很简略地介绍了React的组件。文章虽短，希望能让你大概了解React组件的一些特征。最后总结一下：

  • React组件的声明方式用两种：函数组件和class组件。函数组件只有render一个返回函数，class组件可以有生命周期和其他业务逻辑处理函数
  • React组件从使用形式上分两种：展示组件和容器组件。基本原则：容器组件负责数据获取，展示组件负责根据props显示信息
  • React高阶组件就是参数为组件，返回值为新组件的函数。这样做的好处就是可以抽离一些相同的业务逻辑便于复用。作用类似Mixin，但避免了Mixin的副作用。

原文地址：https://www.cnblogs.com/chenwenhao/p/11968176.html

时间： 2024-10-10 21:03:31

React组件略讲的相关文章

二、React初体验之React组件创建

(中间因为应付各种考试,处理其他事情,隔了好时间没更新,现在终于有时间了,续上!) 本文为React初始体验,因此先不考虑文件如何组织,尽量以最简单的方式让大家了解React其中的原理. 在创建组件(component)之前,大家首先需要了解一些基础知识.有ES6.JSX语法等基础知识的同学请跳过下面一段. ES6是JavaScript的最新标准,里面新增了许多语法方式,甚至出现了“类”的继承方式,我个人暂且把他们理解为新增了许多“语法糖”,这些“语法糖”可能带给老手的是方便,而对于我们这些菜鸟

react组件渲染的一些想法

最近一直在思考一个问题,react的单向数据流面对深层次组件集合(redux connect方法返回的组件,即一项完整的功能)时,数据该如何传递???redux帮助我们解决了什么问题??? 我使用了redux+react,发现redux并没有解决react组件之间数据传递问题.只是把数据中心化与避免了父组件取子孙组件的数据时那繁琐的回调,却增加了三个麻烦的东西action.reducer.mapStateProps.复杂的处理流程:action里新增一条数据,reducer就需要增加一个对该数据

React 组件之间如何交流

原文  http://blog.51yuekan.com/2015/07/23/2015-07-19-react-component-communicate/ 主题 React 前言 今天群里面有很多都在问关于 React 组件之间是如何通信的问题,之前自己写的时候也遇到过这类问题.下面是我看到的一篇不错英文版的翻译,看过我博客的人都知道,我翻译可能不会按部就班,会尽可能用中文的意思,来将作者要讲述的技术描述清楚.英文能力有限,如果有不对的地方请跟我留言,一定修改--^_^ 原著序 处理 Rea

React 组件的生命周期API和事件处理

一.简单记录React的组件的简洁的生命周期API: A:实例化期: 一个实例第一次被创建时所调用的API与其它后续实例被创建时所调用的API略有不同. 实例第一次被创建时会调用getDefaultProps,而后续实例创建时不会调用这个方法. 实例被创建时,依次被调用的API有: getDefaultProps: 实例第一次被创建时才调用,对于组件类来说,它只调用一次. 这个方法返回的对象可为实例设置默认的props值. getInitialState: 对于每个实例来说,这个方法只调用一次.

React—组件生命周期详解

React-组件生命周期详解 转自 明明的博客  http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢迎加入QQ群(115402375)讨论!博客编写已经转移到http://blog.csdn.net/limm33 在组件的整个生命周期中,随着该组件的props或者state发生改变,它的DOM表现也将有相应的改变,一个组件就是一个状态机,对于特定的输入,它总会返回一致的输出. React为每个组件

推荐一款中国风React组件

最近看这个中国风的组件在掘金也火了一段时间,看了有几天了,也体验了下,感觉还不错,所以准备来安利下 项目地址:https://github.com/zhui-team/zhui 使用手册请参考:https://inspiring-bardeen-426f2e.netlify.com/ 以下为zh - ui 作者的掘金简介文章 1. 很长的前言 大三狗的寒假到了...众所周知,寒暑假是超越别人的最好的时机.然鹅一不小心就会荒废过去,大二暑假去杭州实习了两个月,这个寒假如果不做点什么开学会被满满的负

如何写好react组件

react 组件方面: 总结 React 组件的三种写法 及最佳实践 [涨经验] React组件编写思路(一) 使用react-router实现单页面应用时设置页面间过渡的两种方式 [翻译]基于 Create React App路由4.0的异步组件加载(Code Splitting) React进阶--使用高阶组件(Higher-order Components)优化你的代码 Higher-order Components 高阶组件 redux方面: Redux-saga 中文文档 https:

React 组件复合

React组件复合 · 通过React写组件时,应当尽可能地将组件分为更小的更多的组件,然后再复合组件. 比如下面的评论组件就是一个组件,一个庞大的组件,这时我们还没有将之分解,更没有复合: function Comment(props) { return ( <div className="Comment"> <div className="UserInfo"> <img className="Avatar" sr

React组件性能优化

转自:https://segmentfault.com/a/1190000006100489 React: 一个用于构建用户界面的JAVASCRIPT库. React仅仅专注于UI层:它使用虚拟DOM技术,以保证它UI的高速渲染:它使用单向数据流,因此它数据绑定更加简单:那么它内部是如何保持简单高效的UI渲染呢? React不直接操作DOM,它在内存中维护一个快速响应的DOM描述,render方法返回一个DOM的描述,React能够计算出两个DOM描述的差异,然后更新浏览器中的DOM. 就是说R