React基础04（Props）

设德兰
165 阅读2分钟

1 什么是props

在React中，我们使用props进行组件通信，即从父组件向子组件传递数据。

props是自定义组件的重要工具，使用props，父组件可以控制子组件的外观和工作方式。 props和传递给普通JavaScript函数的参数没什么两样，它同样可以是任何类型：值、数组、对象、函数，甚至是其他组件。

image.pngimage.png

2 props在组件中的角色

React Component = data + logic + appearance，其中data = props + state。(主要）

state是组件内部定义的数据，可以通过组件的逻辑进行更新。而props是来自父组件的数据，他们被规定为仅可读，只能通过父组件进行更新。

React规定props为仅可读的原因是：改变props的值会影响父组件，造成副作用（side effect），也就违反了组件必须是纯函数的规定。props仅可读，允许React可以优化应用程序、避免bug、让程序可预测。同样地，组件内部永远不应该改变我们在其函数外定义的任何数据。

// error
let x = 7;
const Component = () => {
    x = 23;               //x的值在函数外部定义，不能在组件中改变它的值
    return <h1>{x}</h1>;
}

3 单向数据流

在React中，数据只能从父组件传递到子组件，这被称为单向数据流。

单向数据流的好处：

  1. 使整个应用程序更具有可测性也更容易理解
  2. 使整个应用程序更易调试，因为对数据有更多掌控
  3. 更高效

4 代码演示

在 JSX 中，props 可以作为属性传给组件。 props实现组件通信的步骤：

  1. 把props传入组件（父组件操作）
const App = () => {
  return (
    <>
      <p>App是父组件，WelcomeMessage是子组件</p>
      <WelcomeMessage name={chase} age={22} />
    </>
  );
};
  1. 子组件接收props（子组件操作）
function WelcomeMessage(props) {   //以函数参数形式接收props
 return <p>Welcome，{props.name}!</p>
}

由于props的储存形式为Javascript对象，我们常用对象解构的方式获取props的值。

function WelcomeMessage({name,age}) {   
 return <p>Welcome，{name}!</p>
}

有一种被称为children的特殊props，它代表了包含在组件的开始和结束标签之间的内容。这种情况我们可以使用名为children的props来获取：

<WelcomeMessage> Here is some message </WelcomeMessage>

function WelcomeMessage({ children }) {
  return <p>{children}</p>
}
avatar
文章
阅读
粉丝