脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React组件的数据挂载

React组件的数据挂载实现方式

 更新时间：2025年07月29日 09:02:56   作者：来自万古的忧伤  
React中state为组件内部可变数据,通过setState更新；props为外部传入的不可变参数,两者均可触发渲染,但state由组件维护,props由父组件控制,列表需用key优化性能,dangerouslySetInnerHTML用于内联HTML

1、状态(state)

状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同

(1) 定义state

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
    state = {name: 'React', isLiked: false}

    render() {
        return (
            <div><h1>欢迎来到{this.state.name}的世界</h1>
                <button> {this.state.isLiked ? '❤取消' : '🖤收藏'}
                </button>
            </div>)
    }
}

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

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
    constructor() {
        super()
        this.state = {name: 'React', isLiked: false}
    }

    render() {
        return (<div><h1>欢迎来到{this.state.name}的世界</h1>
            <button> {this.state.isLiked ? '❤取消' : '🖤收藏'}
            </button>
        </div>)
    }
}

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

this.state 是纯js对象,在vue中，data属性是利用 Object.defineProperty 处理过的，更改data的数据的时候会触发数据的 getter 和 setter ，但是React中没有做这样的处理，如果直接更改的话，react是无法得知的，所以，需要使用特殊的更改状态的方法 setState 。

(2) setState

isLiked 存放在实例的 state 对象当中，组件的 render 函数内，会根据组件的 state 的中的 isLiked 不同显示“取消”或“收藏”内容。

  • 下面给 button 加上了点击的事件监听。
import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
    constructor() {
        super()
        this.state = {
            name: 'React',
            isLiked: false
        }
    }

    handleBtnClick = () => {
        this.setState({
            isLiked: !this.state.isLiked
        })
    }

    render() {
        return (
            <div>
                <h1>欢迎来到{this.state.name}的世界</h1>
                <button onClick={this.handleBtnClick}>
                    {
                        this.state.isLiked ? '❤取消' : '🖤收藏'
                    }
                </button>
            </div>
        )
    }
}

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

setState 有两个参数

第一个参数可以是对象，也可以是方法return一个对象，我们把这个参数叫做 updater

  • 参数是对
this.setState({
  isLiked: !this.state.isLiked
})
  • 参数是方法
this.setState((prevState, props) => {
  return {
    isLiked: !prevState.isLiked
  }
})
  • 注意的是这个方法接收两个参数，第一个是上一次的state, 第二个是props setState 是异步的，所以想要获取到最新的state，没有办法获取，就有了第二个参数，这是一个可选的回调函
this.setState((prevState, props) => {
  return {
    isLiked: !prevState.isLiked
  }
}, () => {
  console.log('回调里的',this.state.isLiked)
})
console.log('setState外部的',this.state.isLiked)

2、属性(props)

props 是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props 属性是描述性质、特点的，组件自己不能随意更改。

之前的组件代码里面有 props 的简单使用，总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值。通过箭头函数创建的组件，需要通过函数的参数来接收

props :

(1) 在组件上通过key=value 写属性,通过this.props获取属性,这样组件的可复用性提高了。

(2) 注意在传参数时候，如果写成isShow=“true” 那么这是一个字符串 如果写成isShow={true} 这个是布尔值

(3) {…对象} 展开赋值

(4) 默认属性值

*.defaultProps = {
}
static defaultProps = {
  myname:"默认的myname",
  myshow:true
}

(5) prop-types 属性验证

import propTypes from "prop-types";

*.propTypes = {
    name: propTypes.string,
    age: propTypes.number
}
static propTypes = {
    myname: propTypes.string,
    myshow: propTypes.bool
}

3、属性vs状态

相似点：都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）

不同点：

  1. 属性能从父组件获取，状态不能
  2. 属性可以由父组件修改，状态不能
  3. 属性能在内部设置默认值，状态也可以，设置方式不一样
  4. 属性不在组件内部修改，状态要在组件内部修改
  5. 属性能设置子组件初始值，状态不可以
  6. 属性可以修改子组件的值，状态不可以

state 的主要作用是用于组件保存、控制、修改自己的可变状态。 state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。

