React 组件的三大核心属性之一 props 笔记

React 组件的三大核心属性之一：props

props 是 React 组件的三大核心属性之一，用于在组件之间传递数据。props 是只读的，组件不能直接修改自己的 props，但可以通过父组件传递新的 props 来更新。

1. 函数式组件中的 props

函数式组件是一个简单的 JavaScript 函数，接收 props 作为参数，并返回 React 元素。

// 函数式组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 使用组件并传递 props
const element = <Welcome name="Alice" />;
ReactDOM.render(element, document.getElementById('root'));

默认值和默认规范

在函数式组件中，可以通过 defaultProps 来设置 props 的默认值。

// 设置默认 props
Welcome.defaultProps = {
  name: 'Guest'
};

// 使用组件时不传递 props
const element = <Welcome />;
ReactDOM.render(element, document.getElementById('root')); // 输出: Hello, Guest

2. 类式组件中的 props

类式组件是通过继承 React.Component 来创建的，props 可以通过 this.props 访问。

// 类式组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

// 使用组件并传递 props
const element = <Welcome name="Bob" />;
ReactDOM.render(element, document.getElementById('root'));

默认值和默认规范

在类式组件中，同样可以通过 defaultProps 来设置 props 的默认值。

// 设置默认 props
Welcome.defaultProps = {
  name: 'Guest'
};

// 使用组件时不传递 props
const element = <Welcome />;
ReactDOM.render(element, document.getElementById('root')); // 输出: Hello, Guest

3. 展开语法（Spread Syntax）

展开语法可以方便地将对象的属性展开到 props 中。

const user = {
  name: 'Charlie',
  age: 30
};

// 使用展开语法传递 props
const element = <Welcome {...user} />;
ReactDOM.render(element, document.getElementById('root')); // 输出: Hello, Charlie

4. 函数式组件与类式组件的对比

• 函数式组件：简单、轻量，适合无状态组件。
• 类式组件：功能更强大，适合有状态组件，可以使用生命周期方法。

5. 总结

• props 是 React 组件之间传递数据的主要方式。
• 可以通过 defaultProps 设置 props 的默认值。
• 展开语法可以方便地将对象的属性展开到 props 中。
• 函数式组件和类式组件都可以使用 props，但函数式组件更简洁，类式组件功能更强大。

通过这些知识点，你可以更好地理解和使用 React 中的 props 属性。