React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React构建组件

React构建组件的几种方式及区别

作者:nine99

这篇文章主要介绍了React构建组件的几种方式及区别,组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念来实现开发的模式文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下

一、组件是什么

组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式

React中,一个类、一个函数都可以视为一个组件

组件所存在的优势:

二、如何构建

React目前来讲,组件的创建主要分成了三种方式:

函数式创建

React Hooks出来之前,函数式组件可以视为无状态组件,只负责根据传入的props来展示视图,不涉及对state状态的操作

大多数组件可以写为无状态组件,通过简单组合构建其他组件

React中,通过函数简单创建组件的示例如下:

function HelloComponent(props, /* context */) {
  return <div>Hello {props.name}</div>
}

通过 React.createClass 方法创建

React.createClass是react刚开始推荐的创建组件的方式,目前这种创建方式已经不怎么用了

像上述通过函数式创建的组件的方式,最终会通过babel转化成React.createClass这种形式,

转化成如下:

function HelloComponent(props) /* context */{
  return React.createElement(
    "div",
    null,
    "Hello ",
    props.name
  );
}

由于上述的编写方式过于冗杂,目前基本上不使用上

继承 React.Component 创建

同样在react hooks出来之前,有状态的组件只能通过继承React.Component这种形式进行创建

有状态的组件也就是组件内部存在维护的数据,在类创建的方式中通过this.state进行访问

当调用this.setState修改组件的状态时,组价会再次会调用render()方法进行重新渲染

通过继承React.Component创建一个时钟示例如下:

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

三、区别

由于React.createClass创建的方式过于冗杂,并不建议使用

而像函数式创建和类组件创建的区别主要在于需要创建的组件是否需要为有状态组件:

在考虑组件的选择原则上,能用无状态组件则用无状态组件

到此这篇关于React构建组件的几种方式及区别的文章就介绍到这了,更多相关React构建组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文