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，并触发组件重新渲染。
总结
| 特性 | Props | State |
|---|---|---|
| 数据流向 | 从父组件传递给子组件 | 组件内部管理 |
| 可变性 | 只读，不可修改 | 可变，组件内部可以修改 |
| 作用 | 配置组件，使组件复用 | 管理组件内部的动态数据 |
| 触发渲染 | 变化会触发组件重新渲染 | 变化会触发组件重新渲染 |
| 初始化 | 由父组件通过JSX属性传递 | 由组件自身通过构造函数或useState初始化 |
原文地址：https://blog.csdn.net/weixin_42900858/article/details/140673878
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！