react 组件的三大属性----state、props、refs

其他 2021-03-26 23:11:17 阅读次数: 0

一、state

state的介绍

state是组件对象最重要的属性, 值是对象(可以包含多个数据)，组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

state的使用

初始化指定

constructor() {
    super()
    this.state = {
        stateName1 : stateValue1,
        stateName2 : stateValue2
    }
}

读取显示

this.state.stateName1


更新状态-->更新界面(自动更新)

this.setState({stateName1 : newValue})


state使用实例

自定义组件, 功能：显示h2标题, 初始文本为: 你喜欢我，点击标题更新为: 我喜欢你

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>07_component_state</title>
</head>
<body>
<div id="example"></div>
 
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
  /*
  需求: 自定义组件, 功能说明如下
    1. 显示h2标题, 初始文本为: 你喜欢我
    2. 点击标题更新为: 我喜欢你
  */
  // 1.定义组件
  class Like extends React.Component {
    constructor(props) { // 初始化状态
      super(props)
      this.state = {
        isLikeMe : false
      }
 
      // 将新增的方法的this强制绑定为组件对象
      this.handleClick = this.handleClick.bind(this) //
    }
    // 这个是重写组件内的方法，所以this代表的是组件对象
    render () {
      // 读取状态，最终要得到isLikeMe的值
      // const isLikeMe = this.state.isLikeMe // 正常写法
      const {isLikeMe} = this.state // 解构赋值的写法（es6的语法）
      return <h2 onClick={this.handleClick}>{isLikeMe?'你喜欢我' : '我喜欢你'}</h2>
    }
 
    // 新添加的方法，内部的this默认不是组件对象，而是undefined
    handleClick () {
      const isLikeMe = !this.state.isLikeMe
      // 更新状态
      this.setState({isLikeMe})
    }
  }
 
  // 2.渲染组件
  ReactDOM.render(<Like/>, document.getElementById('example'))
</script>
</body>
</html>

二、props

Props的介绍

每个组件对象都会有props(properties的简写)属性，组件标签的所有属性都保存在props中，所有组件标签的属性的集合对象

作用：通过标签属性从组件外向组件内传递变化的数据 ，注意: 组件内部不要修改props数据

首先来看一下一个简单的实例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>04_component_props</title>
</head>
<body>
 
<div id="example1"></div>
<div id="example2"></div>
 
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
  // 1.定义组件
  function Person(props) {
    return (
      <ul>
        <li>姓名：{props.name}</li>
        <li>年龄：{props.age}</li>
        <li>性别：{props.sex}</li>
      </ul>
    )
  }
 
  // 2.渲染组件标签
  const p1 = {
    name: 'lina',
    age: 18,
    sex: '女'
  }
  ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>, document.getElementById('example1'))
</script>
</body>
</html>

类型限制和必要性限制

对props中的属性值进行类型限制和必要性限制，使用比较新的react版本，需要引入prop-types.js这个文件

props的数据类型具体查看官方文档：https://react.docschina.org/docs/typechecking-with-proptypes.html

// 对props中的属性值进行类型限制和必要性限制
Person.propTypes = {
    name: PropTypes.string.isRequired, // name属性的值必须是字符串并且必须要传，如果有默认值就不会报错
    age: PropTypes.number.isRequired
}

扩展属性: 将对象的所有属性通过props传递

// ...的作用：一种是打包（就是将一组数据打包到一起），一种是解包（）
ReactDOM.render(<Person {...p1}/>, document.getElementById('example1'))

默认属性值

如果某个props的值设置了默认值，并且设置了必要性限制，那么即使没有传递这个props也不会报错

// 指定属性的默认值
Person.defaultProps = {
  age: 18,
  sex: '男'
}

组件的构造函数

function Person(props) {
    return (
      <ul>
        <li>姓名：{props.name}</li>
        <li>年龄：{props.age}</li>
        <li>性别：{props.sex}</li>
      </ul>
    )
  }

Props的使用场景（父子组件之间通信）

