React 状态与属性

在 React 中，状态（State）和属性（Props）是构建组件的基础。理解它们如何工作对于编写高效和可重用的组件至关重要。

状态（State）

状态是组件内部的数据，它随着时间而变化。状态通常用于处理用户交互和动态内容。

更新状态：使用 setState 方法更新状态。
异步更新：React 可能会批量更新状态以优化性能。

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

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>计数: {this.state.count}</p>
        <button onClick={this.handleClick}>点击我</button>
      </div>
    );
  }
}

属性（Props）

属性是组件接收的数据，通常由父组件传递给子组件。

只读：属性是只读的，不能在子组件内部修改。
传递数据：通过属性传递数据到子组件。

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Greeting name="Alice" />);

图片示例

以下是一个 React 组件的示例，展示了如何使用状态和属性。

import React, { useState } from 'react';

function ImageComponent(props) {
  const [imageSrc, setImageSrc] = useState(props.defaultImage);

  return (
    <div>
      <img src={imageSrc} alt="Random Image" />
      <button onClick={() => setImageSrc(props.nextImage)}>Next Image</button>
    </div>
  );
}

const App = () => {
  return (
    <div>
      <h1>Random Image Viewer</h1>
      <ImageComponent
        defaultImage="https://cloud-image.ullrai.com/q/image_1/"
        nextImage="https://cloud-image.ullrai.com/q/image_2/"
      />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

更多关于 React 的信息，请访问 React 官方文档。