React基础学习笔记（三）-组件及props对象简介

最新推荐文章于 2023-06-20 03:58:34 发布
最新推荐文章于 2023-06-20 03:58:34 发布
阅读量419 收藏
点赞数
分类专栏： React前端框架 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41865652/article/details/120037496
版权

1、组件化的思想

思想主要还是来源于面向过程和面向对象的编程思想，将 UI 拆分为独立可复用的代码片段,并对每个片段进行独立构思后封装到单独的js文件当中，借助于es6的导入导出语法，可以在项目中需要用到的地方导入即可使用，有效提高的代码的复用性。

2、组件类型

react中声明组件可以声明为函数组件，也可以声明为类组件

  • 函数组件
  • 类组件

这里先把主要概念都提一下， 后面再进行详细讲解以及实例演示说明

3、props对象

这个对象特别关键，React中的几个核心机制都是围绕props对象展开的，这个props对象是数据传递及数据获取中特别关键的成员。

  • 组件间的数据传递
  • 数据流向下单向流动的实现
  • 路由参数的获取
  • 父级组件数据获取
  • 资源路径的获取
  • and so on

4、组件之函数组件

4.1 函数组件的定义
import React from 'react';
import ReactDOM from 'react-dom';

function Index () {
    return (
        <div>
            <h3>这是一个函数组件</h3>
        </div>
    )
}

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

注意事项：

  • 1）构造函数的名称的首字母必须要大写
  • 2）组件必须要有返回值，空值也要return null, 一般情况下需要返回一个标准的jsx对象
    1. 再调用render方法进行渲染时，使用<构造函数名称 />
4.2 函数组件间的数据传递
import React from 'react';
import ReactDOM from 'react-dom';

// 1、定位到DOM对象
let el = document.getElementById('root')

// 2、初始化数据
const author = 'zhangsan'
const age = 20
// const student = {author: 'zhangsan', age: 20}

// 3、使用构造函数创建挂载组件
function Message(props) {  
    return (
      <div>
        {/* 直接使用jsx的插值语法绑定数据 */}
        <h3>{author}</h3>
        <h3>{age}</h3>
        <hr />
        {/* 通过props接收参数后再绑定数据 */}
        <h3>{props.author}</h3>
        <h3>{props.age}</h3>
      </div>
    )
}
// 4、组件挂载到目标DOM并渲染
ReactDOM.render(<Message author={author} age={age} />, el);

说明

  • 1、如果函数组件作为子组件，与父组件在同一个文件中，可以直接使用jsx中的表达式（插值语法）进行赋值
  • 2、如果函数组件作为子组件，与父组件在同一个文件中，也可以在组件调用的时候传递数据，然后再构造函数中使用props进行数据获取
4.2 使用单独的文件封装子组件

在这里插入图片描述

  • 子组件：message.js
// 封装的自定义组件中必须要引入React, 因为jsx形式的数据结构必须要是用React才能正常解析
import React from 'react';


// 自定义组件如果要其他组件可以调用，必须使用export进行导出
export function Message(props) {
    return (
        <div>
            <h3>{props.author}</h3>
            <p>{props.description}</p>
        </div>
    )
}
  • 父组件：parent_component.js

import React from 'react';
import ReactDOM from 'react-dom';

import { Message } from '../views/components/message'

// 使用单独的文件封装组件


// 1、定位到DOM对象
let el = document.getElementById('root')

// 2、初始化数据
const author = 'zhangsan'
const age = 20
const description = 'zhangsan is a very ordinary name...'
// const student = {author: 'zhangsan', age: 20}

// 4、组件挂载到目标DOM并渲染
ReactDOM.render(<Message author={author} age={age} description={description} />, el);

注意事项

    1. 封装自定义组件中必须要引入React, 因为jsx形势的数据结构必须要是用React才能正常解析
    1. 自定义组件如果要其他组件可以调用，必须使用export进行导出
    1. props数据是只读的，在子组件中获取使用props中的数据是无法重新赋值的
    1. 如果往子组件传递的数据过多，可以将数据封装到对象中，使用对象的解包语法简化传值操作

5、组件之类组件

5.1 类组件的定义

类组件的定义规范

    1. 类组件必须继承React.Component
    1. 类组件中必须有render函数,作用：渲染当前组件对应的虚拟DOM结构
    1. render函数中，必须返回合法的JSX虚拟DOM结构
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

// 1、定位到DOM对象
let el = document.getElementById('root')

