深入理解React三大核心属性

2024-04-02 19:04:59 436人浏览独家记忆

摘要

目录1、State属性2、Props 属性3、Refs 属性（1）字符串形式（2）函数回调形式（3）createRef创建ref容器1、State 属

1、State 属性

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

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

import React from 'react ';
import ReactDom from 'react-dom';
 
 
class Student extends React.Component{
    constructor() {
        super();
        this.state={
            name:'花少北'
        }
    }
    render() {
        this.state.name='老番茄';
        return <h4>{this.state.name}</h4>
    }
}
ReactDOM.render(<Student/>,document.getElementById('root'))

在React中，一个组件中要读取当前状态需要访问 this.state, 而 state 是可以被修改的，但是，要更新数据直接给 this.state 赋值是不可行的，必须要使用 setState（）

 this.setState() {
        name:'某幻'
    }

（1）setState 不会立刻改变React组件中state的值.

（2）setState 通过触发一次组件的更新来引发重绘.

（3）多次 setState 函数调用产生的效果会合并。

2、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  Student(props){
    return <p>{props.name} {props.address}</p>
}
 
const  Stu={
    name:'某幻',
        address:'青岛'
}
 
ReactDOM.render(<Student{...Stu} ></Student>,document.getElementById('root'))

函数组件：

import React from 'react ';
import ReactDom from 'react-dom';
class Student extends React.Component{
    render() {
     return(
         <p>{this.props.name} {this.props.address}</p>
     )
    }
}
const  Stu={
    name:'某幻',
        address:'青岛'
}
ReactDOM.render(<Student{...Stu} ></Student>,document.getElementById('root'))

props 属性和 state 属性的区别

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

3、Refs 属性

定义：组件内的标签可以定义ref属性类标识自己，有点类似与js中的id

React文档中再三强调，请不要过度使用refs，所以当我们可以用dom原生对象解决时，尽量不要使用refs 依照之前的写法，首先是给出类组件和函数组件中refs的写法

ref 的三种形式

（1）字符串形式

【官方不推荐】

class App extends React.Component{
    changeInput = ()=>{
        const {input} = this.refs
    }
    render() {
        return (
            <div>
                <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={"input"}/>
            </div>
        )
    }
}

（2）函数回调形式

class App extends React.Component{
    changeInput = ()=>{
        console.log(this.inputRef);
    }
    render() {
        return (
            <div>
                <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={(el)=>{this.inputRef = el}}/>
            </div>
        )
    }
}

（3）createRef 创建 ref 容器

【目前官方最推荐的一种】

class App extends React.Component{
    inputRef = React.createRef()
    changeInput = ()=>{
        console.log(this.inputRef.current);
    }
    render() {
        return (
            <div>
                <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={this.inputRef}/>
            </div>
        )
    }
}

函数组件的写法

function App(){
    const inputRef = useRef("")
    return (
        <div>
            <input type="text" placeholder={"please input your value"} ref={inputRef}/>
        </div>
    )
}

到此这篇关于深入理解React 三大核心属性的文章就介绍到这了,更多相关React 核心属性内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 深入理解React三大核心属性

本文链接: https://www.lsjlt.com/news/139857.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

深入理解React三大核心属性

目录1、State属性2、Props 属性3、Refs 属性（1）字符串形式（2）函数回调形式（3）createRef创建ref容器1、State 属...

99+

2024-04-02
React的三大核心属性是什么

今天小编给大家分享一下React的三大核心属性是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。1、State 属性Rea...

99+

2023-06-29
React组件三大核心属性StatepropsRefs介绍

目录1.statesetState2.props1.传递单个属性2.批量传递属性对props进行限制对props设置默认值state与props的区别3.ref1.state sta...

99+

2023-02-15

React state props refs React组件属性
React组件封装中三大核心属性详细介绍

目录1、介绍2、state概念演示3、props概念props与state区别4、refs概念refs种类5、父子组件什么是父子组件父子组件之间传值1、介绍 React组件中默认封装...

99+

2024-04-02
深入理解React Native核心原理(React Native的桥接（Bridge)

