React学习 -- 组件

前端之家收集整理的这篇文章主要介绍了React学习 -- 组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React组件可以被描述成JSON对象,这就意味着,开发者可以通过方法或类来构建组件。React组件基本上由三部分组成:属性props,状态state和生命周期方法

React组件可以接受外部进入的参数,也可以维持自身状态,一旦收到参数导致变化或自身状态改变,React组件就会自动执行相应的生命周期方法,最后渲染。

React组件的构建方法

三种不同的方法:React.createClass、ES6 classes、无状态函数

1、React.createClass:最传统,兼容性最好。

  1. const Button = React.createClass({
  2. getDefaultProps() {
  3. return {
  4. color: 'blue',text: 'Confirm',};
  5. },render() {
  6. const { color,text } = this.props;
  7. return (
  8. <button className={`btn btn-${color}`}>
  9. <em>{text}</em>
  10. </button>
  11. );
  12. }
  13. });

2、ES6 classes:通过ES6标准的类语法

  1. import React,{ Component } from 'react';
  2. class Button extends Component {
  3. constructor(props) {
  4. super(props);
  5. }
  6. static defaultProps = {
  7. color: 'blue',text: 'Confirm',6
  8. };
  9. render() {
  10. const { color,text } = this.props;
  11. return (
  12. <button className={`btn btn-${color}`}>
  13. <em>{text}</em>
  14. </button>
  15. );
  16. }
  17. }

React不推荐采用继承,因为如果采用了继承,UI层面小的修改就可能影响整体,这样并不是我们需要的。React采用的是组合逻辑:将组件拆分到合理的利用,用组合的方式合成业务组件。

3、无状态函数:采用这种方式构建的组件称为无状态组件

  1. function Button({ color = 'blue',text = 'Confirm' }) {
  2. return (
  3. <button className={`btn btn-${color}`}>
  4. <em>{text}</em>
  5. </button>
  6. );
  7. }

无状态组件不存在state,也没有生命周期方法。 在合适的情况下,我们都应该使用无状态组件,因为它不像上面两种方法调用时会创建新实例,它创建时始终保持了一个实例,避免了不必要的检查和内存分配。

猜你在找的React相关文章