// 2、定义类组件
class Message extends Component {
  render () {
    return (
      <div>
        <h3>zhangsan</h3>
        <p>20</p>
        <p>'zhangsan is a very ordinary name...'</p>
      </div>
    )
  }
}

// 3、组件挂载到目标DOM并渲染
ReactDOM.render(<Message />, el);
5.2 类组件间传递数据

两种方式说明

  • 1）如果在同一个文件中，可以直接使用jsx中的插值语法进行赋值【页面组件组成非常简单的时候可以使用，通常不太使用，因为组件化的核心目的在于复用、解耦、抽离】
    1. 如果在同一个文件中，也可以在组件调用的时候传递数据，然后再构造函数中使用this.props进行数据获取
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

// 1、定位到DOM对象
let el = document.getElementById('root')

// 2、初始化数据
const author = 'zhangsan'
const age = 20
const description = 'zhangsan is a very ordinary name...'
// const student = {author: 'zhangsan', age: 20}

// 3、定义类组件
class Message extends Component {
  render () {
    return (
      <div>
        {/* 如果在同一个文件中，可以直接使用jsx中的插值语法进行赋值 */}
        <h3>{author}</h3>
        <p>{age}</p>
        <p>{description}</p>
        <hr />
        {/* 直接使用this.props获取数据, props数据依然为只读的 */}
        <h3>{this.props.author}</h3>
        <p>{this.props.age}</p>
        <p>{this.props.description}</p>
      </div>
    )
  }
}

// 4、组件挂载到目标DOM并渲染
ReactDOM.render(<Message author={author} age={age} description={description} />, el);

在这里插入图片描述

5.3 使用单独的文件封装子组件
  • 子类组件：notice.js
import React, { Component } from "react";

export class Notice extends Component {

    render () {
        return (
            <div>
                <h3>{this.props.author}</h3>
                <p>{this.props.age}</p>
                <p>{this.props.description}</p>
            </div>
        )
    }
}
  • 父类组件：class_components_03.js

import React from 'react';
import ReactDOM from 'react-dom';

import { Notice } from '../views/components/notice'

// 使用单独的文件封装自定义类组件

// 1、定位到DOM对象
let el = document.getElementById('root')

// 2、初始化数据
const author = 'gutianle'
const age = 24
const description = 'gutianle is a very ordinary name...'

// 3、组件挂载到目标DOM并渲染
ReactDOM.render(<Notice author={author} age={age} description={description} />, el);

注意事项

    1. 封装自定义组件中必须要引入React, 因为jsx形势的数据结构必须要是用React才能正常解析
    1. 自定义组件如果要其他组件可以调用，必须使用export进行导出
    1. this.props数据是只读的，在自定义使用this.props中的数据是无法重新赋值的
    1. 如果往子组件传递的数据过多，可以将数据封装到对象中，使用对象的解包语法简化传值操作
5.4 类组件中特有对象state的使用
import React, { Component } from 'react'

// 两种创建组件方式的对比
    // 1. 用构造函数创建出来的组件：无状态组件；
    // 2. 用class关键字创建出来的组件：有状态组件；
    // 3. 什么情况下使用有状态组件？什么情况下使用无状态组件？
    // 如果组件内，不需要有私有的数据，此时，使用构造函数创建无状态组件比较合适；
    // 如果组件内，需要有自己私有的数据，则，使用 class 关键字 创建有状态组件比较合适；

// 组件中的  props 和  state 之间的区别
    // props 中存储的数据，都是外界传递到组件中的；
    // props 中的数据，都是只读的；
    // state 中的数据，都是组件内私有的；
    // state 中的数据，都是可读可写的；
    // props 在 有状态组件 和 无状态组件中，都有；
    // state 只有在 有状态组件中才能使用；无状态组件中，没有 state；

export class MsgList extends Component {
    // 在构造函数中接收外部传递的数据
    constructor (props) {
        super(props);
        // 通过state属性声明组件中的私有数据
        this.state = {
            sex: 'male',
            username: '青青子衿'
        }
    }

    render () {
        return (
            <div>
                <h3>{this.props.author}</h3>
                <p>{this.props.age}</p>
                <p>{this.state.sex}</p>
                <p>{this.state.username}</p>
                <p>{this.props.description}</p>
            </div>
        )
    }
}

6、类组件及函数组件的区别

6.1 有状态组件和无状态组件
  • 组件是否有状态取决于组件内部是否有私有数据
  • 用构造函数创建出来的组件：无状态组件；
  • 用class关键字创建出来的组件：有状态组件；
