React中的函数组件和props

最新推荐文章于 2024-01-18 15:18:55 发布

看烟火的鱼

最新推荐文章于 2024-01-18 15:18:55 发布

阅读量1.3k

点赞数 3

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45336072/article/details/115972379

版权

本文探讨了React中的函数组件和class组件，强调了props的只读性。内容包括用户自定义组件的渲染规则，如DOM标签和自定义组件实例。此外，还介绍了组件的组合与提取，以及如何通过纯函数特性确保props不被修改。

摘要由CSDN通过智能技术生成

函数组件和calss组件

函数组件（接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素，本质上是JavaScript函数）

function Welcome(props) {
   
  return <h1>Hello, {
   props.name}</h1>;
}

class组件

class Welcome extends React.Component {
   
  render() {
   
    return <h1>Hello, {
   this.props.name}</h1>;
  }
}

用户自定义组件的渲染规则

DOM标签

 const element = <div />;

用户自定义的组件

const element = <Welcome name="Sara" />;

自定义组件的渲染实例

function Welcome(props) {
   
 return <h1>Hello, {
   props.name

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

看烟火的鱼

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

React之函数式组件使用props

wanggang182007的博客

03-31

1066

<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title>3_函数式组件使用props</title> </head> <body>  <div id="test1"></div> <div id="tes...

【react全家桶学习】react中组件的props属性（详）

蜗牛~~

04-27

1918

（这种情况几乎不存在，在构造器中我们可以直接访问props而不是this.props，因此在实际开发中构造器就是能省略就省略，作用不大）应该加上花括号，react才会去读取花括号里面的东西（还记得vue里面吗，vue是在变量名加上冒号，代表读取变量，如。构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props。学过了vue的props属性，那react中的props属性如何使用呢？如果属性特别多，我们通过上面的方式传递十分繁琐，那如何批量传递呢？

参与评论您还未登录，请先登录后发表或查看评论

【React函数组件+类组件的props属性】

fcc627的博客

08-19

1514

函数组件和类组件的props属性举例说明

React 之函数式组件使用props

qq_51219425的博客

03-08

4674

对于react的三大核心属性state、props、refs，只有props能被函数式组件使用，因为只有props属性可以作为参数调用。相关代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>3_函数组件使用props</title> </head> <body> <!--准备好一个容器--&gt

深入了解 React 函数式组件的 Props

热门推荐

l_ymttt的博客

04-22

1万+

1. 创建方式 // 写法一 const Hello = (props) => { return <div>{props.message}</div> } // 写法二 const Hello = props => <div>{props.message}</div> // 写法三 function Hello(props) { return <div>{props.message}</

react16：函数组件中使用props

richest_qi的博客

04-01

1703

函数组件中也可以使用props。看个简单的例子，如下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1

react 函数式组件中使用props

weixin_45780818的博客

11-10

5393

我们之前学习的一直是组件实例上的props，是可以通过this访问组件实例的，比如props，可以通过this.props访问，但是在函数式组件中，不存在组件实例。 function Person() { return ( <ul> <li>姓名：{name}</li> <li>性别：{sex}</li> <li>年龄：{age + 1}</li> </ul&gt

【react】函数式组件使用props

bbt953的博客

03-10

338

函数式组件使用props

【React】函数式组件传值（props）

qq_45677671的博客

04-13

5352

在用react进行函数式编程时，父组件可以通过props向子组件传值，那么子组件怎么向父组件传值呢？首先，父组件需要向子组件传递一个函数，然后，子组件通过props获取函数并附上参数，最后，父组件通过函数拿到子组件传递的值。

10.props属性的校验

qq_24871849的博客

12-21

186

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title { background-color: orange; width: 200px; } </style&g

React 入门：组件实例三大属性之props

将PHP Web开发进行到底

10-22

757

组件的 props，类似于 JavaScript 函数的参数。组件标签以属性的形式接收的参数即 “props”，并返回用于描述页面展示内容的 React 元素。

react修改props_React 函数式组件性能优化指南

weixin_30750081的博客

01-24

1987

前言目的本文只介绍函数式组件特有的性能优化方式，类组件和函数式组件都有的不介绍，比如 key 的使用。另外本文不详细的介绍 API 的使用，后面也许会写，其实想用好 hooks 还是蛮难的。面向读者有过 React 函数式组件的实践，并且对 hooks 有过实践，对 useState、useCallback、useMemo API 至少看过文档，如果你有过对类组件的性能优化经历，那么这篇...

Props 的只读性

jean_0920的博客

08-31

999

Props 的只读性组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。来看下这个 sum 函数： function sum(a, b) { return a + b; } 这样的函数被称为“纯函数”，因为该函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。相反，下面这个函数则不是纯函数，因为它更改了自己的入参： function withdr...

深度讲解React Props

grooyo的博客

09-28

1373

每个组件对象都会有props(properties的简写)属性组件标签的所有属性都保存在props中通过标签属性从组件外向组件内传递变化的数据注意:组件内部不要修改props数据使用propTypes 属性并配合prop-types 三方库实现prop验证（不用另外下载，已集成在脚手架中）

React 组件通讯

yexiangCSDN的专栏

05-19

283

React 组件进阶 Contents 目  组件通讯介绍  组件的 props  组件通讯的三种方式  Context  props 深入  组件的生命周期  render-props和高阶组件 1. 组件通讯介绍组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就

react 函数组件怎么限制props类型

05-26

在 React 中，可以使用 PropTypes 库来限制组件 props 的类型。它是一个用于检查传递给组件的 props 是否符合预期的库。具体使用方法如下： 1. 首先需要安装 PropTypes 库，可以使用 npm 或者 yarn 安装： ``` npm install --save prop-types ``` 或者 ``` yarn add prop-types ``` 2. 在组件文件中引入 PropTypes 库： ``` import PropTypes from 'prop-types'; ``` 3. 在组件定义前，使用 propTypes 对象来定义 props 类型： ``` function MyComponent(props) { // ... } MyComponent.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number.isRequired, email: PropTypes.string }; ``` 在上面的例子中，我们定义了三个 props：`name`、`age` 和 `email`。`name` 和 `age` 的类型分别是字符串和数字，并且是必需的，而 `email` 的类型是字符串，但是是可选的。如果传递给组件的 props 不符合定义的类型，PropTypes 会在控制台中输出一个警告信息。注意：在生产环境中，PropTypes 不会被检查，因此不会影响性能。