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
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022