6.2 有状态组件与无状态组件的使用场景
  • 如果组件内，不需要有私有的数据，此时，使用构造函数创建无状态组件比较合适；
  • 如果组件内，需要有自己私有的数据，则，使用 class 关键字 创建有状态组件比较合适；
6.3 类组件与函数组件的关于props对象的使用区别
  • 函数组件中使用props对象直接使用props即可；
  • 类组件中使用props对象需要通过this.props；
6.4 类组件与函数组件的关于state对象的区别
  • 函数组件中没有state对象；
  • 类组件中才有state对象，获取state对象中的数据需要通过this.state进行获取；
  • React中的数据流向都是单向的，不能直接通过this.state.属性名称 = 属性取值的方式进行数据修改，这是不允许的。
  • React中修改state对象中的数据需要通过this.setState({key: value})或者this.setState((state, props) => {…})的方式进行数据修改

7、组件中props和state的区别

  • props 中存储的数据，都是外界传递到组件中的；
  • props 中的数据，都是只读的；
  • state 中的数据，都是组件内私有的；
  • state 中的数据，都是可读可写的；
  • props 在有状态组件和无状态组件中都有；
  • state 只有在 有状态组件中才能使用；无状态组件中，没有state；
嫣夜来
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react - 定义组件 - Props
weixin_57135131的博客
02-10 1360
react - 定义组件 - Props
React Native 基础学习笔记.rar
01-28
这个“React Native基础学习笔记”很可能是对这一跨平台开发技术的详细讲解和实践经验的汇总。React Native的核心理念是“Learn once, write anywhere”，即开发者只需掌握一次React的语法和概念，就能在iOS和...
使用组件和对象
为天加朵云...
08-13 810
使用组件和对象ActiveX 组件是建立强大的 Web 应用程序的关键。组件提供了用在脚本中执行任务的对象。ASP 同样提供了可在脚本中使用的内建对象。本主题将讨论如何使用组件提供的对象以及由 Active Server Pages 直接提供的内建对象。关于组件ActiveX 组件是一个文件，该文件包含执行某项或一组任务的代码。组件可以执行公用任务，这样就不必自己去创建执行这些任务的代码。
react组件的 props
weixin_45744454的博客
11-26 445
组件的 props 1.props的作用 接收传递给组件数据 2.实现方式 ①函数 //2.接收数据 const Hello = (props) =>{ //props是一个对象 return ( <div> <h1>props:{props.name}</h1> </div> ) } //1.传递数据 ReactDOM.render(<Hello name="jack" age={23}/>,do
React 组件 &Props
金溪的博客
07-24 372
组件可以将UI切分成一些独立的、可复用的部件。组件可以接收任意的输入值，并返回一个需要在页面上展示的React元素。 函数定义、类定义组件 定义一个组件最简单的方式是使用JavaScript函数： function Welcome(props) { return <h1>Hello, {props.name}</h1>; } 该函数是一个有效的React组件,...
[React]Day03—React中类式组件的三大属性之props
iChangebaobao的博客
05-18 359
React中类式组件的三大属性之一props的使用一、什么是props?二、props 的使用三、props 的总结 一、什么是props? 当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props” 二、props 的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
React学习笔记之高阶组件应用
08-27
React高阶组件（High-Order Components，简称HOCs）是React生态系统中一种强大的抽象工具，用于重用组件逻辑。HOCs本质上是纯函数，它们接收一个React组件作为输入，并返回一个新的组件。这种设计模式使得HOCs成为...
React框架er-paper-mas开发笔记
最新发布
06-11
在本篇React框架er-paper-mas的开发笔记中，我们将深入探讨如何利用React.js这个流行的JavaScript库来构建高效、可维护的应用程序。React是Facebook推出的一款用于构建用户界面的库，尤其适合构建复杂的单页应用...
React学习笔记之条件渲染（一）
01-19
在React中，你可以创建不同的组件各自封装你需要的东西。之后你可以只渲染其中的一部分，这取决于应用的state（状态）。下面就来看看详细的介绍： 条件渲染 可以根据state的值进行组件的条件渲染。例如： function ...
react学习笔记之state以及setState的使用
11-27
在React中，状态（state）是一个对象，用于存储组件的内部数据。与属性（props）不同，属性是从父组件传递给子组件的数据，而状态是组件自身拥有的数据，可以由组件自身修改。你可以将状态类比于Vue框架中的data属性...
【React】组件实例的三大属性——props
wusq的博客
02-28 354
props和state的区别 porps：父组件向子组件传递的参数，用于组件之间的通信，值不可变 state：组件内部的状态，值可变 1.props的用法 class Person extends React.Component { render() { const { name, age, sex } = this.props return ( <ul> <li>姓名：{name}</li> <li&
【react全家桶学习】react中组件的props属性（详）
蜗牛~~
04-27 1805
（这种情况几乎不存在，在构造器中我们可以直接访问props而不是this.props，因此在实际开发中构造器就是能省略就省略，作用不大）应该加上花括号，react才会去读取花括号里面的东西（还记得vue里面吗，vue是在变量名加上冒号，代表读取变量，如。构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props。学过了vue的props属性，那react中的props属性如何使用呢？如果属性特别多，我们通过上面的方式传递十分繁琐，那如何批量传递呢？
【React函数组件+类组件的props属性】
fcc627的博客
08-19 1463
函数组件和类组件的props属性举例说明
（五）组件与动态对象
bureau123的博客
04-02 308
组件 Component是封装好了的，只暴露了必要接口的QML类型，可以重复利用。 一个Component既可以定义在独立的QML文件中，也可以嵌入到其他的QML文档中，通常如果一个Component比较小并且只在某个QML文档中使用，或者一个Component从逻辑上看从属于某个QML文档，那么就可以采用嵌入的方式来定义该Component。 嵌入式定义组件 下面一个颜色选择组件代码： Component { id: colorComponent; Rectangle {
组件 （Component）和对象（Object）之间的区别
第7维度 - 日常笔记
02-18 2446
组件是一个可重用的模块，它是由一组处理过程、数据封装和用户接口组成的业务对象（Rules Object）。组件看起来像对象，但不符合对象的学术定义。它们的主要区别是： 1）组件可以在另一个称为容器（有时也称为承载者或宿主）的应用程序中使用，也可以作为独立过程使用； 2）组件可以由一个类构成，也可以由多个类组成，或者是一个完整的应用程序； 3）组件为模块重用，而对象为代码重用。现在，比较流行的组件模型有COM（Component Objiect Module，对象组件模型）/DCOM（ Distr...
React之props详解
subsistent的博客
04-09 3081
1.props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props纯函数：输入一定，输出一定确定总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件props对象的键值，但是不能直接更改 props。3.通过函数创建的组件，需要通过函数的参数来接收props，通过类创建的组件，需要通过this.props来接收。
url上接收到 el表达式 不渲染_VUe 中 props 这些知识点，你可能有些不懂，来复习下
weixin_39670627的博客
11-22 179
如果你一直在阅读有关"props"内容，你会发现我们可能也一直在使用它们(即使没有意识到)，但也许你并不完全确定它们是什么。或者如何正确使用它们，并充分利用它们。当你读完这篇指南时，你就会知道成为一名高效的Vue开发者所需要知道的关于props的一切。在本指南中，我们将介绍关于 props 的最重要的事情:什么是 props ?props 的两个主要特点如何将 props 传递给其他组件添加 pr...
[架构之路-216]- 架构 - 概念架构 - 模块（Module）、组件（Component）、包（Package）、对象、函数的区别
文火冰糖（王文兵）的博客
06-20 3468
在软件架构中，一个重要的任务就是切分系统，而切分系统进程涉及到一个基本的概念，如模块（Module）、组件（Component）、包（Package）、对象，本文澄清他们的区别。组件()和模块(Module)是一对容易混淆的名词，也常常被用来相互替换。两者是否有差异往往取决专业背景、所在领域、以及视角。从设计上来看，组件强调复用，模块强调职责(内聚、分离)，或者说组件是达到可复用要求的模块。模块、组件和对象这三个名词，是软件开发中非常常见的说法。
vue props传递对象参数时可以实现双向绑定
qq_45279574的博客
07-20 955
vue props传递对象参数时可以实现双向绑定 使用props向子组件传递对象属性的时候，是可以实现子组件数据修改父组件也能随之改变的 原因其实是props接收的是对象的地址，所以父子组件共同指向的是一个堆里面的对象，所以一个改变都改变了 注意：只有引用类型可以这样做，基本数据类型是不行的，毕竟props是单向数据流 ...
如何让react-native-echarts-pro 组件旋转
05-27
要让 react-native-echarts-pro 组件旋转，你需要在配置项中设置旋转角度。具体步骤如下： 1. 在你的组件中引入 react-native-echarts-pro 组件： ``` import ReactEcharts from 'react-native-echarts-pro'; ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值