ReactJS中的道具和数据流

无论您将组件声明为函数还是类, 它都绝不能修改自己的props 。 此类函数称为“纯函数”,因为它们不尝试更改其输入,并且始终为相同的输入返回相同的结果。 就其道具而言,所有React组件都必须像纯函数一样工作。 (4)

不可变!=无聊

总结一下React中的道具

  • 数据是否传递给组件-值可以是任何东西:字符串,数组,函数等
  • 是一成不变的
  • 使组件变得更可重用

那么,如果props是只读的,那么它们在创建动态Web应用程序中位于什么位置? 您将道具传递到组件。 怎么了? 它会干吗/就像葡萄干在阳光下一样?… 还是会爆炸? 不,现在可以通过在render()函数以及大多数其他React组件方法中调用this.props来访问它。(6,7)

感谢React使用的声明式编程方法,您可以专注于应用程序的外观并声明要表达的props属性的“地址”,而不必担心手动更新DOM,添加和删除类以及以此类推。 只需告诉React最终结果应该是什么。

道具与数据流有什么关系?

在React中处理数据的方式基本上有两种: propsstate (可通过this.state )。 第三个是上下文(此处未讨论),它是更高级的并且当前不能保证稳定(React Docs:上下文)。

虽然组件不能更改自己的道具 ,但可以更改其状态 …道具和状态用作render()方法的输入以确定其输出。 render()方法还调用diff算法,该算法可识别组件中的任何更改并将它们记录为批处理到“真实” DOM。

来自React Docs的示例

这是React Docs中组件和道具的示例。 此代码在页面上呈现“ Hello,Sara”:

 function Welcome(props) { 
return

Hello, {props.name}

;
}
 const element = ; 
ReactDOM.render(
element,
document.getElementById('root')
);

在CodePen上尝试。

让我们回顾一下此示例中发生的情况:

  1. 我们使用元素调用ReactDOM.render()
  2. React用{name: 'Sara'}作为道具来调用Welcome组件。
  3. 我们的Welcome组件返回一个

    Hello, Sara

    元素作为结果。

  4. React DOM有效地更新了DOM以匹配

    Hello, Sara

此示例不包括状态,在我对其进行更多了解时将进入该状态。 现在,知道状态类似于道具,但是状态是私有的,并且完全由组件控制。 有关确实包含状态的示例,请参见React Docs中的State和Lifecycle。

何时使用道具与状态

仅当组件具有仅影响该组件且不影响应用程序其余任何部分的内部值时 ,才使用State 。 如果仅影响布局,而没有其他影响,则状态可能是适当的。 除此之外,您还想使用注入到每个其他组件(1)中的道具 (或“ 道具 ”)。

作为Learn.co的ReactJS初始状态课程的一条很好的经验法则,弄清楚数据是应该进入道具还是状态,最好的方法是问“这些数据会改变吗?” 。 如果没有,那就是道具。 如果可以,它应该进入状态!