前端面试题198（react中状态（state）和属性（props）之间有何不同）

在React中，state和props是组件的两个核心概念，它们帮助开发者管理组件的数据和行为，但各自有不同的用途和特性。

状态（State）

定义：

• state是组件内部的数据源，用于存储组件可能随时间变化的信息。
• 它使组件能够成为动态的，即根据用户交互或其他因素改变其行为或显示的内容。
• 只有类组件可以直接使用state，函数组件需要通过使用useState Hook来实现状态管理。

特点：

1. 私有性： state是组件私有的，不能被父组件直接访问或修改。
2. 可变性： 组件可以通过调用setState方法来更新其状态，这将触发组件及其子组件的重新渲染。
3. 初始化： 状态通常在组件的构造函数中初始化。
4. 控制权： 状态由组件自身控制，体现了组件的自主性和独立性。

属性（Props）

定义：

• props是父组件向子组件传递数据的一种方式。
• 它们是只读的，意味着一旦被设定，子组件就不能修改这些值。
• props允许组件之间的数据共享和通信，使得组件可以复用，并且易于理解和维护。

特点：

1. 传递性： props是从外部（通常是父组件）传递给组件的，可以看作是组件的输入参数。
2. 不变性： 子组件不应直接修改接收到的props，以保持组件的纯净性和单一职责原则。
3. 灵活性： 任何类型的值都可以作为props传递，包括基本类型、对象、函数等。
4. 控制权： props的控制权在于父组件，体现了组件间的一种依赖关系。

示例代码

使用State的类组件示例

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

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

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

使用Props的函数组件示例

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

// 使用Welcome组件并传递props
<Welcome name="Alice" />

总结来说，state用于管理组件内部可变的数据和逻辑，而props则是组件间通信和数据传递的桥梁，两者共同构成了React组件灵活且强大的数据管理机制。