React学习 -- 组件

悠悠 2022-06-17 12:45 151阅读 0赞

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

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

## React组件的构建方法 ##

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

1、React.createClass：最传统，兼容性最好。

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

import React, { Component } from 'react';
    class Button extends Component {  
        constructor(props) {
            super(props); 
        }
        static defaultProps = {
            color: 'blue',
            text: 'Confirm', 6
         };
        render() {
            const { color, text } = this.props;
            return (
                <button className={`btn btn-${color}`}>
                    <em>{text}</em> 
                </button>
            ); 
        }
    }

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

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

function Button({ color = 'blue', text = 'Confirm' }) {  
        return (
            <button className={`btn btn-${color}`}> 
                <em>{text}</em>
            </button> 
        );
    }

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