浅谈 react组件和组件属性组件状态 (第三节)

最新推荐文章于 2024-05-20 16:37:44 发布
原创 最新推荐文章于 2024-05-20 16:37:44 发布 · 228 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react #javascript

本文详细介绍了React组件的概念，包括函数组件和类组件的创建方式，强调了组件属性的使用和命名规范。同时，讨论了组件状态的重要性，指出状态只存在于类组件中，并解释了如何正确地改变状态。最后，阐述了props和state在组件数据管理中的角色，以及React中的数据流向原则。

组件和组件属性

组件：包含内容、样式和功能的UI单元

创建一个组件

特别注意：组件的名称首字母必须大写

  1. 函数组件

返回一个React元素
在这里插入图片描述

  1. 类组件

必须继承React.Component

必须提供render函数，用于渲染组件
在这里插入图片描述

组件的属性

  1. 对于函数组件，属性会作为一个对象的属性，传递给函数的参数
  2. 对于类组件，属性会作为一个对象的属性，传递给构造函数的参数

注意：组件的属性，应该使用小驼峰命名法

组件无法改变自身的属性。

之前学习的React元素，本质上，就是一个组件（内置组件）

React中的哲学：数据属于谁，谁才有权力改动

React中的数据，自顶而下流动

组件状态

组件状态：组件可以自行维护的数据

组件状态仅在类组件中有效

状态（state），本质上是类组件的一个属性，是一个对象

状态初始化
在这里插入图片描述

状态的变化
在这里插入图片描述

不能直接改变状态：因为React无法监控到状态发生了变化

必须使用this.setState({})改变状态

一旦调用了this.setState，会导致当前组件重新渲染

组件中的数据

  1. props：该数据是由组件的使用者传递的数据，所有权不属于组件自身，因此组件无法改变该数组
  2. state：该数组是由组件自身创建的，所有权属于组件自身，因此组件有权改变该数据
