面试题：React中State和Props的基础区别

数据流向

State：数据是组件内部私有的，状态的改变会触发组件重新渲染。数据通常在组件内部产生和更新，然后在组件内部使用或传递给子组件。
Props：数据是由父组件传递给子组件的，是单向流动的。子组件只能接收并使用props，不能直接修改从父组件传来的props。

可变性

State：可以在组件内部通过setState方法（在类组件中）或useState Hook（在函数组件中）进行修改，从而触发组件的重新渲染。
Props：是只读的，子组件不能直接修改props。如果需要修改，需要由父组件更新后重新传递新的props。

使用场景

State：用于管理组件内部的状态，例如表单输入值、组件的展开/收起状态等。
Props：用于将数据从父组件传递到子组件，使子组件能够根据接收到的不同props呈现不同的内容，例如传递列表项数据给列表项组件。

示例

类组件

import React, { Component } from 'react';

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

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

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

class App extends Component {
  render() {
    return (
      <Counter message="Hello from parent" />
    );
  }
}

export default App;

在上述类组件中，Counter组件内部的count是state，用于记录点击次数。message是props，由父组件App传递过来。

函数组件

import React, { useState } from'react';

const Counter = ({ message }) => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <p>Message from parent: {message}</p>
    </div>
  );
};

const App = () => {
  return (
    <Counter message="Hello from parent" />
  );
};

export default App;

在函数组件中，count通过useState Hook管理，是组件的state。message作为props从父组件App传递给Counter组件。

星途面试题库

面试题：React中State和Props的基础区别

知识考点

面试题答案

数据流向

可变性

使用场景

示例

类组件

函数组件