React 组件的三大属性

最新推荐文章于 2023-08-08 13:46:45 发布

玳宸

最新推荐文章于 2023-08-08 13:46:45 发布

阅读量132

点赞数

分类专栏： # React

本文链接：https://blog.csdn.net/zeroheitao/article/details/117037466

版权

React 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

1、state

理解：

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

编码操作：

初始化状态:

  constructor (props) {
    super(props)
    this.state = {
      stateProp1 : value1,
      stateProp2 : value2
    }
  }

读取某个状态值

  this.state.statePropertyName

更新状态---->组件界面更新

  this.setState({
    stateProp1 : value1,
    stateProp2 : value2
  })

实例：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>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. 点击标题更新为: 我喜欢你
  */
  class Like extends React.Component {
    constructor (props) {
      super(props)
      // 初始化状态
      this.state = {
        isLikeMe: true
      }
      // 绑定this为组件对象
      this.change = this.change.bind(this)
    }
    change () {
      // 更新状态: this.setState()
      // this.state.isLikeMe = !this.state.isLikeMe // 不能更新更新某个状态
      this.setState({
        isLikeMe: !this.state.isLikeMe
      })
    }
    render () {
      console.log('render()')
      const text = this.state.isLikeMe ? '你喜欢我' : '我喜欢你'
      return <h2 onClick={this.change}>{text}</h2>
    }
  }
  ReactDOM.render(<Like />, document.getElementById('example'))
</script>
</body>
</html>

2、props

理解：

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

作用：

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

编码操作：

内部读取某个属性值

this.props.propertyName

对 props 中的属性值进行类型限制和必要性限制

 Person.propTypes = { 
 	name: React.PropTypes.string.isRequired, 
 	age: React.PropTypes.number.isRequired 
 }

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

 <Person {...person}/>

默认属性值

 Person.defaultProps = { 
 	name: 'Mary'
 }

组件类的构造函数

constructor (props) { 
	super(props) 
	console.log(props) // 查看所有属性 
}

实例：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>component_props</title>
</head>
<body>

<div id="example1"></div>
<hr>
<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/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">

  /*
需求: 自定义用来显示一个人员信息的组件, 效果如页面. 说明
  1). 如果性别没有指定, 默认为男
  2). 如果年龄没有指定, 默认为18
  */

  //1. 定义组件类
  class Person extends React.Component {
    render() {
      console.log(this)
      return (
        <ul>
          <li>姓名: {this.props.name}</li>
          <li>性别: {this.props.sex}</li>
          <li>年龄: {this.props.age}</li>
        </ul>
      )
    }
  }
  // 对标签属性进行限制
  Person.propTypes = {
    name: PropTypes.string.isRequired,
    sex: PropTypes.string,
    age: PropTypes.number
  }
  // 指定属性的默认值
  Person.defaultProps = {
    sex: '男',
    age: 18
  }

  //2. 渲染组件标签
  const person = {
    name: 'Tom',
    sex: '女',
    age: 18
  }
  ReactDOM.render(<Person {...person}/>, document.getElementById('example1'))
  const person2 = {
    myName: 'JACK',
    age: 17
  }
  ReactDOM.render(<Person name={person2.myName} age={person2.age}/>,
    document.getElementById('example2'))
</script>
</body>
</html>

组件的 props 和 state 属性的区别：

state：组件自身内部可变化的数据
props：从组件外部向组件内部传递数据，组件内部只读不修改

3、refs 与事件处理

refs：

组件内的标签都可以定义 ref 属性来标识自己
a. <input type=“text” ref={input => this.msgInput = input}/>
b. 回调函数在组件初始化渲染完或卸载时自动调用
在组件中可以通过 this.msgInput 来得到对应的真实DOM元素
作用：通过 ref 获取组件内容特定标签对象，进行读取其相关数据

事件处理：

通过 onXxx 属性指定组件的事件处理函数(注意大小写)
a. React 使用的是自定义(合成)事件，而不是使用的原生 DOM 事件
b. React 中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
通过 event.target 得到发生事件的 DOM 元素对象

<input onFocus={this.handleClick}/>
handleFocus(event) { 
	event.target  //返回input对象 
}

实例：

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>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. 界面如果页面所示
      2. 点击按钮, 提示第一个输入框中的值
      3. 当第2个输入框失去焦点时, 提示这个输入框中的值
   */
    //定义组件
    class MyComponent extends React.Component {
      constructor(props) {
        super(props) // 调用父类(Component)的构造函数
        //console.log(this)
        // 将自定义的函数强制绑定为组件对象
        this.handleClick = this.handleClick.bind(this) // 将返回函数中的this强制绑定为指定的对象, 并没有改变原来的函数中的this
      }
      // 自定义的方法中的this默认为null
      handleClick () {
        // alert(this) //this默认是null, 而不是组件对象
        // 得到绑定在当前组件对象上的input的值
        alert(this.msgInput.value)
      }
      handleBlur (event) {
        alert(event.target.value)
      }
      render () {
        return (
          <div>
            <input type="text" ref={input => this.msgInput = input}/>{' '}
            <button onClick={this.handleClick}>提示输入数据</button>{' '}
            <input type="text" placeholder="失去焦点提示数据" onBlur={this.handleBlur}/>
          </div>
        )
      }
    }
    // 渲染组件标签
    ReactDOM.render(<MyComponent />, document.getElementById('example'))
  </script>
</body>
</html>

玳宸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
React 组件的三大属性

文章目录1、state2、props3、refs 与事件处理1、state理解：state是组件对象最重要的属性，值是对象(可以包含多个数据)组件被称为“状态机"，通过更新组件的 state 来更新对应的页面显示(重新渲染组件)编码操作：初始化状态: constructor (props) { super(props) this.state = { stateProp1 : value1, stateProp2 : value2 }
复制链接

扫一扫