组件状态和数据传递

组件状态

类组件中的状态

在类组件中，状态存储在 this.state 对象中，并且可以使用 this.setState 方法更新状态。

import React, { Component } from 'react';

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

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

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

export default Counter;

函数组件中的状态

在函数组件中，可以使用 useState 钩子来创建状态。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

export default Counter;

props验证

在 React 中，可以使用 PropTypes 库来验证组件的 props。PropTypes 提供了一系列的验证器，可以用来验证 props 的类型、是否必需以及默认值。

import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

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

MyComponent.defaultProps = {
  name: 'John Doe',
  age: 30
}

export default MyComponent;

数据传递

在 React 中，组件之间的数据传递主要通过 props 实现。props 是父组件传递给子组件的数据，它们是只读的，子组件不能修改 props。

父组件向子组件传递数据

父组件通过在 JSX 中为子组件设置属性来传递数据。

import React from 'react';

const Child = ({ message }) => {
  return <p>{message}</p>;
}

const Parent = () => {
  const message = "Hello from Parent!";
  return <Child message={message} />;
}

export default Parent;

子组件向父组件传递数据

子组件可以通过调用父组件传递给它的回调函数来向父组件传递数据。

import React from 'react';

const Child = ({ onIncrement }) => {
  return <button onClick={onIncrement}>Increment</button>;
}

const Parent = () => {
  const [count, setCount] = React.useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <Child onIncrement={incrementCount} />
    </div>
  );
}

export default Parent;

状态提升

状态提升是指将多个组件共享的状态提升到它们最近的公共父组件中。这使得状态可以在兄弟组件之间共享。

示例：

import React, { useState } from 'react';

const Input = ({ value, onChange }) => {
  return <input type="text" value={value} onChange={(e) => onChange(e.target.value)} />;
}

const Parent = () => {
  const [sharedValue, setSharedValue] = useState("");

  return (
    <div>
      <Input value={sharedValue} onChange={setSharedValue} />
      <Input value={sharedValue} onChange={setSharedValue} />
      <p>Shared Value: {sharedValue}</p>
    </div>
  );
}

export default Parent;

在这个示例中，Input 组件接收一个 value 和一个 onChange 回调函数作为 props。当输入框的值发生变化时，onChange 回调函数会被调用，并将新的值传递给 setSharedValue 函数，从而更新 sharedValue 状态。由于 sharedValue 状态被提升到 Parent 组件中，因此两个 Input 组件都可以访问和更新相同的 sharedValue 状态。

React Context

React Context 提供了一种方式，使得数据能够在组件树中进行传递，而不必一级一级地通过 props 传递。它对于全局数据（如当前用户信息、主题设置等）非常有用。

import React, { createContext, useContext } from 'react';

const MyContext = createContext();

const Child = () => {
  const value = useContext(MyContext);
  return <p>{value}</p>;
}

const Parent = () => {
  return (
    <MyContext.Provider value="Hello from Context!">
      <Child />
    </MyContext.Provider>
  );
}

export default Parent;

在这个示例中，MyContext 是一个 React Context 对象，它通过 createContext 函数创建。Child 组件通过 useContext 钩子函数从 MyContext 中获取数据，并将其渲染为文本。Parent 组件使用 MyContext.Provider 组件将数据传递给 Child 组件。