React组件通信——props

一、介绍

Props 是 React 中最基础、最常用的父子组件通信方式，它遵循单向数据流原则，完美适用于父子组件间的数据传递和交互。在实践中建议以下几点：

1. 单向数据流：props 应该是只读的，子组件不应直接修改接收到的 props

2. 适度使用：当组件层级过深时，考虑使用 Context 或状态管理替代多层 props 传递

3. 明确命名：使用语义化的 props 名称，如 onClick、isLoading 等

4. 文档化：为组件 props 添加清晰的注释说明

5. 性能注意：避免在渲染函数中创建新的对象/函数作为 props 值，可能导致不必要的重新渲染

二、示例

import { useState } from "react";
// 父组件
function Parent() {const [total, setTotal] = useState(0);const num = 10;function handleClick(data) {setTotal(data);}return (<div><h1>我是父组件</h1><div>父组件的状态 total：{total}</div><Child num={num} handleClick={handleClick} /></div>);
}// 子组件
function Child(props) {const { num, handleClick } = props;return (<div><h1>我是子组件</h1><p>子组件收到父组件传递的数据 num：{num}</p><button onClick={() => handleClick(100)}>点击按钮，传递给父组件total 变为100</button></div>);
}export default Parent;