React前端面试每日一试 3.状态（State）和属性（Props）的区别是什么？

加粗样式先简单介绍一下Props和State的特点

Props（属性）

Props（Properties）是React组件间传递数据的一种方式。它们是从父组件传递给子组件的只读数据，子组件不能修改这些数据。Props主要用于配置组件，使组件可以在不同的场景下复用。
特点有:
1. 只读：组件内部不能修改Props，必须保持其不可变性。
2. 父子通信：数据从父组件流向子组件。
3. 组件复用：通过传递不同的Props，可以在多个地方复用同一个组件。
4. 无状态：Props不管理组件的状态变化，只用于传递数据。

示例代码

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

const App = () => {
  return <Greeting name="Alice" />;
}

在这个例子中，name是通过Props传递给Greeting组件的，组件内部不能修改name的值。

State（状态）

State是React组件自身维护的内部数据。它是组件内部可变的数据，通常用于处理用户交互、组件内部的数据变化等。State的变化会触发组件的重新渲染，从而更新UI。
特点有:
1. 可变：组件内部可以修改State，通常通过this.setState方法（类组件）或useState Hook（函数组件）。
2. 组件内部管理：State由组件自身管理，不会直接被外部修改。
3. State用于处理组件内部的动态数据和状态变化。
4. State的变化会触发组件的重新渲染。

示例代码

import React, { useState } from 'react';

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

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

在这个例子中，count是组件内部的State，点击按钮时，setCount会更新count，并触发组件重新渲染。

总结