state 中状态可以通过 this.setState 方法进行更新， setState 会导致组件的重新渲染。

props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props ，否则组件的 props 永远保持不变。

没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组

4、渲染数据

  • 条件渲染
{
condition ? '渲染列表的代码' : '空空如也'
}
  • 列表渲染
// 数据
const people = [{
    id: 1,
    name: 'Leo',
    age: 35
}, {
    id: 2,
    name: 'XiaoMing',
    age: 16
}]
// 渲染列表
{
    people.map(person => {
        return (
            <dl key={person.id}>
                <dt>{person.name}</dt>
                <dd>age: {person.age}</dd>
            </dl>
        )
    })
}

React的高效依赖于所谓的 Virtual-DOM，尽量不碰 DOM。

对于列表元素来说会有一个问题：元素可能会在一个列表中改变位置。要实现这个操作，只需要交换一下 DOM 位置就行了，但是React并不知道其实我们只是改变了元素的位置，所以它会重新渲染后面两个元素（再执行 Virtual-DOM ），这样会大大增加 DOM 操作。

但如果给每个元素加上唯一的标识，React 就可以知道这两个元素只是交换了位置，这个标识就是 key ，这个 key 必须是每个元素唯一的标识dangerouslySetInnerHTML

  • 对于富文本创建的内容，后台拿到的数据是
content = "<p>React.js是一个构建UI的库</p>"

处于安全的原因，React当中所有表达式的内容会被转义，如果直接输入，标签会被当成文本。

  • 这时候就需要使用 dangerouslySetHTML 属性，它允许我们动态设置 innerHTML
import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
    constructor() {
        super()
        this.state = {
            content: "<p>React.js是一个构建UI的库</p>"
        }
    }

    render() {
        return (
            <div
                // 注意这里是两个下下划线 __html
                dangerouslySetInnerHTML={{__html: this.state.content}}
            />
        )
    }
}

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • react redux中如何获取store数据并将数据渲染出来

    react redux中如何获取store数据并将数据渲染出来

    这篇文章主要介绍了react redux中如何获取store数据并将数据渲染出来，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • React如何利用Antd的Form组件实现表单功能详解

    React如何利用Antd的Form组件实现表单功能详解

    这篇文章主要给大家介绍了关于React如何利用Antd的Form组件实现表单功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 浅谈React组件在什么情况下会重新渲染

    浅谈React组件在什么情况下会重新渲染

    当我们使用React编写组件时,组件的重新渲染是一个重要的概念,本文主要介绍了React组件在什么情况下会重新渲染,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • React Hooks如何主动更新Hooks组件

    React Hooks如何主动更新Hooks组件

    这篇文章主要介绍了React Hooks如何主动更新Hooks组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • React解析html 标签的方法

    React解析html 标签的方法

    在React中,解析HTML标签通常是使用JSX（JavaScript XML）语法的一部分,这篇文章主要介绍了React 用来解析html 标签的方法,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • React二维数组的几种声明和使用过程

    React二维数组的几种声明和使用过程

    React二维数组声明需注意结构与值的可变性,正确方法包括直接赋值或动态初始化,避免使用const map=[[]]导致长度固定,动态扩展时应先定义一维数组再添加元素,确保数组大小可变
    2025-07-07
  • react-navigation之动态修改title的内容

    react-navigation之动态修改title的内容

    这篇文章主要介绍了react-navigation之动态修改title的内容，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 在react项目中使用antd的form组件,动态设置input框的值

    在react项目中使用antd的form组件,动态设置input框的值

    这篇文章主要介绍了在react项目中使用antd的form组件,动态设置input框的值，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • react类标签的生命周期详解

    react类标签的生命周期详解

    在React类组件中,生命周期方法是非常重要的概念,它们允许我们在组件的不同阶段执行代码,这包括在组件挂载、更新以及卸载时执行的生命周期方法,本文通过介绍React类组件中的生命周期方法,旨在帮助开发者深入理解组件的生命周期管理
    2024-11-11
  • react中value与defaultValue的区别及说明

    react中value与defaultValue的区别及说明

    这篇文章主要介绍了react中value与defaultValue的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05

最新评论