Props的使用场景—父组件向子组件传递数据

需求: 自定义用来显示一个人员信息的组件

如果性别没有指定, 默认为男
如果年龄没有指定, 默认为18

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>04_component_props</title>
</head>
<body>
 
<div id="example1"></div>
<div id="example2"></div>
 
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
  // 1.定义组件
//  function Person(props) {
//    return (
//      <ul>
//        <li>姓名：{props.name}</li>
//        <li>年龄：{props.age}</li>
//        <li>性别：{props.sex}</li>
//      </ul>
//    )
//  }
 
  class Person extends React.Component {
    render () {
      return (
        <ul>
          <li>姓名：{this.props.name}</li>
          <li>年龄：{this.props.age}</li>
          <li>性别：{this.props.sex}</li>
        </ul>
      )
    }
  }
 
  // 指定属性的默认值
  Person.defaultProps = {
    age: 18,
    sex: '男'
  }
 
  // 对props中的属性值进行类型限制和必要性限制
  Person.propTypes = {
    name: PropTypes.string.isRequired, // name属性的值必须是字符串并且必须要传
    age: PropTypes.number.isRequired
  }
 
  // 2.渲染组件标签
  const p1 = {
    name: 'lina',
    age: 18,
    sex: '女'
  }
  const p2 = {
    name: 'jack',
    age: 13,
    sex: '男'
  }
 
  // ...的作用：一种是打包（就是将一组数据打包到一起），一种是解包（）
  ReactDOM.render(<Person {...p1}/>, document.getElementById('example1'))
  ReactDOM.render(<Person name={p2.name} age={p2.age}/>, document.getElementById('example2'))
</script>
</body>
</html>

上面组件没有状态（state），可以直接使用工厂函数的方式创建组件

Props的使用场景—子组件向父组件传递数据（实际传递的是一个自定义事件）

需求将子组件中的size状态值传递给父组件，是由子组件触发传递的

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>07_component_refs</title>
</head>
<body>
<br>
<div id="example"></div>
 
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
 
<script type="text/babel">
    class Fathercomponent extends React.Component {
        state = {
            size: 0
        }
        constructor (props) {
            super (props)
        }
 
        getSize = (size) => {
            this.setState({
                size: size
            })
        }
 
        render () {
            return (
                <div>
                    <div>子组件的size为：{this.state.size}</div>
                    <Childcomponent getSize={this.getSize}/>
                </div>
            )
        }
    }
 
    class Childcomponent extends React.Component {
        static propTypes = {
            getSize: PropTypes.func.isRequired
        }
        state = {
            size: 80
        }
        constructor (props) {
            super(props)
        }
        transmitSize = () => {
            let size = this.state.size
            this.props.getSize(size)
        }
        render () {
            return (
                <div onClick={this.transmitSize}>把我的size传给父组件</div>
            )
        }
    }
 
    // 2. 渲染组件标签
    ReactDOM.render(<Fathercomponent />, document.getElementById('example'))
</script>
</body>
</html>

面试题：请区别一下组件的props和state属性

  1. state: 组件自身内部可变化的数据
  2. props: 从组件外部向组件内部传递数据, 组件内部只读不修改

三、refs

ref 简介

React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例；需要区分一下，ReactDOM.render()渲染组件时返回的是组件实例；而渲染dom元素时，返回是具体的dom节点。

ref可以挂到任何组件上，可以挂到组件上也可以是dom元素上；二者不同：挂到组件（这里组件指的是有状态组件）上的ref表示对组件实例的引用，而挂载到dom元素上时表示具体的dom元素节点。

ref是React提供的用来操纵React组件实例或者DOM元素的接口，通过ref获取组件内容特定标签对象, 进行读取其相关数据。有些场景需要获取某一个真实的DOM元素来交互，这时候就要用到React的refs属性

ref挂载到DOM元素上
挂载到dom元素上时表示具体的dom元素节点

<input type="text" ref="content"/> // 绑定ref
 const input = this.refs.content  // 获取ref

