react创建组建的四种方式

XanaHopper 发布于2019-08-20 16:06 / 3062人阅读

摘要：原由写这篇文章主要是为了增强自己的记忆，同时也是为了分享一下我们常用的创建组建的方法，主要是四种，启发来自于不知的博客呀，有兴趣的人可以去看看他的博客叙述我们在用的时候考虑最多的其实就是如何策划组建的划分，组建的嵌套，能够做到更省时省力。

原由：写这篇文章主要是为了增强自己的记忆，同时也是为了分享一下我们常用的创建组建的方法，主要是四种(createClass, component, PureComponet,Stateless Functional Component)，启发来自于不知的博客呀，有兴趣的人可以去看看他的博客！

叙述： 我们在用react的时候考虑最多的其实就是如何策划组建的划分，组建的嵌套，能够做到更省时、省力。做过了一个react的项目，目前依旧在继续，一上来我们就使用了es6的语法堂，用component来，仔细看过官方文档后，发现不用es6语法的同时只能使用createClass。在写组建的同时我们也都会说到这两个词语，状态组建和pure组建（纯函数）。今天就来大概介绍一下各自的特点：

一、createClass

var React = require("react");
var FirstComponent = React.createClass({
  propTypes: {
    name: React.PropTypes.string 
    //属性校验 (string, number, bool, func, array, object...... )
  },
  
  getDefaultProps: function() {
    return {
      name: "Mary" 
    };
    // 初始化props
  }, 
    
  getInitialState: function() {
    return {count: this.props.initialCount}; 
    //初始化props
  },
  
  handleClick: function() {
    //.....
  },
  render: function() {
    return Hello, {this.props.name};
  }
});
module.exports = FirstComponent;

这种方式下，组件的props、state等都是以对象object属性的方式组合在一起，在createClass中，React对属性中的所有函数都进行了this绑定，也就是如上面的hanleClick其实相当于handleClick.bind(this) 。

二、component es6语法堂

import React from "react";
class FirstComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
       count: props.initialCount
    };
  }
  static propTypes ＝ {
    name: React.PropTypes.string
  }
  statice props = {
    name: "Mary"
  }
  handleClick() {
    //点击事件的处理函数
  }
  
  render() {
    return Hello, {this.props.name};
  }
}
export default FirstComponent;

这段代码指定了FirstComponent继承extends React.Component的属性，通过constructor来构函数，初始化state，this的绑定也在这里面进行，因为这种方式react并没有对this进行绑定，所有需要手动输入绑定。这种方法创建组建因为继承了component的属性，因此这里面可以写react的所有生命周期函数,例如componentDidMount等系列，并在函数内容通过this.state来改变状态state，dom就会随即刷新，也可以手动静止更新，具体的细节是在某个生命周期中进行，具体的可以看看我的这篇文章

三、PureComponet

上面的方法中都不是纯函数的构造，因为state是可以在内容起到作用的，内容就可以控制是否重新渲染状态。
而这种方法我也很少用过，看过很多文章才明白！其实大多数情况下我们也很难用到这样的方式，在官网的位置都不是很起眼，所以就大概复述一下－不知－博客的内容吧！

class CounterButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  render() {
    return (
      
    );
  }
}

大多数情况下，我们使用PureComponent能够简化我们的代码，并且提高性能，但是PureComponent的自动为我们添加的shouldComponentUpate函数，只是对props和state进行浅比较(shadow comparison)，当props或者state本身是嵌套对象或数组等时，浅比较并不能得到预期的结果，这会导致实际的props和state发生了变化，但组件却没有更新的问题。当然还是有解决的方法的，所以建议还是少用。

四、Stateless Functional Component

上面提到的方法都包含了内部有交互和状态的复杂的组建，如果组建本身就是用来展示的，那么就可以用stateless的方法来创建组建。

import React from "react";
const Button = ({day,increment}) => {
  return (
    
      
    
  )
}

Button.propTypes = {
  day: PropTypes.string.isRequired,
  increment: PropTypes.func.isRequired,
}

export default Button;

如果像更改显示的结果只能改变传入的props;

以上就是四种创建组建的方式，来点个人的建议吧！

现在我公司的项目就是采用了第四种方式来进行组建的创建，那么肯定会有人问，那么请求接口，返回数据重新渲染怎么做，肯定还是会有一部分用到es6创建的方法，一部分采用stateless的方法，当然这种也是可以的，不过看起来就会稍微的有些乱，用两种方式定义组建也并不是一个好的团队应该看到的。所以给大家推荐一些react+webpack+react-redux 以及vda这种方式，具体的资料可以参考这个上面说的很详细，这种方式的优点就在于将逻辑和展示完全的分开了。

最后大家可以根据自己的喜欢以及项目的要求选择一种方式来进行组建的创建，方便自己的记忆，也供大家参考使用，同时也来提一下更好的方法。

参考：
http://www.cnblogs.com/Unknw/...
https://segmentfault.com/a/11...

私有云服务器托管对数据仓库分析的四种方式 activity的四种状态数据迁移的四种方法 java中线程的四种状态

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

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

react关于事件绑定this的四种方式

摘要：在组件中，每个方法的上下文都会指向该组件的实例，即自动绑定为当前组件而且还会对这种引用进行缓存，以达到和内存的最大化。在react组件中，每个方法的上下文都会指向该组件的实例，即自动绑定this为当前组件,而且react还会对这种引用进行缓存，以达到cpu和内存的最大化。在使用了es6 class或者纯函数时，这种自动绑定就不复存在了，我们需要手动实现this的绑定以下是几种绑定的方...

张利勇 2019-08-22 15:12 评论0 收藏0
react-router 2.7.0源码深度分析

摘要：介绍为提供路由管理为基于格式的系统提供了方便的切换页面功能。它在前端提供给了种方式通过或者浏览器原生的进行地址更新上一篇介绍了的方式本文则以的形式切入分析。代码剖析路由配置本生为组建内部组建如等。前言在前端单页面应用里面,路由是比较重要的部分,笔者的上一篇博文简单的路由介绍了简单的路由内部机制,本文则将分析react-router的内部机制。介绍 react-router为rea...

tianyu 2019-08-20 10:44 评论0 收藏0
React基础再回顾

摘要：方法一必须在这里绑定方法二使用属性初始化器语法需要开启以上方法三在使用时绑定方法四在回调函数中使用箭头函数渲染的时候都会创建一个不同的回调函数。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。从16年夏天初学React，到17年正式投入到工作中使用，直到现在V16.2发版，React发生了巨大的变化，最近在工作中使用时遇到很多基础不是非常清晰，借此再...

2450184176 2019-08-22 15:16 评论0 收藏0
深入理解js

摘要：详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于，工作和学习过程中遇到过许多问题，也解答过许多别人的问题。介绍了的内存管理。延迟加载 (Lazyload) 三种实现方式延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。详解 Javascript十大常用设计模式力荐~ ...

caikeal 2019-08-26 11:39 评论0 收藏0
ES6中React Mixins的使用（第四部分）

摘要：在的组建创建中，不太可能使用混合机制。在中，这个组建将被命名为。他们中的其中一个如下结论高阶组建功能强大和极具表现力。现在高阶组建广泛的被使用来替代老式的句法。这是React和ECMAScript6／ECMAScript7结合使用系列文章的第四篇。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） React类、ES7属性初始化（第二部分） React类...

Karrdy 2019-08-20 17:59 评论0 收藏0