React state和props区别是什么 ?

八股文_React面试题 0 13

参考回答：

在 React 中，state 和 props 都用于存储和管理数据，但它们有很大的区别，它们分别扮演不同的角色：

1. `state`（状态）：

定义：state 是组件内部的数据，用于描述组件的当前状态，通常由组件自身管理。状态可以改变，并且每当状态发生变化时，组件会重新渲染。
修改方式：组件可以通过 this.setState()（在类组件中）或 useState()（在函数组件中）来更新状态。
作用范围：state 只在当前组件中有效，可以在组件内部自由修改，用于存储临时的、交互相关的内容。

示例：用户输入、计时器、表单数据等。

示例（类组件中的 state）：

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

 increment = () => {
   this.setState({ count: this.state.count + 1 });  // 更新 state
 };

 render() {
   return (
     <div>
       <p>{this.state.count}</p>
       <button onClick={this.increment}>Increase</button>
     </div>
   );
 }
}

示例（函数组件中的 state）：

import React, { useState } from 'react';

function Counter() {
 const [count, setCount] = useState(0);  // 使用 useState 创建 state

 const increment = () => {
   setCount(count + 1);  // 更新 state
 };

 return (
   <div>
     <p>{count}</p>
     <button onClick={increment}>Increase</button>
   </div>
 );
}

2. `props`（属性）：

定义：props 是父组件传递给子组件的数据，用于在组件之间传递信息。props 是只读的，不能在子组件内部修改。子组件只能通过 props 接收数据。
修改方式：props 由父组件传递，子组件不能修改父组件传递的 props，但可以通过回调函数通知父组件改变。
作用范围：props 是组件的外部数据，是父组件传递给子组件的参数，用于在组件之间共享信息。

示例：显示用户的名字、父组件传递的函数、配置项等。

示例（父组件传递 props 给子组件）：

function Parent() {
 const userName = "John Doe";
 return <Child name={userName} />;
}

function Child(props) {
 return <p>Hello, {props.name}</p>;  // 通过 props 获取数据
}

详细对比：

特性	`state`	`props`
定义	组件内部的状态，用于描述组件的当前状态。	组件的外部数据，由父组件传递给子组件。
修改方式	由组件内部修改，通过 `this.setState()` 或 `useState()`。	由父组件传递，子组件不能修改，只能读取。
作用范围	只在当前组件内部有效，组件可以自由修改它。	由父组件传递给子组件，子组件只读。
生命周期	组件在渲染和更新时会响应 `state` 变化。	父组件重新渲染时，`props` 会重新传递给子组件。
实例	用户输入、计时器、表单内容等。	显示用户信息、从父组件传递的事件处理函数等。

总结：

state 是组件的私有数据，可以在组件内部修改，通常用来存储与用户交互相关的动态数据。
props 是父组件传递给子组件的数据，子组件无法修改 props，只能读取，并用来显示或响应父组件传递的内容。

state 和 props 是 React 中用于数据流的核心概念，state 用于存储组件的内部状态，而 props 用于组件间的通信，父组件通过 props 向子组件传递数据。

参考回答：

1. state（状态）：

2. props（属性）：

详细对比：

总结：

发表评论 取消回复

1. `state`（状态）：

2. `props`（属性）：

发表评论取消回复