React组件实例的三大属性

破裤兜2023-08-12 14:13

React组件实例的三大属性分别是：state、props和refs。

State属性：用来存储组件内部的状态，只能在组件内部修改。当state被修改时，React会重新渲染组件。

Props属性：用来传递父组件的数据到子组件中，是组件的只读属性，无法在子组件中修改。当props被修改时，React会重新渲染组件。

Refs属性：用来获取组件实例或DOM节点的引用，可以在组件内部或父组件中使用。Refs不会随着组件重新渲染而改变。

下面是一个简单的代码演示，展示了上述三大属性的概念：

jsx 复制代码

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.myRef = React.createRef();
  }

  handleClick = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
    console.log(this.myRef.current.value);
  };

  render() {
    const { count } = this.state;
    const { text } = this.props;
    return (
      <div>
        <p>{text}</p>
        <p>Count: {count}</p>
        <button onClick={this.handleClick}>Increment</button>
        <input type="text" ref={this.myRef} />
      </div>
    );
  }
}

export default MyComponent;

在这个示例中，我们定义了一个MyComponent组件，并在组件的constructor方法中初始化了state和ref属性。MyComponent组件包含一个p标签，一个计数器和一个按钮，每次点击按钮都会使计数器加1。我们还添加了一个输入框，然后使用ref属性获取输入框的引用，在button的点击事件中打印出输入框的值。