面试题：React组件中state和props的区别

区别

概念与用途
- state（状态）：
  - 是组件内部的状态管理机制，用于存储组件自身需要变化的数据。例如，一个计数器组件的当前计数值就可以存储在state中。它使得组件能够在其生命周期内根据不同的状态进行渲染更新，是组件私有的，且可以被组件自身修改。
  - 主要用于描述组件自身动态变化的数据，这些数据的改变会触发组件重新渲染。
- props（属性）：
  - 是父组件传递给子组件的数据，就像函数的参数一样。它用于从外部向组件传递数据，使得组件可以根据接收到的不同props呈现不同的内容。例如，一个按钮组件可能通过props接收按钮的文本内容、颜色等信息。
  - 主要用于组件间的数据传递，特别是从父组件到子组件，props是只读的，子组件不能直接修改props。
更新方式
- state：
  - 组件通过调用setState方法来更新state。例如：

import React, { Component } from'react';

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

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

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

 - `setState`会合并新的状态到当前状态，并触发组件重新渲染。

props：
- 父组件通过直接修改传递给子组件的props值来更新。例如：

import React, { Component } from'react';

class Button extends Component {
  render() {
    return <button style={{ color: this.props.color }}>{this.props.text}</button>;
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      buttonColor:'red',
      buttonText: 'Click me'
    };
  }

  changeButton = () => {
    this.setState({
      buttonColor: 'blue',
      buttonText: 'New text'
    });
  };

  render() {
    return (
      <div>
        <Button color={this.state.buttonColor} text={this.state.buttonText} />
        <button onClick={this.changeButton}>Change Button</button>
      </div>
    );
  }
}

 - 子组件接收到新的props后会重新渲染，但子组件自身不能直接改变props。

3. 触发渲染

state：
- 当state变化时，会触发组件自身的重新渲染，并且只会影响当前组件及其子组件树中依赖该state的部分。
props：
- 当props变化时，会触发接收该props的组件重新渲染，同时也可能导致该组件的子组件因为父组件的重新渲染而重新渲染（如果子组件依赖于父组件传递的props）。

实际开发中的正确使用

使用state
- 场景：在表单输入、用户交互状态（如展开/收起菜单）等场景下使用。
- 示例：一个可切换显示隐藏内容的组件。

import React, { Component } from'react';

class ToggleContent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isVisible: false
    };
  }

  toggleVisibility = () => {
    this.setState(prevState => ({
      isVisible:!prevState.isVisible
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.toggleVisibility}>
          {this.state.isVisible? 'Hide' : 'Show'}
        </button>
        {this.state.isVisible && <p>This is the content to toggle.</p>}
      </div>
    );
  }
}

使用props
- 场景：在复用组件且需要根据不同数据展示不同效果时使用，如列表项组件接收不同的数据渲染不同的列表内容。
- 示例：一个列表项组件，父组件传递数据来渲染不同的列表项。

import React, { Component } from'react';

class ListItem extends Component {
  render() {
    return <li>{this.props.itemText}</li>;
  }
}

class List extends Component {
  render() {
    const items = ['Apple', 'Banana', 'Cherry'];
    return (
      <ul>
        {items.map((item, index) => (
          <ListItem key={index} itemText={item} />
        ))}
      </ul>
    );
  }
}

星途面试题库

面试题：React组件中state和props的区别

知识考点

面试题答案

区别

实际开发中的正确使用