【React】组件三大核心属性

在React中，组件的三大核心属性是state、props和refs。

1. State:

   State是组件的私有属性，用于组件保存、控制和管理自己的可变状态。每个React组件都可以有自己的state，通过this.state访问。

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
 
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

2. Props:

   Props是组件之间通信的桥梁，它们是从外部传递给组件的参数。组件内部可以通过this.props访问接收到的props。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
 
const element = <Welcome name="Sara" />;

3. Refs:

   Refs是一种方法，可以用来访问DOM节点或者其他组件实例，对应的是真实DOM元素或者其他组件的引用。

class AutoFocusInput extends React.Component {
  componentDidMount() {
    this.input.focus();
  }
 
  render() {
    return (
      <input ref={(input) => this.input = input} />
    );
  }
}

以上代码展示了如何在React组件中使用state、props和refs。