在这篇文章之前我们假设你已经了解了React Native的基础知识，我们会重点关注当native和JavaScript进行信息交流时的内部运行原理。主线程在开始之前，我们需要知...

99+

2024-04-02
React框架核心原理全面深入解析

目录前言第一章基本概念第二章 createElement 函数第三章 render函数第四章 Concurrent Mode第五章 Fibers第六章 Render and Com...

99+

2022-11-16

React框架的原理 React框架核心
React中Redux核心原理深入分析

目录一、Redux是什么二、Redux的核心思想三、Redux中间件原理四、手写一个Redux总结一、Redux是什么众所周知，Redux最早运用于React框架中，是一个全局状态...

99+

2022-11-16

React使用Redux React Redux用法
如何深入理解React的ref 属性

目录概述1. Refs 对象的创建1.1 React.createRef()1.2 React.useRef(initialValue)2. ref 属性的使用2.1 为原生DOM元...

99+

2024-04-02
SpringIOC与DI核心深入理解

目录深入理解IOC思想DI&IOC深入理解IOC思想 spring本质就在于将对象全部交由给spring容器创建和管理，由容器控制对象的整个生命周期、核心就是IOC控制反转和...

99+

2023-02-20

Spring IOC与DI Spring DI Spring IOC
深入解析Golang语言的核心特性

Golang（又称Go）是一种由Google开发的开源编程语言，设计用于处理大规模项目，注重简洁、高效和易于编写的特性。本文将深入解析Golang语言的核心特性，包括并发编程、垃圾回收...

99+

2024-02-28

编程语言特征 golang详解垃圾回收器
React的三大属性是什么

这篇文章主要为大家展示了“React的三大属性是什么”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“React的三大属性是什么”这篇文章吧。React三大属性props组件是封闭的，接收外部数据应...

99+

2023-06-29
css四大核心属性是什么

这篇文章主要介绍了css四大核心属性是什么，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。四大核心属性CSS 动画提供了一种相对简单的方法来在大量属性之间平滑过渡。良好的动画界...

99+

2023-06-27
ReactHooks核心原理深入分析讲解

目录Hooks闭包开始动手实现将useState应用到组件中过期闭包模块模式实现useEffect支持多个HooksCustom Hooks重新理解Hooks规则React Hook...

99+

2022-12-17

React Hooks React Hooks原理
React三大属性之Refs的使用详解

目录类组件函数组件面试常问：React中的refs作用是什么？ refs是React中用来取得某个JSX组件或者某个DOM中的一些状态值的时候，用来获取节点的方法。在React官方...

99+

2024-04-02
React三大属性之props的使用详解

目录类组件函数组件props是只读的组件间通信上期讲了state，接下来讲讲props。props功能在于组件间通信（父子组件），首先说说在各种组件中的用法：类组件 //父...

99+

2024-04-02
React 三大属性之state的使用详解

目录类组件函数组件setState的坑 React中很多地方需要用到数据，这在React中被叫做状态，我们需要一个专门管理状态的方法，于是state相关的就诞生了。state应该被要...

99+

2024-04-02
React三大属性之props怎么用

这篇文章主要介绍React三大属性之props怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！props功能在于组件间通信（父子组件），首先说说在各种组件中的用法：类组件//父组件传值class Fat...

99+

2023-06-14
深入理解Netty核心类及其作用

目录MessageToByteEncoderByteToMessageDecoderReplayingDecoderMessageToMessageEncoderMessageToM...

99+

2023-05-17

Netty核心类 Netty核心组件
深入了解numpy库的核心特性和优势

深入了解numpy库的核心特性和优势，需要具体代码示例 python是一种开源的高级编程语言，numpy是python的一个重要的扩展库。numpy是Numerical Python的缩写，它提供了一个强大的多维数组对象以及相应...

99+

2024-01-19

Numpy 优势核心特性
React组件三大属性之state,props,refs

目录1.1基本理解和使用1.1.1 使用React开发者工具调试1.1.2 定义组件的方式1.1.3 注意1.1.4 渲染类组件标签的基本流程1.2 组件实例的三大核心属性之一：st...

99+

2024-04-02