React教程：组件与组件属性

川长思鸟来 2023-07-08 12:27 2阅读 0赞

## 1、React组件化概念 ##

### 1.1、组件的概念 ###

React 应用都是构建在组件之上。

组件作为React的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是React应用程序的基石。在React的组件构成中，按照状态来分可以分为有状态组件和无状态组件。

### 1.2、组件的特点 ###

组件化的概念在后端早已存在多年，只不过近几年随着前端的发展，这个概念在前端开始被频繁提及，特别是在MV\*的框架中。

前端中的“组件化”这个词，在UI这一层通常指“标签化”，也就是把大块的业务界面，拆分成若干小块，然后进行组装。

狭义的组件化一般是指标签化，也就是以自定义标签（自定义属性）为核心的机制。

广义的组件化包括对数据逻辑层业务梳理，形成不同层级的能力封装。

*  标准性
    
    任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。
 *  组合性
    
    组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合，而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示，肯定是要依赖不同组件之间的组合，嵌套以及通信。
 *  重用性
    
    任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。
 *  可维护性
    
    任何一个组件应该都具有一套自己的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解，使其更加的容易理解，同时大大减少发生bug的几率。

## 2、自定义组件 ##

### 2.1、函数组件 ###

无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类，通过函数形式或者 `ES6` 箭头 `function`的形式在创建，并且该组件是无state状态的。具体的创建形式如下

import React from 'react';
    
    //定义一个React组件
    function App() {
      return (
        <div>
          hello React...
        </div>
      );
    }
    
    export default App;

### 2.2、class组件 ###

`React.Component` 是以 `ES6` 的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，形式改为 `React.Component` 形式如下

import React from 'react';
    
    //定义一个React组件
    class App extends React.Component{
      render(){
        return (
          <div>
            Hello，Reactjs！！
          </div>
        );
      }
    }
    
    export default App;

在其他文件中引用组件

import React from 'react';
    import ReactDOM from 'react-dom';
    //App组件，组件要求大写字母开头
    import App from './App';
    
    ReactDOM.render(<App />, document.getElementById('root'));

### 2.3、函数组件和class组件的区别 ###

用构造函数创建出来的组件，叫做“无状态组件”；

用class关键字创建出来的组件，叫做“有状态组件”；

有状态组件和无状态组件之间的本质区别是**有无state属性**。

> 注意：
> 
> 使用`class` 关键字创建的组件，有自己的私有数据（this.state）和生命周期函数；
> 
> 使用`function`创建的组件，只有`props`，没有自己的私有数据和生命周期函数；

函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;">区别</th> 
   <th style="text-align:center;">函数组件</th> 
   <th style="text-align:center;">class组件</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">是否有 <code>this</code></td> 
   <td style="text-align:center;">没有</td> 
   <td style="text-align:center;">有</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">是否有生命周期</td> 
   <td style="text-align:center;">没有</td> 
   <td style="text-align:center;">有</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">是否有状态 <code>state</code></td> 
   <td style="text-align:center;">没有</td> 
   <td style="text-align:center;">有</td> 
  </tr> 
 </tbody> 
</table>

## 3、React组件属性 ##

### 3.1、`props`属性 ###

react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。

**`props`属性的特点：**

1.每个组件对象都会有props（properties的简写）属性

2.组件标签的所有属性都保存在props中

3.内部读取某个属性值：this.props.propertyName

4.作用：通过标签属性从组件外 向组件内传递数据（只读 read only）

5.对props中的属性值进行类型限制和必要性限制

**代码示例**

使用函数组件：

import React from 'react';
    import ReactDOM from 'react-dom';
    
    //使用函数组件
    function User(props){
        //在组件中获取props属性值
        return <div>{props.name}，{props.age}</div>
    }
    
    //定义数据
    const person ={
        name:'张三',
        age:20,
        sex:'男'
    }
    
    ReactDOM.render(
        <User {...person}></User>
    , document.getElementById('root'));

使用类组件：

import React from 'react';
    import ReactDOM from 'react-dom';
    
    //使用class组件
    class User extends React.Component{
        render(){
            return (
        <div>{this.props.name}--{this.props.age}</div>
            );
        }
    }
    
    //数据
    const person ={
        name:'张三',
        age:20,
        sex:'男'
    }
    
    ReactDOM.render(
        <User {...person}></User>
    , document.getElementById('root'));

### 3.2、`state` 属性 ###

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

代码示例：

import React from 'react';
    import ReactDOM from 'react-dom';
    
    class Person extends React.Component{
        //构造方法
        constructor(){
            super();
            this.state = {
                name: 'tom'
            }
        }
    
        render(){
            //state属性是可修改的
            this.state.name = 'jack';
            return (
            <h1>{this.state.name}</h1>
            );
        }
    }
    
    ReactDOM.render(<Person />, document.getElementById('root'));

**设置状态:setState**

setState(object nextState\[, function callback\])

不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。

setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。

setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑

### 3.3、`props`和`state`属性的区别 ###

*  `props`中的数据都是外界传递过来的；
 *  `state`中的数据都是组件私有的；（通过Ajax获取回来的数据，一般都是私有数据）
 *  `props`中的数据都是只读的，不能重新赋值；
 *  `state`中的数据，都是可读可写的；
 *  子组件只能通过`props`传递数据；

### 3.4、`refs` 属性 ###

在React数据流中，父子组件唯一的交流方式是通过props属性；如果要修改子组件，通过修改父组件的属性，更新达到子组件props属性的值，重新渲染组件以达到视图的更新。但是，有些场景需要获取某一个真实的DOM元素来交互，比如文本框的聚焦、触发强制动画等

*  给DOM元素添加ref属性
 *  给类组件添加ref属性

代码示例：

import React from 'react';
    import ReactDOM from 'react-dom';
    
    class Person extends React.Component{
    
        constructor(){
            super();
            this.handleClick = this.handleClick.bind(this);
        }
    
        //点击事件
        handleClick(){
            // 使用原生的 DOM API 获取焦点
            this.refs.myInput.focus();
        }
    
        render(){
            return (
                <div>
                    <input type="text" ref="myInput" />
                    <input
                        type="button"
                        value="点我输入框获取焦点"
                        onClick={this.handleClick}/>
                </div>
            );    
        }
    }
    
    ReactDOM.render(<Person />, document.getElementById('root'));