什么是React组件？简单概括 -- 华某-优快云

于 2019-12-20 15:24:23 发布
阅读量487 收藏
点赞数 1
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/z_ZJH/article/details/103629145
版权
本文详细介绍了React组件的创建方法，包括Class类组件和Function函数组件，强调了函数组件的高性能优势。同时，阐述了组件的props和state属性，props作为传递数据的唯一途径，是只读的，而state则用于组件内部状态管理。接着，文章探讨了父子组件和兄弟组件之间的数据传递方式，强调了父传子通过props，子传父需要借助回调函数，以及兄弟组件间通过父组件作为中转进行通信。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.创建组件的方法

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

//引入模块
import React from 'react';

//定义一个React组件   extends是继承
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'));

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

import React from 'react';

//定义一个React组件
function App() {
  return (
    <div>
      hello React...
    </div>
  );
}

export default App;

函数组件和class组件的区别
用构造函数创建出来的组件，叫做“无状态组件”；
用class关键字创建出来的组件，叫做“有状态组件”；
有状态组件和无状态组件之间的本质区别是有无state属性。

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

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

在这里插入图片描述

2.组件的props属性，state属性的用法和特点

2.1props属性
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'));

2.2state属性
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'));

2.3props和state属性的区别

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

3.父子组件传值

3.1父传子

在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个param的值。
父组件向子组件传值，通过props，将父组件的state传递给了子组件。

父组件代码片段：
创建父组件Father.js：

import React from 'react'
import Son from './Son'

class Father extends React.Component{
    render(){
        return(
            <React.Fragment>
                <Son qiqi='琪琪最可爱了!!!!!!!'></Son>
            </React.Fragment>
        )
    }
}

export default Father

创建子组件Son.js：

import React from 'react'

class Son extends React.Component{

    render(){
        return(
            <React.Fragment>
                {this.props.qiqi}
            </React.Fragment>
        )
    }
}

export default Son

入口文件index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import Father from './Father';

ReactDOM.render(<Father />, document.getElementById('root'));

3.2子传父
代码如下
创建子组件Son.js：

import React from 'react';

class Son extends React.Component{

    render(){
        return(
            <React.Fragment>
                {this.props.qiqi('三三')}
            </React.Fragment>
        )
    }

}
export default Son;

创建父组件Father.js：

import React from 'react'
import Son from './Son'

class Father extends React.Component{

        constructor(){
            super();
            this.state={
                message:''
            }
        }


        getSan(er){

            console.log('子元素的内容'+er)
        }


    render(){
        
        return(
            <React.Fragment>
                <Son qiqi={this.getSan}></Son>
            </React.Fragment>
        )
    }
}
export default Father;

入口文件index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import Father from './Father' 

ReactDOM.render(<Father />, document.getElementById('root'));

4.兄弟组件传值

兄弟组件之间的传值，是通过父组件做的中转 ，流程为：
组件A – 传值 --> 父组件 – 传值 --> 组件B
代码如下
创建父文件Father.js:

import React from 'react'
import Son from './Son'
import Son2 from './Son2'


//父组件
class Father extends React.Component{

    constructor(){
        super()
        this.state = {
            message:''
        }
    }

    //用于接收Son.js组件的数据函数
    sonDatas(msg){
        this.setState({
            message:msg
        })
        console.log('在Father.js中展示Son.js生成的数据：'+msg)
    }

         render(){
             return(
                 <React.Fragment>
                     <h1>在Father组件中显示：</h1>
                     <Son sondata={this.sonDatas.bind(this)}></Son>
                     <Son2 mess={this.state.message}></Son2>
                 </React.Fragment>
             )
         }

}

export default Father

创建子文件Son.js:

import React from 'react'

class Son extends React.Component{

    //按钮点击事件函数
    sonClick(){
        this.props.sondata('这是从Son.js中生成的数据。。。')
    }

    render(){
        return(
            <React.Fragment>
                <button onClick={this.sonClick.bind(this)}>Son组件中的按钮获取数据</button>
            </React.Fragment>
        )
    }
}

export default Son

创建另一个子文件Son2.js:

import React from 'react'

class Son2 extends React.Component{

    render(){
        return(
            <React.Fragment>
              在Son2.js中展示Son.js中生成的数据，这个是Father.js传过来的，数据是：
              {this.props.mess}  
            </React.Fragment>
        )
    }
}
export default Son2

创建入口文件index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import Father from './Father'

ReactDOM.render(<Father />, document.getElementById('root'));
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值