• React —— React中组件的三大属性（state,props,ref)

    文章目录

    • 前言
    • 一、 State(状态)
      • 1.1  State的书写形式
      • 1.2  绑定事件方法
      • 1.3  修改state值
      • 1.4 小案例
    • 二、props
      • 2.1 基础用法
      • 2.2 批量传递参数
    • 三、ref的使用
      • 3.1 字符串形式的ref
      • 3.2 回调函数下ref
      • 3.3 createRef 创建ref容器
    • 总结

    前言

    前面我们已经介绍了React中组件的相关知识，这里就以类式组件为例，讲解组件中的三大属性。

    一、 State(状态)

    概念：state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合)，组件被称为`状态机`,通过更新组件的state来更新对应的页面显示(重新渲染组件)，有state称为复杂组件。

    1.1  State的书写形式

    State 的使用对象形式(key,value)；

    例如：
     

    1. state ={
    2.  
    3. a: 10
    4.  
    5. }

    1.2  绑定事件方法

     

     'javascript:;' onClick={demo} >已关注

    说明：

    • ·onclick 变为 onClick。
    • ·{函数名}返回值给click，加()就会直接调用。

    1.3  修改state值

    必须要使用  setState 方法修改state中的值

    1. demo( ){
    2.  
    3.     this.setState({isflag:!this.state.isflag})
    4.  
    5. }
    6.  
    7.  }
    8.  
    9.  ReactDOM.render(<MyClass/>,document.getElementById('hello'));

    说明：

    • ·bind会生成一个新的方法 并传对象 改变this的指向
    • ·必须使用setState 修改才有效，修改内容为合并。有值得修改没有的不动

    1.4 小案例

    打铁需趁热，下面通过一个小案例和大家讲述state的具体用法以及上述小知识点的应用吧！

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>setState的用法title>
    9.     <style>
    10.         button{
    11.             width: 80px;
    12.             height: 40px;
    13.             border-radius: 10px;
    14.             border: none;
    15.             border: 1px solid #333;
    16.             font-size: 16px;
    17.         }
    18.         span{
    19.             color: red;
    20.             font-size:  24px;
    21.             font-style:italic;
    22.             margin-left: 10px;
    23.         }
    24.         .yes{
    25.             background: red;
    26.         }
    27.         .no{
    28.             background: green;
    29.         }
    30.     style>
    31. head>
    32.  
    33. <body>
    34.     <div id="root">div>
    35.  
    36.     <script src="../JS/react.development.js">script>
    37.     <script src="../JS//react-dom.development.js">script>
    38.     <script src="../JS/babel.min.js">script>
    39.  
    40.     <script type="text/babel">
    41.         // 利用类式组件
    42.         class Person extends React.Component {
    43.             // 类式组件中用来存储数据的地方，类似vue中的data,
    44.             // 因为数据可以多种，所以采用对象的形式，
    45.             // 又因为是在一个类中，所以很多书写习惯类似在定义类
    46.             state ={
    47.                 flag: true,
    48.                 count: 1
    49.             }
    50.             // 因为是类，所以还是按照类中函数的书写形式，但要注意写成箭头函数形式
    51.             clickNumber = ( )=>{
    52.                 // 要改变state中的数据，需要使用setState方法
    53.                 // 但也有可能改变的数据较多，所以可以采用对象的形式，
    54.                 // 这里的修改是合并修改，即有该属性就改变该属性的值，若没有则不改变
    55.                this.setState({flag: !this.state.flag,
    56.             count: ++this.state.count})
    57.             }
    58.             render() {
    59.                 return (
    60.                     <div>
    61.                         <button className={this.state.flag?'yes':'no'} onClick={this.clickNumber}>{this.state.flag ? '已点击':'未点击'}button>
    62.                         <p>点击次数为:<span>{this.state.count}span>p>
    63.                     div>
    64.                 )
    65.             }
    66.         }
    67.         // 转为真实dom到页面
    68.         ReactDOM.render(<Person />, document.getElementById('root'));
    69.     script>
    70.  
    71. body>
    72.  
    73. html>

    二、props

    2.1 基础用法

    • 每个组件对象都会有props(properties的简写)属性。
    • 组件标签的所有属性都保存在props中。
    • props 是不可变的，只能通过 props 来传递数据。

    具体使用方式如下：

    2.2 批量传递参数

    1. let p1 = {name:'张三',age:29};
    2.  
    3. ReactDOM.render(<Person {...p1}/>,document.getElementById('hello'));

    三、ref的使用

    定义：组件内的标签可以定义ref来标识自己。

    3.1 字符串形式的ref 

    1.

    3.2 回调函数下ref

    1.

    3.3 createRef 创建ref容器

    1.

    总结

    以上就是今日的分享，有vue基础的同学在学react会发现有很多相同之处但react和vue的语法习惯还说不尽相同，所以对于和我一样的初学者还说要多写多练多思考，千万不要眼高手低哦！

    最后依旧诚挚祝福屏幕前的你健康快乐，平安幸福！

  • 相关阅读:
    腾讯云发布智慧员工管理方案，支持组织360度协作
    基于SSM的大学校医管理系统
    Matlab 对连续时间信号的运算
    代码整洁之道-读书笔记之函数
    DataGridView的下拉DataGridViewComboBoxColumn的数据绑定问题
    【报错】在浏览器输入localhost为什么启动的是Microsoft的IIS windows首页？
    [异构图-论文阅读]Heterogeneous Graph Transformer
    【Camera KMD ISP SubSystem笔记】CAM SYNC与DRQ③
    689. 三个无重叠子数组的最大和
    谷歌Chrome庆祝15周年，推出全新设计！了解最新信息！
  • 原文地址：https://blog.csdn.net/Bonsoir777/article/details/127568414