ref在input元素中的使用
上面这个写法官方不建议这么写，可以使用下面这种，回调函数在组件初始化渲染完或卸载时自动调用，在组件中可以通过this.msgInput来得到对应的真实DOM元素

<input type="text" ref={input => this.msgInput = input}/> // 绑定ref

alert(this.msgInput.value) // 获取ref

下面是ref在input元素上使用的实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>07_component_refs</title>
</head>
<body>
<br>
<div id="example"></div>
 
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
 
<script type="text/babel">
    // 1. 定义组件
    class Mycomponent extends React.Component {
        constructor (props) {
            super (props)
            this.showInput = this.showInput.bind(this)
        }
        showInput (e) {
            e.preventDefault();
            console.log(this.msgInput) // 获取到绑定的input元素
            console.log(this.msgInput.value)
            console.log(this.refs.schoolInput) // 获取到绑定的input元素
            console.log(this.refs.schoolInput.value)
        }
 
        handleBlur = (e) => {
            console.log(e.target.value) // 获取值，当触发事件绑定在自己身上的时候，使用这种方式获取值
        }
 
        render () {
            return (
                <div>
                    <input type="text" ref={input => this.msgInput = input}/>&nbsp;
                    <input type="text" ref="schoolInput"/><br></br>
                    <button onClick={this.showInput}>提示输入</button>&nbsp;
                    <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/><br></br>
                </div>
            )
        }
    }
 
    // 2. 渲染组件标签
    ReactDOM.render(<Mycomponent/>, document.getElementById('example'))
</script>
</body>
</html>

ref在其他元素中的使用

目前还没有遇到有必要使用ref的情况

ref挂载到组件上
ref属性可以设置为一个回调函数，这也是官方强烈推荐的用法；这个函数执行的时机为：

  • 组件被挂载后，回调函数被立即执行，回调函数的参数为该组件的具体实例。
  • 组件被卸载或者原有的ref属性本身发生变化时，回调也会被立即执行，此时回调函数参数为null，以确保内存泄露。

这种方式主要用于获取子元素中的state，实例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>07_component_refs</title>
</head>
<body>
<br>
<div id="example"></div>
 
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
 
<script type="text/babel">
    class Fathercomponent extends React.Component {
        state = {
            size: 0
        }
        constructor (props) {
            super (props)
        }
 
        FaterchangeSize = () => {
            let size = this.refs.reftest.getSize() // 或者this.refs['reftest'].getSize()
            this.setState({
                size: size
            })
        }
        render () {
            return (
                <div>
                    <div onClick={this.FaterchangeSize}>我是size的父亲，点击获取我儿子的size为：{this.state.size}</div>
                    <Childcomponent ref="reftest"/>
                </div>
            )
        }
    }
 
    class Childcomponent extends React.Component {
        state = {
            size: 80
        }
        constructor (props) {
            super(props)
        }
        getSize(){
            return this.state.size
        }
        changeSize = () => {
            this.setState({
                size: this.state.size + 10
            })
        }
        render () {
            return (
                <div onClick={this.changeSize}>点击我改变我的size: {this.state.size}</div>
            )
        }
    }
 
    // 2. 渲染组件标签
    ReactDOM.render(<Fathercomponent />, document.getElementById('example'))
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_38131507/article/details/104942580
今日推荐
周排行
unity 内存管理**标记 实时更新
微信返回时页面很卡或者页面跳转有问题
正则介绍以及grep
(转)editText圆角边框
模块化物料清单
js去掉数组中重复的元素
小程序Promise不支持finally解决方案
输入一颗二叉树的根节点，求二叉树的深度
POJ 2800:垂直直方图
Firefox 71 发布，具有画中画支持及更多功能
每日归档
更多
2025-02-05(0)
2025-02-04(0)
2025-02-03(0)
2025-02-02(0)
2025-02-01(0)
2025-01-31(0)
2025-01-30(0)
2025-01-29(0)
2025-01-28(0)
2025-01-27(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022