react普通属性如何存储

存储普通属性的方法

在React中，普通属性通常通过组件的props或state来存储和管理。props用于父组件向子组件传递数据，而state用于组件内部管理可变数据。

使用props传递属性

父组件可以通过props将属性传递给子组件。子组件通过this.props（类组件）或直接通过参数（函数组件）访问这些属性。

类组件示例：

class ChildComponent extends React.Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

class ParentComponent extends React.Component {
  render() {
    return <ChildComponent message="Hello from parent" />;
  }
}

函数组件示例：

function ChildComponent({ message }) {
  return <div>{message}</div>;
}

function ParentComponent() {
  return <ChildComponent message="Hello from parent" />;
}

使用state管理属性

对于组件内部需要变化的数据，可以使用state来存储。类组件通过this.state和this.setState管理状态，函数组件使用useState钩子。

类组件示例：

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

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

函数组件示例：

function MyComponent() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

直接存储为实例属性

对于不需要触发重新渲染的数据，可以将其存储为组件的实例属性（类组件）或使用useRef（函数组件）。

类组件示例：

class MyComponent extends React.Component {
  timerId = null;

  componentDidMount() {
    this.timerId = setInterval(() => console.log('Tick'), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerId);
  }

  render() {
    return <div>Check console for timer logs</div>;
  }
}

函数组件示例：

function MyComponent() {
  const timerId = React.useRef(null);

  React.useEffect(() => {
    timerId.current = setInterval(() => console.log('Tick'), 1000);
    return () => clearInterval(timerId.current);
  }, []);

  return <div>Check console for timer logs</div>;
}