获得任何React组件的位置和大小的属性
08-11
获得任何React组件的位置和大小的属性
浅谈React中组件逻辑复用的那些事儿
10-15
Mixin是一种向类中注入额外功能的方式，可以将mixin中的方法和属性合并到React组件中，从而达到复用逻辑的目的。然而，Mixin的使用也伴随着一些问题，比如隐式的依赖关系、可能导致的命名冲突等。 **Mixin的使用...
React组件的属性和状态
qq_38123697的博客
11-12 264
React组件的属性和状态 属性（定义完不可更改）：数据传递的载体 属性和状态是react中数据传递的载体 组件接收属性值的传递： this.props.属性名 属性添加：<Header title=“留言” />//title为添加的属性 展开式属性添加（只适用于添加对象属性）：<Header {…obj}/>//obj为添加的属性 **接收：**在组件内{this.pr...
React 组件属性
火星基地
03-30 345
1. state <div id="test"></div> <script type="text/babel"> //1.创建组件 class Weather extends React.Component { //构造器调用几次？ ———— 1次 constructor(props) { console.log('constructor'); super(props); //初始化状态 this.state = { isHot: f
react://通过refs 属性 获取 组件 value
hyd19931002的博客
04-24 2042
//通过refs 属性 获取 组件 value class Test extends React.Component{ render(){ return ( <div> <input type="text" value='555' ref='a'></input> <input type="button" onClick={(e) => ...
React：组件的状态和属性
黑猫中校的燃烧战场
12-28 944
ES6中react的属性和状态---https://babeljs.io/blog/2015/06/07/react-on-es6-plus 组件把状态与结果一一对应起来，组件中有state与prop（状态与属性）。     1、 属性是由父组件传递给子组件的     2、状态是子组件内部维护的数据，当状态发生变化的同时，组件也会进行更新。当状态发生转换时会触发不同的钩子函数，从而让开发者有
浅谈React Native 中组件的生命周期
08-29
浅谈React Native 中组件的生命周期 React Native 中的组件生命周期是指组件从创建到销毁的整个过程。组件生命周期可以分为三个阶段：组件第一次绘制阶段、组件在运行和交互阶段、组件卸载消亡的阶段。每个阶段都有...
浅谈React + Webpack 构建打包优化
08-28
浅谈React + Webpack 构建打包优化 React + Webpack 构建打包优化是一种常见的前端开发技术，旨在提高构建速度和减少打包后的文件体积。本篇文章将从两个方面介绍 React + Webpack 构建打包优化：React 代码优化和 ...
浅谈react.js 之 批量添加与删除功能
11-27
在React.js中实现批量添加与删除功能是一项常见的需求，尤其在内容管理系统（CMS）中，如文件上传或图片管理等场景。...同时，对于第三方服务如七牛云的集成，需要熟悉其API并将其融入到React组件中。
react三大重要属性 — state、props、refs
halo1416的博客
04-19 647
前提：请注意查看实例代码中的注释哦 一、属性之state 实例： <script type="text/babel"> /* 需求: 自定义组件, 功能说明如下 1. 显示h2标题, 初始文本为: AAAA 2. 点击标题更新为: BBBB */ class Like extends React.Component { constr...
react forwardRef获取子组件属性，方法
wandoumm的博客
12-08 541
react forwardRef获取子组件属性，方法
React学习三 —— react组件的三大属性（state、props、refs）
qq_51574759的博客
10-06 1174
React组件有很多属性，在其中有三个属性最为核心和重要： - state - props - refs state让你可以通过数据驱动视图，让视图自动根据数据的改变而改变。 props可以提高组件的灵活性，通过外界传值让组件根据用户特性而呈现不同的视图。 refs能够减少用户对DOM的直接操作，而可以通过获取代理节点而提高开发效率和页面性能。
React-组件三大核心属性: state、props、refs
weixin_53412458的博客
02-28 1327
1、state state是组件对象最重要的属性, 值是对象.React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。 例子： //1.创建组件 class Weather extends React.Component{ //初始化状态 state = {isHot:false,wind:'微风'
react demo12 (获取组件属性状态this.state)
一只程序媛
05-06 1609
表单监控，this.state实战练习 需求：定义一个组件，将用户在输入框内输入的内容进行实时显示 分析：组件与用户交换时，存在状态的变化，即输入框的值<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/rea
React组件的三大属性
Taki_Sakura的博客
12-12 537
一、state class MyComponent extends React.Component { constructor(props) { // 固定写法 super(props) // 初始化state this.state = { flag: true, manner: '你是对的' } // bind() 返回一个被指定当前this的新函数 this.cha
React 组件三大属性
YuLong的博客
09-09 670
文章目录React 三大属性state 属性props 属性refs 属性 React 三大属性 state 属性 在React框架中定义了一个状态(State) 概念， 并通过状态(State)来实现React组件的状态机特性。 “状态机” 特性： 就是指 组件通过与用户的交互， 更新实现不同的状态，通过渲染UI保证用户界面和数据一致性 (不需要操作DOM) 应用场景：组件的内容需要根据数据的刷新而刷新 创建方法： 在类的构造函数中定义 this.state={ 属性名：属性值 … } t
React学习——组件三大属性
Memorial*的博客
07-08 428
1.state state是组件对象最重要的属性, 值是对象(可以包含多个数据) 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 案例： 需求：自定义组件，功能如下： 1.显示h2标题，初始文本为：你喜欢我 2.点击标题更新为：我喜欢你 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test&
react组件实例三大属性
最新发布
srr0725的博客
05-20 1606
react组件实例三大属性——state, props, refs简单介绍
React学习计划-React16--React基础（二）组件与组件的3大核心属性state、props、ref和事件处理
我愿化作繁星
12-20 943
函数式组件（适用于【简单组件】的定义）类组件（适用于【复杂组件】的定义）组件内的标签可以定义。
深入浅出React组件化开发实践指南
3. React组件的分类： 在React中，组件可以分为两大类：类组件（Class Components）和函数组件（Function Components）。类组件使用ES6的class语法定义，而函数组件是使用JavaScript的函数来定义的。随着React的发展...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小李学软件

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值